这两种展开运算符的方式有什么区别呢?
在 JavaScript 的前端开发中,有两种主要的展开运算符(spread operator)...
的用法,它们分别应用于数组/类数组 和 对象。虽然符号相同,但作用略有不同:
1. 数组/类数组的展开:
-
作用: 将数组或类数组的元素 "展开" 成独立的项。
-
场景:
- 复制数组: 创建一个新数组,包含原数组所有元素。
- 合并数组: 将多个数组合并成一个新数组。
- 将类数组对象转换为数组: 例如
arguments
对象或 NodeList。 - 在函数调用中传递参数: 将数组元素作为独立的参数传递给函数。
-
示例:
const arr1 = [1, 2, 3];
const arr2 = [4, 5];
// 复制数组
const arrCopy = [...arr1]; // arrCopy: [1, 2, 3]
// 合并数组
const combinedArr = [...arr1, ...arr2]; // combinedArr: [1, 2, 3, 4, 5]
// 将类数组转换为数组
const nodeList = document.querySelectorAll('div');
const divArray = [...nodeList];
// 在函数调用中传递参数
function myFunc(a, b, c) {
console.log(a, b, c);
}
myFunc(...arr1); // 输出: 1 2 3
2. 对象的展开:
-
作用: 将对象的属性 "展开" 到一个新的对象中。
-
场景:
- 复制对象: 创建一个新对象,包含原对象所有属性。
- 合并对象: 将多个对象的属性合并到一个新对象中。 需要注意的是,如果属性名重复,后面的属性会覆盖前面的属性。
-
示例:
const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
// 复制对象
const objCopy = { ...obj1 }; // objCopy: { a: 1, b: 2 }
// 合并对象
const combinedObj = { ...obj1, ...obj2 }; // combinedObj: { a: 1, b: 2, c: 3, d: 4 }
// 合并对象,后面的属性覆盖前面的
const overlappingObj = { ...obj1, b: 3, ...obj2 }; // overlappingObj: { a: 1, b: 3, c: 3, d: 4 }
总结:
虽然都使用 ...
符号,但展开运算符在数组/类数组和对象上的作用是不同的。理解它们的区别对于编写简洁高效的 JavaScript 代码至关重要。 记住,在数组上,展开运算符展开的是元素;在对象上,展开运算符展开的是属性。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步