这两种展开运算符的方式有什么区别呢?

在 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 代码至关重要。 记住,在数组上,展开运算符展开的是元素;在对象上,展开运算符展开的是属性

posted @   王铁柱6  阅读(8)  评论(0编辑  收藏  举报
点击右上角即可分享
微信分享提示