走进 ES6 & ES7 新特性 - 数组 & 对象展开操作符 (3)

在 JavaScript 的新版本 ES6 和 ES7 中，新增了很多语言特性来方便开发者编写高效且优雅的代码，其中数组和对象展开操作符是其中之一。

数组展开操作符

数组展开操作符可以将一个数组中的元素展开，作为独立的参数传递给函数或数组字面量中。

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

通过使用 ... 操作符，我们可以将 arr1 和 arr2 中的元素展开成独立的参数，然后再放到一个新的数组 arr3 中。

除了在数组字面量中使用数组展开操作符之外，我们还可以在函数调用中使用：

function sum(a, b, c) {
  return a + b + c;
}

const arr = [1, 2, 3];

sum(...arr); // 6

在上面这个例子中，我们将 arr 作为参数传递给 sum 函数，并使用数组展开操作符来将数组中的元素展开成独立的参数。

对象展开操作符

在 ES6 中，我们还可以使用对象展开操作符来简化对象的创建和合并。对象展开操作符可以用在对象字面量中，用来将一个对象展开成新的对象并且可以添加新的属性。

const obj1 = { name: 'John', age: 30 };
const obj2 = { ...obj1, job: 'Engineer' }; // { name: 'John', age: 30, job: 'Engineer' }

通过使用 ... 操作符，我们将 obj1 对象中的所有属性展开，并将其包含在一个新的对象 obj2 中，同时添加了一个新属性 job。

对象展开操作符也可以和 Object.assign 方法一起使用来合并多个对象：

const obj1 = { name: 'John', age: 30 };
const obj2 = { job: 'Engineer' };
const obj3 = { ...obj1, ...obj2 }; // { name: 'John', age: 30, job: 'Engineer' }

通过使用 ... 操作符和 Object.assign 方法，我们可以将多个对象合并成一个新的对象 obj3。

总结

数组展开操作符和对象展开操作符是 ES6 和 ES7 中非常有用的特性，它们能够帮助我们简化代码并提高开发效率。当我们需要合并多个数组或对象时，使用展开操作符可以让我们的代码更加优雅和易于阅读。

走进 ES6 & ES7 新特性系列文章虽然是 TypeScript 之后的文本，但其内容和示例代码仍然适用于 JavaScript 的编程学习和实践。希望本文对大家有所帮助！

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6520d0fe95b1f8cacd84493d