ES6常用语法总结

太过爱你忘了你带给我的痛 2022-10-29 01:41 214阅读 0赞

### 目录 ###

*  一. let和const命令
 *   *  简单示例
     *  与var的区别
     *   *  1. var的变量穿透问题
         *  2. 常量修改问题
 *  二. 模板字符串
 *  三. 函数默认参数
 *  四. 箭头函数
 *  五. 对象初始化简写
 *  六. 对象解构
 *  七. 传播操作符…
 *  八. 数组map和reduce方法使用
 *   *  map()方法
     *  reduce()方法

--------------------

# 一. let和const命令 #

> `es6`开始，变量和常量的严格区分：`let`用来定义变量，`const`用来定义常量

## 简单示例 ##

//传统定义变量的方式:所有变量都用var
    var name1 = "zsr";
    var link1 = "https://blog.csdn.net/qq_45173404";
    var PI1 = Math.PI;
    console.log(name1);
    console.log(link1);
    console.log(PI1);
    
    //es6定义变量的方式:变量用let 常量用const
    let name2 = "zsr";
    let link2 = "https://blog.csdn.net/qq_45173404";
    const PI2 = Math.PI;
    console.log(name2);
    console.log(link2);
    console.log(PI2);

双击该`.html`文件结果如下：  
![image-20210131223433033][]

--------------------

## 与var的区别 ##

> `let`和`const`解决了什么问题呢？

### 1. var的变量穿透问题 ###

用var定义的变量会出现穿透问题

//1.var的变量穿透
    for (var i = 0; i < 5; i++) { 
    console.log(i);
    }
    console.log(i);

运行结果：应该打印0~4，但打印了5  
![image-20210131223846313][]  
这就是出现了var变量穿透的问题，如果我们修改为`let`，再测试，则会报错，解决了变量穿透的问题  
![image-20210131224013853][]

### 2. 常量修改问题 ###

用`var`定义的常量可以被修改

//2.常量修改问题
    var PI = Math.PI;
    PI = 100;
    console.log(PI);

结果：  
![image-20210131224422169][]  
如果我们修改为`const`，则会报错不能修改  
![image-20210131224626491][]

--------------------

# 二. 模板字符串 #

传统在单引号/双引号中用加号进行字符串拼接，而es6中可用反引号和`$`进行拼接

var person = { 
    name: "zsr",
    address: "湖北武汉"
    }
    
    //传统字符串拼接
    console.log("我是" + person.name + "家在" + person.address);
    
    //es6模板语法拼接
    console.log(`我是${ person.name}家在${ person.address}`);

运行效果一致：  
![image-20210131230644409][]

--------------------

# 三. 函数默认参数 #

**函数默认参数**：在方法的参数后面加上一个默认值，这样可以不传参，也可以只穿少于指定参数个数的参数

//函数默认参数
    function sum(a=100, b=100) { 
    return a + b;
    }
    console.log(sum());
    console.log(sum(100));

运行结果：  
![image-20210131231455655][]

--------------------

# 四. 箭头函数 #

> 箭头函数简化函数的定义，可以让我们不用使用function关键字

**改进步骤**：

1.  去掉function
2.  在括号后面加箭头
3.  如果仅有逻辑代码仅有return可省去（如果有逻辑题不能省去）
4.  如果参数只有一个可以把括号省区（如果有多个参数不能省去）

--------------------

# 五. 对象初始化简写 #

对象是以key-value的形式存在：

*  如果key和value的值相同,则定义一次即可
 *  如果value是一个函数,则可以把`:function`去除,只剩下()即可

//传统写法
    var info = { 
        title: "Bareth的博客",
        link: "https://blog.csdn.net/qq_45173404",
        go: function () { 
        console.log("进入到博客网页中...")
    	}
    }
    
    //如果对象中的key-value在外定义成变量
    var title = "Bareth的博客";
    var link = "https://blog.csdn.net/qq_45173404";
    var info2 = { 
        title: title,
        link: link,
        go: function () { 
        console.log("进入到博客网页中...");
    	}
    }
    
    //es6简写后:
    //对象是以key-value的形式存在:
    //1.如果key和value的值相同,则定义一次即可
    //2.如果value是一个函数,则可以把`:function`去除,只剩下()即可
    let info3 = { 
        title,
        link,
        go() { 
        console.log("进入到博客网页中...");
    	}
    }
    
    console.log(info3.title);
    console.log(info3.link);
    info3.go();

