前言
在 JavaScript 中，... 被称为 “扩展运算符” 或 “剩余参数运算符”。
扩展运算符是在 ES6（ECMAScript 2015）中被引入的，目的是为了提高语言的表达能力和代码的可读性。
根据上下文不同，它主要用在数组、对象以及函数调用中，帮助我们更灵活地处理数据结构。
下文说一下它的使用场景。
数组操作
- 合并数组：
let array1 = [1, 2]; let array2 = [3, 4]; let combinedArray = [...array1, ...array2]; // 结果为 [1, 2, 3, 4]
- 复制数组：
let originalArray = [1, 2, 3]; let copiedArray = [...originalArray]; // 结果为 [1, 2, 3]
- 扩展数组：
function logElements(...elements) { elements.forEach(element => console.log(element)); } let numbers = [1, 2, 3]; logElements(...numbers); // 输出 1 2 3
- 解构数组：
const arr = [1, 2, 3, 4, 5]; const [first, second, ...rest] = arr; console.log(first); // 输出: 1 console.log(second); // 输出: 2 console.log(rest); // 输出: [3, 4, 5]
对象操作
- 合并对象：
let obj1 = { a: 1 }; let obj2 = { b: 2 }; let combinedObj = { ...obj1, ...obj2 }; // 结果为 { a: 1, b: 2 }
- 复制对象：
let originalObj = { a: 1, b: 2 }; let copiedObj = { ...originalObj }; // 结果为 { a: 1, b: 2 }
- 扩展对象：
function logProperties(obj) { for (let key in obj) { console.log(key + ': ' + obj[key]); } } let user = { name: 'John', age: 30 }; logProperties({ ...user }); // 输出 name: John 和 age: 30
函数调用
函数调用主要是 扩展参数：
// 当不确定传入函数的参数数量时，利用扩展运算符将这些参数作为一个数组 function sum(...numbers) { return numbers.reduce((acc, curr) => acc + curr, 0); } let numbers = [1, 2, 3]; let total = sum(...numbers); // 结果为 6
或者
function sum(x, y, z) { return x + y + z; } //将数组元素作为多个参数传递给函数 const numbers = [1, 2, 3];
总结
... 运算符在 JavaScript 中非常强大且实用。
它使得处理数组和对象的操作更加简洁和直观，尤其是在函数参数、数组或对象的合并和解构时。
不过也要注意这两点：
- 扩展运算符的复制是浅拷贝，如果对象或数组中含有引用类型的数据，那么拷贝的还是原始对象的引用。
- 在合并对象时，如果有相同的属性名，后面的属性会覆盖前面的属性。
我是老杨，一个执着于编程乐趣、至今奋斗在一线的 10年+ 资深研发老鸟，是软件项目管理师，也是快乐的程序猿，持续免费分享全栈实用编程技巧、项目管理经验和职场成长心得。欢迎关注老杨的公众号，相互交流，共同进步！
