在ES6中,使用 … 来表示展开运算符,它可以展开数组/对象。

一、展开运算符…在数组中的使用

1. 展开一个数组

        const arr = [1,2,3] ;
        console.log(...arr);  //输出： 1 2 3

2. 复制一个数组，也称深拷贝数组

        const arr = [1,2,3] ;
        
        //深拷贝，拷贝的是数组中的值
        const arr3 = [...arr] ;
        console.log(arr3);  //输出 [1, 2, 3]

3. 连接数组

        const arr = [1,2,3] ;
        
        const arr4 = [...arr , 5 ,6 ,7] ;
        console.log(arr4);  //输出：[1, 2, 3, 5, 6, 7]

        const arr5 = [...arr , ...arr4] ;
        console.log(arr5); //输出： [1, 2, 3, 1, 2, 3, 5, 6, 7]

二、展开运算符…在函数中的使用

对于不确定传多少个值也可以使用扩展运算符。这样在你传值的时候可以一直增加，不用再关心形参的多少！

        function add(...numbers) {
            return numbers
        }
        console.log(add(1, 2, 3, 4, 5));   //输出：[1, 2, 3, 4, 5]

三、展开运算符…在对象中的使用

注意：展开运算符…不能展开一个对象（console.log(…obj);）会报错。

1. 深拷贝一个对象

        let ajaxData = {name:'小花猫',age: 18};
        let reactPropsAPI = {...ajaxData};
        console.log(reactPropsAPI)  //输出：{name: '小花猫', age: 18}

        reactPropsAPI.sex = '男' ;
        console.log(reactPropsAPI);  //输出：{name: '小花猫', age: 18, sex: '男'}
        console.log(ajaxData);  //输出：{name: '小花猫', age: 18}

3. 合并对象

        const obj = {
            a: 1,
            b: 2,
            c: 3
        };
        const obj2 = {
            ...obj,
            name: 'cc'
        };
        console.log(obj2); //输出：{a: 1, b: 2, c: 3, name: 'cc'}