ES6展开运算符(...)

在ES6中，我们有了一个新的运算符--展开运算符，它可以使我们的代码的数量有一定的减少，我们来举几个常用的例子，同时通过例子来了解展开运算符的使用。

展开运算符的作用：

1. 展开数组/字符串/对象
2. 拷贝数组/对象（浅拷贝）
3. 合并数组/对象
4. 把伪数组转换成真数组
5. 收集函数的剩余参数

一、展开数组/字符串/对象

0. 展开数组

   let arr = ['宝马', '奥迪', '奔驰', '红旗'];
   console.log(...arr);
   

   

1. 展开字符串（因为字符串本身也是一个特殊的数组）

   console.log(..."hello Riven,你好,世界");
   

   

2. 展开对象

   let obj={
           name:'张三',
           age:18,
           hobby:['唱','跳','rap'],
           family:{
               father:{
                   name:'张父',
                   age:38,
                   hobby:['洗脚']
               },
               mother:{
                   name:'张母',
                   age:37,
                   hobby:['打牌']
               }
           }
       }
   

   如果直接展开：

   console.log(...obj);
   

   会报错：

   

   我们需要使用{}对展开进行包裹：

   console.log({...obj})
   

   

3. 求数组的最大最小值

   let nums=[123,12,4564,23,125];
   console.log(Math.max(nums));//NaN直接传入nums会报错，我们需要把数组展开
   console.log(Math.max(...nums));
   console.log(Math.min(...nums));
   

   

二、拷贝数组/对象（浅拷贝）

0. 拷贝数组

   直接复制其实是复制的引用地址，将来任意一个数组变化了都会影响到另一个数组

   let arr = ['宝马', '奥迪', '奔驰', '红旗'];
   let arr1=arr;
   arr1.push('比亚迪');
   console.log(arr);
   

   

   所以我们需要使用...展开后进行拷贝

   let arr = ['宝马', '奥迪', '奔驰', '红旗'];
   let arr1=[...arr]
   arr1.push('比亚迪');
   console.log(arr);
   

   

1. 拷贝对象

   let obj={
           name:'张三',
           age:18,
           hobby:['唱','跳','rap'],
           family:{
               father:{
                   name:'张父',
                   age:38,
                   hobby:['洗脚']
               },
               mother:{
                   name:'张母',
                   age:37,
                   hobby:['打牌']
               }
           }
       }
   let obj1 = {...obj};
   obj1.family.father.age=8;//修改嵌套多层的属性值
   console.log(obj.family.father.age);
   

   可以看到我们是使用的...来拷贝对象，但是修改obj1的father.age后， obj的father.age的值也变了，这说明...只是浅拷贝，除了第一层，其他的还是拷贝的引用地址

   

三、合并数组/对象

0. 合并数组

let arr2 = ['王五', '赵六'];
let arr3 = ['王德发', '斯国一'];
let arr4 = [...arr2, ...arr3];
console.log(arr4);

2. 合并对象

let obj2={
    name:'王五',
    age:18,
    hobby: ['唱歌']
}
let obj3={
    hobby: ['跳舞'],
    father: '王五的父亲'
}
let obj4 = {...obj2, ...obj3};
console.log(obj4)

合并对象时，不同的属性会合并累加起来，相同属性名的前面的对象会被后面的对象覆盖，例如：hobby唱歌被跳舞覆盖了

四、把伪数组转换成真数组

    function add() {
        //arguments 是一个对应于传递给函数的参数的类数组对象。(是一个伪数组)
        console.log(arguments);
        console.log([...arguments]);
    }
    add(1, 2, 3, 4, 5);

五、收集函数的剩余参数

    function fn(...args) {
        console.log(args);
    }
    fn(1, 2, 3, 4, 5);