什么是对象和数组展开运算符
在 ES6 中，我们认识到了用于将数组中的值解构到变量中的展开运算符 ...。ES9 引入了对象和数组展开运算符，用于将对象和数组中的属性、值展开成另一个对象或数组。
对象展开运算符
在 ES9 中，我们可以使用 {...obj} 语法将一个对象展开成一个新的对象，其中 obj 是要展开的对象。例如：
const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 };
console.log(obj2); // {a: 1, b: 2, c: 3}这里我们使用对象展开运算符将 obj1 展开为新的对象 obj2，并添加了新的键值对 {c:3}。可以注意到，在对象展开时，如果当前对象和要展开的对象中有同名属性，则会覆盖原来的属性。
另外，对象展开运算符还可以用于解构嵌套的对象，例如：
const obj1 = { a: 1, b: { c: 2 } };
const { b: { c } } = obj1;
const obj2 = { ...obj1, b: { c: 3 } };
console.log(obj2); // {a: 1, b: {c:3}}在这个例子中，我们首先使用对象解构语法，从 obj1 中获取了 b.c 的值。然后使用展开运算符 ... 将 obj1 展开成一个新的对象 obj2 并覆盖 b.c 的值为 3。
数组展开运算符
在 ES9 中，我们也可以使用 [...arr] 语法将一个数组展开为一个新的数组，其中 arr 是要展开的数组。例如：
const arr1 = [1, 2, 3]; const arr2 = [...arr1, 4]; console.log(arr2); // [1, 2, 3, 4]
这里我们使用数组展开运算符将 arr1 展开为新的数组 arr2，并添加了值 4。可以注意到，在数组展开时，每个值都会被追加到新的数组中。数组展开运算符还可以用于解构嵌套的数组，例如：
const arr1 = [1, [2, [3]]]; const [a, [b, [c]]] = arr1; const arr2 = [...arr1, 4]; console.log(arr2); // [1, [2, [3]], 4]
在这个例子中，我们首先使用数组解构语法，从 arr1 中获取了 a、b、c 的值。然后使用展开运算符 ... 将 arr1 展开成一个新的数组 arr2 并追加了值 4。
总结
使用对象和数组展开运算符可以方便地将一个对象或数组中的属性、值展开成另一个对象或数组，同时还可以解构嵌套的对象或数组。这给我们编写更简洁、可维护的代码提供了便利。在实际开发中，我们可以考虑使用对象和数组展开运算符来优化代码的编写。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651f649095b1f8cacd6f4664