JavaScript 展开运算符 ...
在 JavaScript 中，展开运算符（...）是一个非常有用的特性，它允许一个表达式被展开在需要多个参数（函数调用）或多个元素（数组字面量）或多个键值对（对象字面量）的地方。
语法
展开运算符的语法非常简单，就是三个连续的点（...）。
用途
1. 在函数调用中展开数组
语法
functionName(...iterable)
示例
const numbers = [1, 2, 3];
function sum(a, b, c) {return a + b + c;
}
const result = sum(...numbers); // 等同于 sum(1, 2, 3)
console.log(result); // 输出 6
在这个例子中，...numbers 将数组 numbers 中的元素展开为 sum 函数的参数。
2. 在数组字面量中复制数组元素
语法
[...iterable, ...]
示例
const original = [1, 2, 3];
const copied = [...original];
console.log(copied); // 输出 [1, 2, 3]
这里，...original 将 original 数组中的元素复制到新数组 copied 中。
3. 在对象字面量中复制对象属性
语法
{...object}
示例
const person = { name: "Alice", age: 25 };
const copyPerson = { ...person, age: 30 };
console.log(copyPerson); // 输出 { name: "Alice", age: 30 }
在这个例子中，...person 将 person 对象中的属性展开到新对象 copyPerson 中。
4. 合并数组
示例
const array1 = [1, 2, 3];
const array2 = [4, 5];
const combined = [...array1, ...array2];
console.log(combined); // 输出 [1, 2, 3, 4, 5]
展开运算符可以用来合并数组。
5. 合并对象
示例
const obj1 = { name: "Alice" };
const obj2 = { age: 25 };
const combinedObj = { ...obj1, ...obj2 };
console.log(combinedObj); // 输出 { name: "Alice", age: 25 }
展开运算符可以用来合并对象。
6. 与 new 操作符一起使用
示例
function Circle(radius) {this.radius = radius;if (radius > 10) {console.log('半径大于10');}
}
const args = [5];
const circle = new Circle(...args);
在这个例子中，...args 将 args 数组中的元素展开为 Circle 构造函数的参数。
7. 在函数中收集剩余参数
示例
function myFunction(x, y, ...args) {console.log(x, y); // 输出第一个和第二个参数console.log(args); // 输出剩余参数的数组
}
myFunction(1, 2, 3, 4, 5); // 输出 1 2 [3, 4, 5]
展开运算符可以用来收集函数中的剩余参数。
注意事项
- 展开运算符会将数组中的元素或对象中的属性浅拷贝到新数组或新对象中。
- 在函数调用中，如果展开的对象或数组中包含
undefined或null，它们会被转换为undefined参数。 - 在对象字面量中，如果展开的对象有重复的属性，后面的属性会覆盖前面的属性。
展开运算符提供了一种简洁和灵活的方式来处理数组和对象，是现代 JavaScript 编程中不可或缺的一部分。