函数-10.6参数扩展与收集

扩展参数

扩展运算符值ES6新增的。有时候不需要给函数传一个数组而是传递数组中的元素

要把数组中的元素作为参数进行累计

let arrValues = [1, 2, 3, 4]
function getNum () {
   let sum = 0
   for (let i=0; i<arguments.length; i++) {
      sum = arguments[i] + sum
   }
   return sum
}

// 使用扩展运算符将数组拆分并作为参数传入
console.log(getNum(...arrValues)) // 10

// 不使用扩展运算符想把数组拆分在作为参数传递
console.log(getNum.apply(null, arrValues)) // 10

补: apply函数的使用

1. 函数调用apply函数会立即执行
2. 使用方式: function_name.apply(this, 参数) 第一个参数的用法与bind函数（10.2讲了）一样, 第二个参数是要传给函数的参
3. 会把要传递给函数的参数解构

function test () {
    console.log(arguments.length) 
}

// 此时的arguments长度是3，不难看出已经将数组解构了
test.apply(null, [1,2,3]) // 3
// 普通调用没有接解构
test([1,2,3]) // 1

NOTE: 扩展操作符可以用于普通函数和箭头函数的命名参数也可以用于默认参数

function sum1 (a, b, c=1) {
    console.log(a, b, c)
}

const getSum = (a, b, c=1) => {
    console.log(a, b, c)
}

// 解构之后的前两个数组元素用作命名参数
sum1(...[1,2]) // 1, 2, 1
sum1(...[1,2,3]) // 1, 2, 3
getSum(...[1,2]) // 1, 2, 1
getSum(...[1,2,3]) // 1, 2, 3

收集参数

使用扩展运算符可以将函数的参数合并成数组，这有点类似arguments的机制

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

function getSum2(value1, ...values){
     console.log(values)
}
getSum2() // []
getSum2(1) // []
getSum2(1,2) // [2]
getSum2(1,2,3) // [2,3]

补: 箭头函数使用扩展运算符收集参数可以实现用arguments的操作

NOTE: 参数收集不影响arguments的值，它依然是函数调用时传入的参数