在 JavaScript 中，扩展操作符（Spread Operator）是一个非常有用的技术，它可以让我们更方便地操作数组、对象等数据类型。在 ES6 中，它首次被引入，而在 ES10 中，又有了更多的增强和改进。本文将对 ES10 中的扩展操作符进行详解，帮助读者更好地理解和应用该技术。
数组扩展
数组扩展操作符可以很方便地将一个数组扩展成另一个数组，或向一个数组中添加元素。在 ES10 中，数组扩展操作符还支持对象扁平化（Flatten）操作。
数组扁平化
当我们需要将一个多维数组变成一维数组时，可以使用数组扁平化操作符。比如：
const arr = [1, [2, [3, 4]]]; const arr2 = [...arr]; // [1, [2, [3, 4]]] const arrFlat = arr2.flat(Infinity); // [1, 2, 3, 4]
在上面的示例中，我们定义了一个多维数组 arr，将其赋值给 arr2。然后使用 flat() 方法进行扁平化，将 arr2 变成了一维数组 arrFlat。需要注意的是，flat() 方法的参数表示扁平化的深度，Infinity 表示无限递归，可以处理任意多维数组。
ES10 还引入了 flatMap() 方法，该方法可以直接将扁平化和映射（Map）操作结合起来，非常便利：
const arr = [1, 2, 3]; const arrMapped = arr.flatMap(x => [x, x * 2]); // [1, 2, 2, 4, 3, 6]
在上面的示例中，我们对数组 arr 进行了 flatMap 操作，对每个元素进行了映射并扁平化，最终得到了一个新数组 arrMapped，其中每个元素都重复了一遍。
数组合并与解构
使用扩展操作符可以很方便地将两个数组合并起来，或者将一个数组解构成多个变量：
const arr1 = [1, 2, 3]; const arr2 = [4, 5, 6]; const arr3 = [...arr1, ...arr2]; // [1, 2, 3, 4, 5, 6] const [a, b, c, ...rest] = arr3; // a=1, b=2, c=3, rest=[4, 5, 6]
在上面的示例中，我们首先定义了两个数组 arr1 和 arr2，并使用扩展操作符将它们合并为 arr3。然后使用解构语法将 arr3 中的前三个元素分别赋值给变量 a、b、c，其他元素赋值给数组 rest。
可迭代对象转化为数组
在 JavaScript 中，有些对象虽然不是数组类型，但它们能够使用 for...of 循环进行遍历。比如字符串、Set 对象等。使用扩展操作符，我们可以将这些对象转化为数组：
const str = 'hello'; const arr = [...str]; // ['h', 'e', 'l', 'l', 'o'] const set = new Set([1, 2, 3]); const arr2 = [...set]; // [1, 2, 3]
在上面的示例中，我们分别使用扩展操作符将字符串和 Set 对象转化为了数组。
对象扩展
在 ES6 中，扩展操作符已经可以用于对象的浅复制（Shallow Copy）。在 ES10 中，它又有了更多的用途，比如对象合并、拷贝和扁平化等操作。
对象合并
使用扩展操作符，可以很方便地将两个或多个对象合并起来：
const obj1 = {a: 1, b: 2};
const obj2 = {c: 3, d: 4};
const obj3 = {...obj1, ...obj2}; // {a: 1, b: 2, c: 3, d: 4}在上面的示例中，我们首先定义了两个对象 obj1 和 obj2，然后使用扩展操作符将它们合并为 obj3。
对象拷贝
使用扩展操作符可以很方便地进行对象的拷贝操作，而不用手动去复制每个属性：
const obj1 = {a: 1, b: 2};
const obj2 = {...obj1};在上面的示例中，我们使用扩展操作符将 obj1 拷贝到 obj2 中。
需要注意的是，由于扩展操作符进行的是浅复制，所以如果对象中有引用类型的属性，如数组或对象等，那么只会复制它们的引用，而不是将它们复制到新对象中。
对象扁平化
使用扩展操作符可以很方便地将一个多层嵌套的对象扁平化成一个一级对象：
const obj = {a: {b: {c: 1}}};
const obj2 = {...obj}; // {a: {b: {c: 1}}}
const objFlat = {...obj2.a.b}; // {c: 1}在上面的示例中，我们首先定义了一个多层嵌套的对象 obj，然后使用扩展操作符将其赋值给 obj2。最后，我们使用扩展操作符将 obj2.a.b 扁平化。
总结
ES10 中的扩展操作符为我们操作数组、对象等类型的数据提供了更加便利的方式。在本文中，我们详细介绍了它在数组和对象中的各种用途，包括数组扁平化、合并、解构和迭代对象转化为数组等操作，还介绍了对象复制和扁平化等技巧。相信读者已经掌握了 ES10 中扩展操作符的使用方式，可以更好地应用此技术，提升自己的编程效率。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/653dcfe97d4982a6eb77c954