ES6语法：rest&spread基本使用

1、spread(展开)

当在函数调用中使用 ...arr 时，它会把可迭代对象 arr “展开”到参数列表中。

// 展开运算符
...[1,2,3,4,5,6] => 1,2,3,4,5,6

// 最大值
// es5
const values = [10, 20, 3, 9 ]
const max = Math.max.apply(Math, values)
// es6
const values = [10, 20, 3, 9 ]
const max = Math.max(...values)

// 复制
const arr1 = [1,2,3]
const arr2 = arr1  // 改变arr1会改变arr2
// es5
const arr2 = arr1.concat()
// es6
const arr2 = [...arr1]

// 合并数组
// es5
const arr = [1, 2].concat(more)
// es6
const arr = [1, 2, ...more]
const arr1 = ['a', 'b']
const arr2 = ['c']
const arr3 = ['d', 'e']
// es5
arr1.concat(arr2).concat(arr3)
// es6
[...arr1, ...arr2, ...arr3]

// 对象的扩展
// 通过扩展运算符合并对象
const obj1 = {a: 1, b: 2}
const obj2 = {c: 3, d: 5}
const obj = {...obj1, ...obj2}
// 等同于
const obj = Object.assign({}, obj1, obj2)
// 修改对象属性
const person = {
    name: 'bob',
    age: 23,
    sex: 'male'
}
const newPerson = {...person, name: 'lily'}
// {name: 'lily', age: 23, sex: 'male'}

// 将字符串转换为字符数组
let str = "Hello";
alert( [...str] ); // H,e,l,l,o

2、rest不定参数

在 JavaScript 中，无论函数是如何定义的，你都可以使用任意数量的参数调用函数。

// arguments
function pick(object) {
    const result = {}
    for (let i = 1, len = arguments.length; i++) {
        result[arguments[i]] = object[arguments[i]]
    }
    return result
}
const john = {
    name: 'bob',
    age: 23,
    sex: 'male'
}
pick(john, 'name', 'age')

// rest
function pick(object, ...keys) {
    const result = {}
    for (let i = 1, len = keys.length; i++) {
        result[keys[i]] = object[keys[i]]
    }
    return result
}
const john = {
    name: 'bob',
    age: 23,
    sex: 'male'
}
pick(john, 'name', 'age')

不定参数的设计初衷是为了替代arguments对象
不定参数一定要放在所有参数的末尾

// arguments的写法
const sortNumbers = function() {
    return Array.prototype.slice.call(arguments).sort()
}
// 不定参数的写法
const sortNumbers = (...numbers) => numbers.sort()

arguments 变量

在过去，JavaScript 中没有 rest 参数，而使用 arguments 是获取函数所有参数的唯一方法。现在它仍然有效，我们可以在一些老代码里找到它。

但缺点是，尽管 arguments 是一个类数组，也是可迭代对象，但它终究不是数组。它不支持数组方法，因此我们不能调用 arguments.map(...) 等方法。

此外，它始终包含所有参数，我们不能像使用 rest 参数那样只截取入参的一部分。

因此，当我们需要这些功能时，最好使用 rest 参数。

ES6语法：rest&spread基本使用

猜你喜欢