扩展运算符是 ECMAScript 2017 标准中引入的一个重要特性。它可以将一个数组或类数组对象展开成一个更长的数组，或者将一个对象展开成一个更大的对象。在前端开发中，我们经常使用这个特性来简化代码和提高效率。
扩展运算符的基本用法
使用扩展运算符的基本语法是三个点(...)加上需要展开的数组或对象：
-- -------------------- ---- ------- ----- ------ - --- -- --- ----- ------ - --- -- --- ----- ----------- - ----------- ----------- ------------------------- -- --- -- -- -- -- -- ----- ------- - - ----- -------- ---- -- -- ----- ------- - - -------- ---- ---- ---- ------ ---------- -- ----- ------------ - - ----------- ---------- -- -------------------------- -- - ----- -------- ---- --- -------- ---- ---- ---- ------ ---------- -展开代码
在上面的示例中，...array1将数组 [1, 2, 3] 展开成了三个独立的参数，然后用数组展开操作符 ...array2 继续扩展成了一个更长的数组 [1, 2, 3, 4, 5, 6]。同样，...object1也将对象 { name: 'Alice', age: 25 } 展开成了两个独立的属性，然后用对象展开操作符 ...object2 继续扩展成了一个更大的对象 { name: 'Alice', age: 25, address: '123 Main St', phone: '555-5555'}。
扩展运算符的高级用法
扩展运算符除了可以简单地展开一个数组或对象，还有很多高级用法。下面将对其中几个常见的场景进行介绍。
合并对象时的注意事项
如果使用扩展运算符合并两个对象时，两个对象中存在相同属性名的情况下，后面的对象中的属性值会覆盖前面对象中的同名属性值。例如：
const person1 = { name: 'Alice', age: 25, phone: '555-5555' }; const person2 = { name: 'Bob', age: 30 }; const mergedPerson = { ...person1, ...person2 }; console.log(mergedPerson); // { name: 'Bob', age: 30, phone: '555-5555' }
上面的示例中，mergedPerson 对象中的 name 和 age 属性来自于 person2，而 phone 属性来自于 person1。
扩展运算符和剩余操作符的结合使用
扩展运算符和剩余操作符经常在一起配合使用。剩余操作符用于将数组或对象的一部分提取出来，然后使用扩展运算符将其展开到另一个数组或对象中。例如：
-- -------------------- ---- ------- ----- ------- ------- -------- - --- -- -- -- --- ------------------- -- - -------------------- -- - ------------------ -- --- -- -- ----- - ----- ---- ------------ - - - ----- -------- ---- --- ------ ----------- -------- ---- ---- --- -- ------------------ -- ----- ----------------- -- -- ----------------------- -- - ------ ----------- -------- ---- ---- --- -展开代码
上面的示例中，...rest 将数组 [3, 4, 5] 展开成了一个新的数组，而 { ...restProps } 将对象 { phone: '555-5555', address: '123 Main St' } 展开成了一个新的对象。
将字符串转换为数组
使用扩展运算符可以方便地将一个字符串转换为一个字符数组：
const str = 'hello'; const charArray = [...str]; console.log(charArray); // ['h', 'e', 'l', 'l', 'o']
扩展运算符在函数调用中的应用
扩展运算符还可以用于函数调用。当我们将一个数组或对象作为函数的参数时，可以使用扩展运算符将数组或对象展开成多个独立的参数。例如：
-- -------------------- ---- ------- -------- --------------- -- -- - ------ - - - - -- - ----- ----- - --- -- --- ----- ---- - ----------------------- ------------------ -- - ----- ------ - - -- -- -- -- -- - -- ----- ---- - --------------------------------------- ------------------ -- -展开代码
上述示例中，calculateSum(...array) 将数组 [1, 2, 3] 展开成了三个独立的参数 1、2 和 3，然后调用了 calculateSum(1, 2, 3)；calculateSum(...Object.values(object)) 将对象 { a: 1, b: 2, c: 3 } 的属性值提取出来，然后展开成了三个独立的参数 1、2 和 3，同样也调用了 calculateSum(1, 2, 3)。
扩展运算符的注意事项
在使用扩展运算符时需要注意以下几点：
- 扩展运算符仅可以用于展开数组或对象，而不能用于展开函数。
- 在对象展开时，如果存在相同属性名的情况，后面的属性值会覆盖前面同名属性的属性值。
- 扩展运算符在 ES6 中已经出现，但在 ES5 中并不支持。如果你需要在旧环境中使用扩展运算符，可以通过 Babel 等工具进行转换。
- 注意扩展运算符的性能问题。由于需要创建新的数组或对象，使用扩展运算符可能会对性能造成一些影响。
结语
掌握扩展运算符的正确用法，在前端开发中可以大大简化代码和提高效率。扩展运算符不仅可以用于简单的数组和对象的展开，还可以应用于很多高级的场景，如合并对象、将字符串转换为数组，甚至在函数调用中使用。当然，在使用扩展运算符时也需要注意一些注意事项，如对象中同名属性的处理和性能问题等。希望本文对您有所帮助，谢谢阅读！
参考资料
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6780c6afce7f48612548a361
