JavaScript - 展开运算符

一、...在数组中的使用

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}

2.合并对象

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