ES6之展开运算符

42 阅读1分钟

ES6之展开运算符

展开运算符和剩余参数的写法很类似,不过它们一个是展开,一个是聚合。所以展开运算符可以前后继续加参数,而剩余参数只能放置在最后,并且不能在后面加参数。

function sum(...args){
    let num=0;
    console.log(args);
    for(let i=0;i<args.length;i++){
        num+=args[i];
    }
    return num;
}
function getRandomNum(length){
    let nums=[];
    for(let i=0;i<length;i++){
        nums.push(Math.random())
    }
    return nums;
}
const nums=getRandomNum(10);
console.log(sum(...nums));

这个例子中使用了展开运算符直接将数组中的nums展开,放到了sum中。

const arr1=[1,2,3];
const arr2=[...arr1];
console.log(arr2,arr2===arr1) //false

const obj1={
    name:'zhangsan',
    age:18,
    provice:{
        name:'beijing',
        city:{
            name:'haidian'
        }
    }
}
const obj2={
    ...obj1,
    provice:{
        ...obj1.provice,
        city:{
            ...obj1.provice.city
        }
    }
}
console.log(obj2,obj2.provice.city===obj1.provice.city) //false

展开运算符还广泛用于克隆数组和对象。当出现了[],{}时,就会创建一个新数组或新对象。而如果对象之中还嵌套一些对象,则可以继续使用展开运算符进行深层的覆盖。这就是深克隆。之前只对最外层克隆的方式叫做浅克隆。

//柯里化函数,固定好参数,后面传参补足之后的参数
function curry(func,...args) {
    return function (...subArgs) {
        const allArgs = [...args,...subArgs];
        if (allArgs.length >= func.length) {
            return func(...allArgs)
        }else{
            return curry(func,...allArgs)
        }
    }
}
function sum(a, b, c, d) {
    return a + b + c + d;
}
const newSum = curry(sum,1,2)
console.log(newSum(3,4))
console.log(sum(1, 2, 3, 4))

展开运算符还有一个应用是柯里化函数。当函数参数传入不足时,可以继续传入参数,直到参数数量满足函数要求的数量。