运行结果：  
![image-20210201154521159][]

--------------------

# 六. 对象解构 #

> 对象解构 —- es6提供一些获取快捷获取对象属性和行为方式

运行结果：  
![image-20210201165433914][]

--------------------

# 七. 传播操作符… #

> 把一个对象的属性传播到另外一个对象中

//person对象
    var person = { 
        name: "Bareth",
        age: 21,
        address: "湖北武汉",
        link: "https://blog.csdn.net/qq_45173404",
        go: function () { 
            console.log("进入到博客网页中...")
        }
    }
    
    //解构
    var {  name, age, ...other } = person;
    console.log(name);
    console.log(age);
    console.log(other);

运行结果：  
![image-20210201165957787][]

--------------------

# 八. 数组map和reduce方法使用 #

## map()方法 ##

> 将原数组中的所有元素通过函数进行处理并放入到一个新数组中并返回该新数组

//实现数组每个元素x2
    let arr = [1, 2, 3, 4, 5];
    
    //传统方法
    let double_arr = [];
    for (let i = 0; i < arr.length; i++) { 
        double_arr.push(arr[i] * 2);
    }
    console.log("传统方法:" + double_arr);
    
    //map()方法 -- 自带的循环,并且会把处理后的值回填到相应位置
    let double_arr_map = arr.map(function (ele) { 
        return ele * 2;
    })
    console.log("map()方法:" + double_arr_map);
    //箭头函数简写
    let double_arr_map_min = arr.map(ele => ele * 2);
    console.log("map()方法经过简写后:" + double_arr_map_min);

![image-20210201171020776][]

--------------------

## reduce()方法 ##

reduce(function(x,y)[,初始值])

参数：一个函数`function()`和一个初始值(可选)，该函数接收两个参数`x`、`y`：

*  第一个参数`x`是上一次reduce处理的结果
 *  第二个参数`y`是数组中要处理的下一个元素  
    reduce() 会从左到右依次把数组中的元素用reduce处理，并把处理的结果作为下次reduce的第一个参数。如果是 第一次，会把前两个元素作为计算参数，或者把用户指定的初始值作为起始参数

//求数组元素和
    let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
    
    //reduce()函数求数组元素和
    var result = arr.reduce(function (a, b) { 
    return a + b;
    })
    console.log(result);
    //箭头函数简写后
    arr.reduce((a, b) => a + b);

运行结果：  
![image-20210201171704628][]

[image-20210131223433033]: /images/20221024/453177f41cce48958c252ad517147280.png
[image-20210131223846313]: /images/20221024/7209fddfea074a8d96b7af06e15fdd3b.png
[image-20210131224013853]: /images/20221024/21195353a2eb43558d121f6ae287c265.png
[image-20210131224422169]: /images/20221024/35350096c59c46de8c3d1bb0abec1594.png
[image-20210131224626491]: /images/20221024/fa02bb772be148c9b44fb2d3d0182911.png
[image-20210131230644409]: /images/20221024/b525baf1eea946ee990a8a87ef3aa630.png
[image-20210131231455655]: /images/20221024/2eea77cda72648efa8f7a80b59aa9487.png
[image-20210201154521159]: /images/20221024/5bcee3bc95574db28d6a0dca898216c6.png
[image-20210201165433914]: /images/20221024/92f0fb26734c4454ba4873325f2a86cf.png
[image-20210201165957787]: /images/20221024/1926114194834f93931d02a10d5af9a9.png
[image-20210201171020776]: /images/20221024/c351d3692be849df8f3783865f829e03.png
[image-20210201171704628]: /images/20221024/8307b7d0796d499b833e8d5df4b63c95.png