在 JavaScript 的开发过程中，我们经常需要操作数组和对象。ECMAScript 2019 引入了 Rest/Spread 操作符，它们使得操作数组和对象更加容易和直观。本文介绍了 Rest/Spread 操作符的基本语法和用法。
1. Rest 操作符
Rest 表示把一个数组或者对象拆分成一个组合的部分，常常用于函数的参数列表和解构赋值的左手边。
1.1 在函数参数列表中使用 Rest 操作符
Rest 操作符可以让函数的参数列表变得更加灵活。使用 Rest 操作符，可以让我们在函数定义时不必提前声明函数参数的个数，而是可以把它们放在一个数组里。
function sum(...numbers) {
return numbers.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
}
sum(1, 2, 3, 4); // 10在上面的例子中，sum 函数可以接受任意个数的参数，并把它们的值相加。通过将 ...numbers 放在参数列表中，我们告诉 JavaScript 把所有函数调用中传入的参数打包成一个 numbers 数组。
1.2 在解构赋值中使用 Rest 操作符
Rest 操作符还可以用在解构赋值中。使用 Rest 操作符，可以让解构赋值更加灵活场景。
const scores = [90, 80, 70, 60, 50]; const [first, second, ...rest] = scores; console.log(first); // 90 console.log(second); // 80 console.log(rest); // [70, 60, 50]
在上面的例子中，使用 Rest 操作符 ...rest 捕获了 scores 数组中除了前两个元素之外的所有元素。
1.3 在对象中使用 Rest 操作符
Rest 操作符同样适用于对象。使用 Rest 操作符，可以让我们从一个对象中提取出一些属性，并将它们打包成一个新的对象。
-- -------------------- ---- ------- ----- ------ - - ----- -------- ---- --- ----------- ------------ ---------- -------------- --------- ------- -- ----- - ----- ----------- ------- - - ------- ------------------ -- ----- ------------------------ -- --------- ------------------ -- - ---- --- ---------- -------------- --------- ------- -
在上面的例子中，使用 Rest 操作符 ...rest 捕获了 person 对象中除了 name 和 profession 之外的所有属性。
2. Spread 操作符
Spread 操作符与 Rest 操作符有相似的语法，但是它们的功能是相反的。Spread 操作符可以将一个数组或者对象展开成一组新的值，常常用于组合数组和对象。
2.1 基本语法
在使用 Spread 操作符时，只需要在数组或者对象之前使用 ... 即可。
-- -------------------- ---- ------- ----- - - --- -- --- ----- - - --- -- --- ----- - - ------ ------ --------------- -- --- -- -- -- -- -- ----- ------ - - ----- -------- ---- -- -- ----- ------- - - ---------- ----------- ----------- -- --------------------- -- - ----- -------- ---- --- ----------- ----------- -
在上面的例子中，Spread 操作符 ...a 将 a 数组展开成一个序列，...b 将 b 数组展开成一个序列，[...a, ...b] 用于将两个序列合并成一个新的数组。与此类似，...person 将 person 对象的属性展开成为新的对象 profile。
2.2 相同属性的合并
使用 Spread 操作符合并对象时，会覆盖重复属性的值。
const a = { x: 1, y: 2 };
const b = { y: 3, z: 4 };
const c = { ...a, ...b };
console.log(c); // { x: 1, y: 3, z: 4 }在上面的例子中，y 属性的值在 a 对象和 b 对象中分别为 2 和 3，但最终的合并结果中，y 属性的值为 3，因为后面的值会覆盖前面的值。
2.3 与解构赋值一起使用
Spread 操作符可以与解构赋值一起使用，用于一次性提取出多个属性。
-- -------------------- ---- ------- ----- ------ - - ----- -------- ---- --- ----------- ------------ ---------- -------------- --------- ------- -- ----- - ----- ---------- - - ------- ------------------ -- ----- --------------------- -- - ---- --- ----------- ------------ ---------- -------------- --------- ------- -
在上面的例子中，使用解构赋值语法提取出了 name 属性，并使用 Spread 操作符 ...details 提取出 person 对象除 name 属性之外的所有属性。
3. 总结
使用 Rest/Spread 操作符，可以让我们更加方便地操作数组和对象。Rest 操作符能够将数组或者对象解构成一个组合的部分，Spread 操作符则能够将数组或者对象展开成一组新的值。它们都具有相似的语法，但功能却是相反的。在 JavaScript 的开发过程中，我们需要不断研究和掌握更多的语法和技巧，来提高我们的编程能力和效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651e084495b1f8cacd5b76f7