ECMAScript 2019：如何使用 Rest/Spread 操作符将 object 和 array 进行拆分和合并-JavaScript中文网-JavaScript教程资源分享门户

在 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 操作符，可以让我们从一个对象中提取出一些属性，并将它们打包成一个新的对象。

// javascriptcn.com 代码示例
const person = {
  name: 'Alice',
  age: 26,
  profession: 'Developer',
  languages: ['JavaScript', 'Python', 'Java']
};

const { name, profession, ...rest } = person;

console.log(name); // Alice
console.log(profession); // Developer
console.log(rest); // { age: 26, languages: ['JavaScript', 'Python', 'Java'] }

在上面的例子中，使用 Rest 操作符 ...rest 捕获了 person 对象中除了 name 和 profession 之外的所有属性。

2. Spread 操作符

Spread 操作符与 Rest 操作符有相似的语法，但是它们的功能是相反的。Spread 操作符可以将一个数组或者对象展开成一组新的值，常常用于组合数组和对象。

2.1 基本语法

在使用 Spread 操作符时，只需要在数组或者对象之前使用 ... 即可。

// javascriptcn.com 代码示例
const a = [1, 2, 3];
const b = [4, 5, 6];
const c = [...a, ...b];

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

const person = {
  name: 'Alice',
  age: 26
};

const profile = {
  ...person,
  profession: 'Developer'
};

console.log(profile); // { name: 'Alice', age: 26, profession: 'Developer' }

在上面的例子中，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 操作符可以与解构赋值一起使用，用于一次性提取出多个属性。

// javascriptcn.com 代码示例
const person = {
  name: 'Alice',
  age: 26,
  profession: 'Developer',
  languages: ['JavaScript', 'Python', 'Java']
};

const { name, ...details } = person;

console.log(name); // Alice
console.log(details); // { age: 26, profession: 'Developer', languages: ['JavaScript', 'Python', 'Java'] }

在上面的例子中，使用解构赋值语法提取出了 name 属性，并使用 Spread 操作符 ...details 提取出 person 对象除 name 属性之外的所有属性。

3. 总结

使用 Rest/Spread 操作符，可以让我们更加方便地操作数组和对象。Rest 操作符能够将数组或者对象解构成一个组合的部分，Spread 操作符则能够将数组或者对象展开成一组新的值。它们都具有相似的语法，但功能却是相反的。在 JavaScript 的开发过程中，我们需要不断研究和掌握更多的语法和技巧，来提高我们的编程能力和效率。

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