聊聊前端 JavaScript 的扩展运算符 “...“ 的使用场景

前言

在 JavaScript 中，... 被称为 “扩展运算符” 或 “剩余参数运算符”。

扩展运算符是在 ES6（ECMAScript 2015）中被引入的，目的是为了提高语言的表达能力和代码的可读性。

根据上下文不同，它主要用在数组、对象以及函数调用中，帮助我们更灵活地处理数据结构。

下文说一下它的使用场景。

数组操作

1. 合并数组：

   let array1 = [1, 2];
   let array2 = [3, 4];
   let combinedArray = [...array1, ...array2]; // 结果为 [1, 2, 3, 4]
   

2. 复制数组：

   let originalArray = [1, 2, 3];
   let copiedArray = [...originalArray]; 
   // 结果为 [1, 2, 3]
   

3. 扩展数组：

   function logElements(...elements) {
       elements.forEach(element => console.log(element));
   }
   
   let numbers = [1, 2, 3];
   logElements(...numbers); 
   // 输出 1 2 3
   

4. 解构数组：

   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]
   

对象操作

1. 合并对象：

   let obj1 = { a: 1 };
   let obj2 = { b: 2 };
   let combinedObj = { ...obj1, ...obj2 }; 
   // 结果为 { a: 1, b: 2 }
   

2. 复制对象：

   let originalObj = { a: 1, b: 2 };
   let copiedObj = { ...originalObj }; 
   // 结果为 { a: 1, b: 2 }
   

3. 扩展对象：

   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年+ 资深研发老鸟，是软件项目管理师，也是快乐的程序猿，持续免费分享全栈实用编程技巧、项目管理经验和职场成长心得。欢迎关注老杨的公众号，相互交流，共同进步！