在前端开发中，经常遇到需要将一个数组或对象解构成单个参数的情况。ES6 中引入了解构，但对于函数的参数，如果想要实现这种解构的效果，就需要使用扩展运算符 ...。
ES10 中，... 运算符可用于函数参数和数组、对象的操作，它可以让每个开发者都爱不释手。下面我们来详细探讨一下这个新特性。
扩展运算符的基本使用
扩展运算符 ... 是将一个数组或对象 “展开” 成多个独立的值。在函数参数中使用 ... 可以将一个数组解构为单个值，例如：
function foo(x, y, z) {
console.log(x, y, z);
}
const arr = [1, 2, 3];
foo(...arr); // 1 2 3此时，... 将 arr 中的元素依次传递给了函数 foo 的参数。
在数组或对象操作中，... 可以将数组或对象 “展开”，例如：
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5, 6];
console.log(arr2); // [1, 2, 3, 4, 5, 6]
const obj1 = { name: 'Alice', age: 20 };
const obj2 = { ...obj1, gender: 'female' };
console.log(obj2); // { name: 'Alice', age: 20, gender: 'female' }这种写法可以避免使用 push 或 concat 方法来添加元素，或者使用 Object.assign 来合并对象，让代码更加简洁易读。
扩展运算符的妙用
除了基本的用法外，扩展运算符还有一些妙用，下面我们来逐一讲解。
对象的解构赋值
在 ES6 中，我们可以使用解构赋值来提取对象中的属性值。而在 ES10 中，我们还可以使用扩展运算符来提取剩余的属性成为一个新的对象。例如：
const obj1 = { name: 'Alice', age: 20, gender: 'female' };
const { name, ...rest } = obj1;
console.log(name, rest); // Alice { age: 20, gender: 'female' }此时，...rest 在解构时可以将 obj1 中的 age 和 gender 属性提取出来，成为一个新的对象。
数组的合并
在 ES6 中，我们可以使用 concat 方法来合并两个数组。而在 ES10 中，我们可以使用扩展运算符来实现更加简洁的合并操作。例如：
const arr1 = [1, 2, 3]; const arr2 = [4, 5, 6]; const arr3 = [...arr1, ...arr2]; console.log(arr3); // [1, 2, 3, 4, 5, 6]
此时，... 可以将 arr1 和 arr2 的元素依次 “展开”，成为一个新的数组 arr3。
函数参数的默认值
在 ES6 中，我们可以给函数参数设置默认值。而在 ES10 中，我们可以使用扩展运算符来为函数的默认参数设置一个 “兜底值”，确保函数调用时不会出错。例如：
function foo(x, y = 0, ...rest) {
console.log(x, y, rest);
}
foo(1); // 1 0 []
foo(1, 2); // 1 2 []
foo(1, 2, 3, 4); // 1 2 [3, 4]此时，...rest 可以将函数 foo 的剩余参数打包成一个数组。
扩展运算符的注意事项
虽然扩展运算符非常方便，但在使用时需要注意一些细节。
不可在函数调用中使用多次
在函数调用中，... 只能使用一次。例如：
function foo(x, y, z) {
console.log(x, y, z);
}
const arr = [1, 2, 3];
// 错误写法
foo(...arr, ...arr); // SyntaxError: Unexpected token '...'不能对原始类型使用
对于非数组和非对象类型，扩展运算符会报错。例如：
// 错误写法 const str = 'hello'; console.log(...str); // TypeError: Found non-callable @@iterator
只能用于可迭代对象
... 只能用于可迭代对象，例如数组和字符串。对于非可迭代对象，需要使用其他方法进行转换。
总结
ES10 的扩展运算符 ... 可以让每个开发者都爱不释手，它可以让代码更加简洁易读，提高开发效率。在使用时需要注意一些细节，例如只能使用一次、不能对原始类型使用、只能用于可迭代对象等。我们应该灵活运用这个新特性，让我们的代码更加优雅。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f58a99f6b2d6eab3e4a01f