【JavaScript】函数中的扩展与收集

小牛一刀

let values = [1,2,3,4];

function getSum( ){
    let sum = 0;
    for(let i = 0;i < arguments.length ; ++i){
        sum += arguments[i];
    }
    return sum;
}

1 ，arguments是一个类数组
2，扩展参数：不是传一个数组而是数组中的每一个元素
3，使用扩展运算符（arguments进行迭代）相当于apply( )方法，把函数里面的数组进行拆分

console.log(getSum.apply(null,values));//10
console.log(getSum(...values));//10

使用扩展运算符传参的时候，不影响前面以及后面的使用

console.log(getSum(-1,...values));//9
console.log(getSum(...values,5));//15
console.log(getSum(-1,...values,5));//14
console.log(getSum(...values, ...[5,6,7]));//28

arguments的使用 不影响扩展运算符，扩展运算符只是进行调用

let values = [1 , 2 , 3 , 4]

function countArguments( ){
    console.log(arguments.length);
}
countArguments(-1,...values);//5
countArguments(...values,5);//5
countArguments(-1,...values,5);//6
countArguments(...values,...[5,6,7]);//7

扩展操作符用于命名参数，同时也默认参数

function getProduct(a,b,c = 1){
    return a * b * c;
}
let getSum = (a , b , c=0) =>{
    return a + b + c;
}
console.log(getProduct(...[1,2]));//2
console.log(getProduct(...[1,2,3]));//6
console.log(getProduct(...[1,2,3,4]));//6

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

收集参数 使用扩展运算发把不同长度独立的参数组合为一个数组

function getSum(...values){
    
    return values.reduce(( x , y ) => x + y , 0);
}
console.log(getSum(1,2,3));//6

收集参数前面还有命名参数，则会收集其余的参数，如果没有则会得到空数组

function ignoreFirst(firstvalue,...values){ //此处写成function ignoreFirst(...values,firstvalue)写法错误
    console.log(values);
}
ignoreFirst( );// [ ]
ignoreFirst(1);// [ ]
ignoreFirst(1,2);// [ 2 ]
ignoreFirst(1,2,3);// [ 2 , 3 ]

收集参数并不影响arguments对象，反映传给函数的参数

function getSum(...values){
    console.log(arguments.length);//3
    console.log(argumnets);//[1,2,3]
    console.log(values);//[1,2,3]
}
console.log(getSum(1,2,3));

总结

花谢花飞花满天，红消香断有谁怜。