es6解构赋值+剩余参数+扩展运算符

es6解构赋值

解构：分解数据解构，赋值：给变量赋值。es6中允许从数组中提取值，按照对应位置，对变量赋值。对象也可以实现解构

1. 数组解构

let arr1 = [1,2,3];
let [a,b,c] = arr1;// [a,b,c]表示解构，而不是数组
console.log(a);// 1
console.log(b);// 2
console.log(c);// 3

[a,b,c]与数组中的数据进行一一匹配

左边解构变量个数小于右边数组数据个数

仍然一一对应关于

let arr1 = [1,2,3];
let [a,b] = arr1;
console.log(a);// 1
console.log(b);// 2

左边解构变量个数大于右边数组数据个数

左边多于解构变量由于只是声明了，没有赋值，因此为undefined

let arr1 = [1,2,3];
let [a,b,c,d] = arr1;
console.log(a);// 1
console.log(b);// 2
console.log(c);// 3
console.log(d);// undefined

2. 对象解构

对象解构是按照属性匹配的方式进行解构

方式一：属性一一对应

let obj = {
      
       uname: 'zt', age: 19, sex: '男'};
let {
      
       uuname, age, sex} = obj;// { uuname, age, sex}为对应的解构变量
console.log(uuname);// undefined
console.log(age);// 19
console.log(sex);// 男

左边的解构变量的变量名必须与右边对象属性名称对应方可获取值，否则undefined

方式二：属性一一对应的基础上，为解构变量取别名

扫描二维码关注公众号，回复： 12852359 查看本文章
```
let obj = {
      
       uname: 'zt', age: 19, sex: '男'};
let {
      
       uname: myName} = obj;
console.log(myName);// zt
console.log(uname);// uname is not defined
```
左边解构变量取别名之后，实则创建的变量是myName，而没有创建变量uname，因此实际能使用的变量为myName

3. 剩余参数

当实参大于形参的时候，传统的函数可以使用函数内置属性对象arguments来获取数据，但是箭头函数没有arguments函数对象，而其采用的是剩余参数的方式进一步实现的。

使用

形参采用…args方式接收一个数组形式的数据

案例

 var fn = (...args) => {
        
        
        var total = 0;
        args.forEach(item => total += item);
        return total;
    }
    console.log(fn(1,2,3));// 6

用法类似于arguments，都是一个伪数组

剩余参数与数组解构一起使用
1. 用于获取剩余的参数数据
```
const arr = [1,2,3];
let [a,...b] = arr;
console.log(a);// 1
console.log(b);// [2,3]
```
  b获取了数组中匹配的剩余的数据
2. 注：由于对象解构需要属性匹配，因此不能使用剩余参数来进行匹配。

4. 扩展运算符

扩展运算符可以将数组或者对象转为用逗号分隔的参数序列
不同于剩余参数，剩余参数是将剩余的参数放在一个数组中，而扩展运算符则是将数组拆分为以逗号分隔的参数序列。但是两者都是用三个点(…)表示

用法：

let arr = [1,2,3];
// ...arr; // 1,2,3
console.log(...arr); // 1 2 3
// 等价于
console.log(1,2,3);// 1 2 3
// 由于console.log方法将逗号作为参数的分隔符，因此打印结果为1 2 3而不是1,2,3

应用：
1. 合并数组
  
  由于扩展运算符可以将数组转换为用逗号分隔的参数序列，因此可以将多个数组转换为多个参数序列，参数序列之间用逗号连接，加上[]构成新的数组
  1. 方法一：
```
let arr1 = [1,2,3];
let arr2 = [4,5,6];
let arr3 = [...arr1, ...arr2];
 console.log(arr3);// [1,2,3,4,5,6];
```
  2. 方法二：
    
    由于push()方法参数当为多个参数，且参数之间用逗号进行分隔的时候，也可以追加到数组中，因此符合扩展运算符对数组进行转换的结果
```
let arr1 = [1,2,3];
let arr2 = [4,5,6];
arr1.push(...arr2);
console.log(arr1);
```
2. 将伪数组转换为真正的数组，以便使用数组相应的方法
  1. 通过扩展运算符
  由于伪数组只能读取以及只有Length属性，但是对于真正的数组的其他属性方法不可以使用，因此可以通过扩展运算符对于进行转换以至于可以使用数组相应的方法和属性
```
function fn() {
        
        
     var arr = [...arguments];
    console.log(arr);
}
fn(1,2,3);
```
  1. 通过Array.from()方法
    1. Array.from(伪数组，回调函数);
    2. 参数解释
      1. 伪数组：即需要转换的伪数组
      2. 回调函数：类似于数组的map方法，用来对转换后的每个元素进行处理，将处理后的值放入返回的数组
    3. 使用
```
let arrayLike = {
            
            
    '0': 1,
    '1': 2,
    'length': 2
}
let newArray = Array.from(arrayLike,item => item * 2);
 console.log(newArray);
```