剩余参数与展开运算符

“这是我参与8月更文挑战的第6天，活动详情查看：8月更文挑战”

剩余参数

1.认识剩余参数

     const add=(x,y,z,...args)=>{};

2.剩余参数的本质

    const add = (x,y,...args)=>{
        console.log(x,y,args);
    }
    add();//undefined undefined []
    add(1,2,3,4,5,6,7);//1 2 (5) [3, 4, 5, 6, 7]
    //剩余参数永远是一个数组，即使没有值，也是空数组
    
    

1.箭头函数的剩余参数

    箭头函数的参数部分即使只有一个剩余参数，也不能省略圆括号
    const add=(...args)=>{};

2.使用剩余参数代替arguments获取实际参数

    const add = function(){
        console.log(arguments);
    };
    add(1,2);
    箭头函数没有arguments
    const add = (...args)=>{
        console.log(args);//(2) [1, 2]
    };
    add(1,2);

3.剩余参数的位置

    剩余参数只能是最后一个参数，之后不能再有其他参数，否则会报错
    const add=(x,y,...args)=>{
        console.log(args);
    }
    add(1,2,3,4);
    

案例演示

         const averages=(...args)=>{
            let sum=0;
            for(let i=0;i<args.length;i++){
                sum+=args[i];
            }
            console.log(sum/args.length); 
        }
        averages(1,2,3,4,5,6,7,8,9);

        剩余参数与解构赋值结合使用
        剩余参数不一定非要作为函数参数使用
        const [num,...args]=[1,2,3,4,5];
        必须是最后一个参数
        const [...args,num]=[1,2,3];//报错
        console.log(num,args);

        const func = ([num,...args])=>{}
        func([1,2,3]);

        const {x,y,...z}={a:3,x:1,y:3,b:4};
        console.log(x,y,z);//1 3 {a: 3, b: 4}
        const func = ({x,y,...z})=>{}
        func({a:3,x:1,y:3,b:4});

数组的展开运算符

1.认识展开运算符

    [3,1,2];
    求最小值有Math.min()方法

    console.log(Math.min([3,1,2]));//NaN 
    因为Math.min()方法不能直接出来数组，只能处理一个一个参数
    console.log(Math.min(3,1,2));// 1

    [3,1,2]=>3,1,2

2.数组展开运算符的基础用法

    console.log(Math.min(...[3,1,2]));//1
    相当于
    console.log(Math.min(3,1,2));
    

1.复制数组

    const a=[1,2];
    // const b=a;
    // a[0]=3;//藕断丝连了
    // console.log(b);

    const c = [...a];
    // 相当于 c=[1,2];
    a[0]=3;
    console.log(a);// [3, 2]
    console.log(c);// [1, 2]

2.合并数组

    const a=[1,2];
    const b=[3];
    const c=[4,5];

    console.log([...c,...b,...a]);//[4, 5, 3, 1, 2]
    console.log([...c,5,...b,3,...a]);//[4, 5, 5, 3, 3, 1, 2]

3.字符串转为数组

    字符串可以按照数组的形式展开
    console.log(...'alex');//a l e x
    console.log([...'alex']);//["a", "l", "e", "x"]
    console.log('alex'.split(''));//["a", "l", "e", "x"]
    arr=[...'alex'];
    arr.reverse();//x e l a
    console.log(...arr);
    

4.常见的类数组转化为数组

    arguments
    
    function func(){
        console.log(arguments.push);//undefined类数组没有数组相关方法
        console.log([...arguments]);//[1,2]
    }
    func(1,2);

    NodeList
    
    console.log(document.querySelectorAll('p'));//NodeList(3)[p, p, p]
    console.log([...document.querySelectorAll('p')]);//[p, p, p]
    
    
    

对象的展开运算符

1展开对象

    对象不能直接展开，必须在{}中展开
    const apple = {
        color:'红色',
        shape:'球形',
        taste:'甜的'
    };
    console.log(...apple);//报错
    console.log([...apple]);//报错

    对象的展开：把属性张罗出来，用逗号分隔，放到一个{}中，构成新对象
    console.log({...apple});//{color: "红色", shape: "球形", taste: "甜的"}
    console.log({...apple}===apple);//false

2.合并对象

    const apple = {
        color:'红色',
        shape:'球形',
        taste:'甜的'
    };
    const pen = {
        color:'黑色',
        shape:'圆柱形',
        use:'写'
    };
    console.log({...pen});//{color: "黑色", shape: "圆柱形", use: "写"}
    
    在合并对象时，后面的属性会将前面相同的属性进行覆盖
    console.log({...apple,...pen});//{color: "黑色", shape: "圆柱形", taste: "甜的", use: "写"}
    console.log({...pen,...apple});//{color: "红色", shape: "球形", use: "写", taste: "甜的"}
    console.log({pen,apple});//{pen: {…}, apple: {…}}
    console.log({...pen,apple});//{color: "黑色", shape: "圆柱形", use: "写", apple: {…}}
    

注意事项

1.空对象的展开

    如果展开一个空对象，则没有任何效果
    console.log({...{}});
    console.log({...{},a:1});//{a:1}

2.非对象的展开

    如果展开的不是对象，则会自动将其转为对象，再将其属性罗列出来
    console.log({...1});//{}
    console.log({...undefined});//{}
    console.log({...null});//{}
    console.log({...true});//{}

    如果展开运算符后面是字符串，他会自动转成一个类似数组的对象，因此返回的不是空对象
    console.log({...'alex'});//{0: "a", 1: "l", 2: "e", 3: "x"}
    console.log([...'alex']);//["a", "l", "e", "x"]
    console.log(...'alex');//a l e x
    console.log({...[1,2,3]});//{0: 1, 1: 2, 2: 3}

3.对象中对象属性的展开

    不会展开对象中的对象属性
    const apple ={
        feature:{
            taste:'甜'
        }
    }
    const pen ={
        feature:{
            color:'黑色',
            shape:'圆柱形',

        },
        use:'写'
    }
    console.log({...apple});
    console.log({...apple,...pen});
       feature:
        color: "黑色"
        shape: "圆柱形"
        [[Prototype]]: Object
        use: "写"
     后面的pen中feature属性直接覆盖前面apple中features属性
     
     

区分剩余参数和展开运算符

1.根本区别

    展开运算符
    [3,1,2]->3,1,2

    剩余参数
    3,1,2=[3,1,2]

2.区分剩余参数和展开运算符

    const add =(...args)=>{
        console.log(args);//[1,2,3]
        // 展开运算符
        console.log(...args);//1 2 3 
        console.log(...[1,2,3]);//1 2 3 
    }
    add(1,2,3);

    console.log([...[1,2,3],4]);// [1, 2, 3, 4]