重温ES6的扩展运算符和剩余参数

前话

• 扩展运算符和剩余参数的写法相同，都是在变量或字面量之前加三个点（…）
• 并且只能用于包含Symbol.iterator属性的可迭代对象(iterable)

扩展运算符和剩余参数的概括

• 扩展运算符：
  • 能把整体展开成个体，常用于函数调用，数组或字符串处理等。
• 剩余参数：
  • 把个体合并成整体常用于函数声明，解构参数等
• 上述的整体指的可能是数组，字符串或类数组对象等
• 上述的个体指的可能是字符，数组的元素或函数的参数等

扩展运算符详解

扩展运算符能替代函数的apply()方法

let arr = [0, 1, 2],
    min

min = Math.min(0, 1, 2)
min = Math.min.apply(undefined, arr)
console.log(min)

• 上述的代码中，用Math对象的min()方法获取数组中的最小值，min()方法本来只能接受一组参数
• 利用apply方法后，就能直接传入一个数组
• 使用apply()方法，每次都必须设置this的指向，并且可能写法理解起来不明了。
• 使用扩展运算符就可以简洁地实现相同的功能，代码如下：

let arr = [0, 1, 2],
    min

min = Math.min(...arr)
console.log(min)

简化函数调用时传递实参的方式

let arr = [2022, 7, 7]
let date = new Date(arr[0], arr[1], arr[2])
console.log(date)

• 上述的代码中，实参的值是被保存在数组中，那么要传递的时候就需要一个个的读取

• 如下代码，使用了扩展运算符：

let arr = [2022, 7, 7]
let date = new Date(...arr)
console.log(date)

多个扩展运算符和普通实参混合使用

let arr = [2022, 7, 7]
let time = [10, 28]
let date = new Date(...arr, ...time, 24)
console.log(date)

扩展运算符简化数组的复制和合并

• 在扩展运算符出现之气，要执行数组的复制和合并操作等，需要调用数组的slice(),concat(),unshift()等方法

let arr1 = [1, 2, 3],
    arr2, arr3

arr2 = arr1.slice()
arr3 = arr1.concat(arr2)
console.log(arr1)  // [ 1, 2, 3 ]
console.log(arr2)  // [ 1, 2, 3 ]
console.log(arr3)  // [ 1, 2, 3, 1, 2, 3 ]

• 使用了扩展运算符后：

let arr1 = [1, 2, 3],
    arr2, arr3

arr2 = [...arr1]
arr3 = [...arr1, ...arr2]
console.log(arr1) // [ 1, 2, 3 ]
console.log(arr2) // [ 1, 2, 3 ]
console.log(arr3) // [ 1, 2, 3, 1, 2, 3 ]

扩展运算符处理字符串

• 在JS中，字符串类似于数组，但是字符串不能直接调用数组的方法，需要执行自己的split()方法转为数组
• 而使用扩展运算符，可以省去这步操作

let str = 'tom'
let arr1 = str.split('')
console.log(arr1) // [ 't', 'o', 'm' ]

let arr2 = [...str]
console.log(arr2)  // [ 't', 'o', 'm' ]

剩余参数详解

剩余参数不会影响函数的length属性

• 当实参个数大于形参个数时，ES6新增的剩余参数就会把没有对应形参的实参收集到一个数组中

function func(name, ...args) {
    console.log(name) // 输出：'tom'
    console.log(args[0]) // 输出：29
}
func('tom', 29)

// 输出：1, 因为剩余参数不会影响函数的length属性，该属性的值表示形参个数，...args并不是一个形参
console.log(func.length)  

• 上述的代码中，29 这个实参就会被收集到数组 args（就是剩余参数） 中

剩余参数可以被解构

• 剩余参数可以被解构,这就意味着剩余参数中的元素可以被赋给函数体中的同名变量

function func(name, ...[age, address]) {
    console.log(name) // 输出：'tom'
    console.log(age) // 输出：29 
    console.log(address) // 输出： 'shenzheFn'
    console.log(arguments)  // { '0': 'tom', '1': 29, '2': 'shenzhen' }
}
func('tom', 29, 'shenzhen')

• 引入剩余参数就是为了替代函数内部的 arguments，arguments对象不具备有数组的方法，而剩余参数本身就是一个数组

剩余参数在函数中声明时必须放在最后

• 下面是错误的写法：

function demo(...args, name) {
    // 抛出语法错误
}

剩余参数不能在对象字面量的setter方法中声明

• setter方法只会接收一个参数，而剩余参数不会限制参数的数量

var obj = {
    // 报错："set" 访问器不能具有 rest 参数。
    set age(...args) {
        this._age = age
    }
}