剩余运算符和展开运算符

剩余运算符:rest运算符

        // 1.一定在最后
        // 2.剩余运算符是数组，arguments是一个伪数组
        function add(...rest) {
            console.log(arguments); //[1,2,3]伪数组
            console.log(rest); //[1,2,3]数组

            let sum = 0;
            rest.forEach(function(i) {
                sum += i;
            })
            console.log(sum);
        }
        add(1, 2, 3)

案例解析

 function family(company, ...rest) {
            console.log(arguments); //['百度', '广告', '链接', '网站']
            console.log(rest); //['广告', '链接', '网站']
            console.log(`${company}:${rest.join(',')}`); //百度:广告,链接,网站
        }
        family('百度', '广告', '链接', '网站')

...rest是剩余运算符有传入参数的话传入参数不会进入...rest中

展开运算符

逆运算 参数可以传入数组 

{
    function add(a, b, c) {
        console.log(a + b + c);
    }
    add(1, 2, 3)

    add(...[3, 4, 5]) //等于add(3,4,5)
}

拷贝对象 

{
    let obj1 = {
            name: "张三",
            age: 20,
            sex: "女",
            d: new Date()
        }
        //可以使用...obj1代替一串代码
    let obj2 = {
        /* name:obj1.name,
            age:obj1.age,
            sex:obj1.sex, */
        ...obj1,
        friend: "李四"
    };
    //可以改变其中的一个
    let obj3 = {
        ...obj1,
        name: "王五"
    }
    console.log(obj3); //{age:20,d:时间对象,name:'王五',sex:"女"}
    //obj4 是obj1拷贝出来的对象，obj4和obj1是独立
    // ...拷贝对象的时候，value是对象也可以拷贝
    let obj4 = {
        ...obj1
    }
    obj4.name = "小王"
    console.log(obj1);//{name:"张三"}
    console.log(obj4);//{name:"小王"}
}

合并数组

{
    // 合并数组给数组添加内容   
    let arr1 = [1, 2, 3]
    let arr2 = [3, 4, 5]
    let arr3 = [...arr1, ...arr2, 7, 8, 9]
    console.log(arr3); //[1,2,3,3,4,5,7,8,9]

    //push 
    let arr4 = ['a', 'b', 'c']
    arr4 = ['d', ...arr4]
    console.log(arr4); //["d","a","b", "c"]
}

 伪数组转化为数组

//伪数组转化为数组 
let btns = document.querySelectorAll("button")
let arrBtns = [...btns]

综合案例

{
    let workers = [{
        name: "小王",
        paid: 3000
    }, {
        name: "小李",
        paid: 4000
    }, {
        name: "小明",
        paid: 3500
    }, ]

    //map有返回值
    let arr = workers.map(function(item) {
        return {
            ...item,
            paid: item.paid + 2000
        }
    })
    console.log(arr);

}