深入理解JavaScript展开运算符(附Demo)

1. 基本知识

JavaScript ES6中的一个特色

  • 由三个点(...)组成,主要用于数组和对象的操作
  • 可以将数组或对象的元素展开到另外一个数组或对象中

数组中的展开运算符:(将数组中的元素展开为单独的元素)

const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5, 6];
console.log(arr2); // [1, 2, 3, 4, 5, 6]

对象中的展开运算符:(将一个对象的所有可枚举属性拷贝到一个新对象中)

const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 };
console.log(obj2); // { a: 1, b: 2, c: 3 }

2. Demo

  • 合并数组
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const mergedArray = [...arr1, ...arr2];
console.log(mergedArray); // [1, 2, 3, 4, 5, 6]
  • 拷贝数组
const originalArray = [1, 2, 3];
const copiedArray = [...originalArray];
console.log(copiedArray); // [1, 2, 3]
  • 传递函数参数:(将数组元素作为独立的参数传递给函数
function sum(x, y, z) {
  return x + y + z;
}

const numbers = [1, 2, 3];
console.log(sum(...numbers)); // 6
  • 合并对象:(展开运算符,可以合并多个对象)
const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
const mergedObject = { ...obj1, ...obj2 };
console.log(mergedObject); // { a: 1, b: 2, c: 3, d: 4 }
  • 拷贝对象:(拷贝一个对象)
const originalObject = { a: 1, b: 2 };
const copiedObject = { ...originalObject };
console.log(copiedObject); // { a: 1, b: 2 }
  • 数组合并并添加新元素:(合并数组的同时添加新的元素)
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combinedArray = [0, ...arr1, ...arr2, 7];
console.log(combinedArray); // [0, 1, 2, 3, 4, 5, 6, 7]
  • 对象合并并覆盖属性:(有相同的属性,后面的属性会覆盖前面的)
// obj2的b属性覆盖了obj1的b属性
const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const combinedObject = { ...obj1, ...obj2 };
console.log(combinedObject); // { a: 1, b: 3, c: 4 }

3. 总结

优点描述
合并数组和对象可以轻松地合并多个数组或对象。
拷贝数组和对象方便地进行浅拷贝操作,不需要使用Object.assign或其他方法。
传递函数参数将数组元素作为独立的参数传递给函数
缺点描述
浅拷贝只进行浅拷贝,对于嵌套的引用类型(如对象或数组)只拷贝引用,不会深层次地拷贝内容
不可枚举属性只拷贝对象的自身可枚举属性,不会拷贝继承的或不可枚举的属性
顺序问题合并对象时,如果有相同的属性,后面的属性会覆盖前面的属性,可能会导致意外的覆盖

不可枚举属性:

const obj1 = Object.create({ a: 1 });
obj1.b = 2;
const obj2 = { ...obj1 };
console.log(obj2); // { b: 2 }

浅拷贝:

const originalArray = [{ a: 1 }, { b: 2 }];
const copiedArray = [...originalArray];
copiedArray[0].a = 99;
console.log(originalArray[0].a); // 99
  • 6
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

码农研究僧

你的鼓励将是我创作的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值