ES9：rest/spread 属性。-JavaScript中文网-JavaScript教程资源分享门户

ECMAScript 2018 (ES9) 引入了新的 rest/spread 属性，这两个属性实现了更加方便和功能强大的数组和对象操作。本文将深入解析这两个属性，并提供示例代码和使用指导。

Rest 属性

Rest 属性可以将参数打包成一个数组，然后传递给函数。

在 ES6 中，我们可以这样写：

function foo(a, b, ...rest) {
    // rest 属性就是一个数组，包含了所有其他参数
}

这里的 rest 就是 Rest 属性，它被放置在函数参数的最后一个位置，它前面的参数都会被正常赋值，而剩下的参数会被打包成一个数组，赋值给 rest。

在 ES9 中，Rest 属性同样支持在对象和数组中使用。

对象中使用 Rest 属性

在对象中使用 Rest 属性，可以将对象中的一部分属性打包成一个新的对象。

示例代码：

let obj = { a: 1, b: 2, c: 3, d: 4 };
let { a, b, ...rest } = obj;

console.log(a); // 1
console.log(b); // 2
console.log(rest); // { c: 3, d: 4 }

在上面的代码中，我们使用了对象解构的方法，将 obj 中的 a 和 b 属性分别解构出来并赋值给 a 和 b 变量，然后使用 Rest 属性将剩余的属性打包成一个新的对象 rest。我们可以看到，rest 对象中包含了 c 和 d 两个属性。

数组中使用 Rest 属性

与对象类似，数组中也可以使用 Rest 属性。

示例代码：

let arr = [ 1, 2, 3, 4, 5 ];
let [ a, b, ...rest ] = arr;

console.log(a); // 1
console.log(b); // 2
console.log(rest); // [ 3, 4, 5 ]

在上面的代码中，我们使用了数组解构的方法，将数组中的前两个元素分别解构出来并赋值给 a 和 b 变量，然后使用 Rest 属性将剩余的元素打包成一个新的数组 rest。我们可以看到，rest 数组中包含了后面的三个元素。

Spread 属性

Spread 属性可以将数组或对象展开成一个新的数组或对象，非常方便快捷。

数组中使用 Spread 属性

在数组中使用 Spread 属性，可以将一个数组展开成另一个数组。

示例代码：

let arr1 = [ 1, 2, 3 ];
let arr2 = [ 4, 5, 6 ];
let arr3 = [ ...arr1, ...arr2 ];

console.log(arr3); // [ 1, 2, 3, 4, 5, 6 ]

在上面的代码中，我们创建了两个数组 arr1 和 arr2，然后使用 Spread 属性将它们展开成一个新的数组 arr3。arr3 中包含了 arr1 和 arr2 中所有的元素。

对象中使用 Spread 属性

在对象中使用 Spread 属性，可以将一个对象展开成另一个对象。

示例代码：

let person = { name: 'Alice', age: 18 };
let info = { ...person, address: 'Beijing' };

console.log(info); // { name: 'Alice', age: 18, address: 'Beijing' }

在上面的代码中，我们创建了一个 person 对象，包含了 name 和 age 两个属性，在使用 Spread 属性时，我们在对象中添加了一个 address 属性，并将 person 对象展开成一个新的对象 info。info 包含了 person 的所有属性，以及一个新的 address 属性。

总结

Rest 和 Spread 属性是 ECMAScript 2018 中引入的重要特性，它们可以让我们更加方便和快捷地操作数组和对象。使用 Rest 属性可以将参数、对象和数组中的一部分属性打包成一个新的数组或对象，而使用 Spread 属性则可以将数组或对象展开成一个新的数组或对象。在实际工作中，我们可以灵活地使用这两个属性，提高我们的开发效率。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/654f4ec77d4982a6eb843929