• 博客园logo
  • 会员
  • 众包
  • 新闻
  • 博问
  • 闪存
  • 赞助商
  • HarmonyOS
  • Chat2DB
    • 搜索
      所有博客
    • 搜索
      当前博客
  • 写随笔 我的博客 短消息 简洁模式
    用户头像
    我的博客 我的园子 账号设置 会员中心 简洁模式 ... 退出登录
    注册 登录
思想人生从关注生活开始
博客园    首页    新随笔    联系   管理    订阅  订阅

JavaScript对象展开操作符 ...

对象展开操作符(Spread Operator)...在JavaScript(特别是在ES6及以后的版本中)中是一个强大的工具,它允许你将一个对象的所有可枚举属性复制到另一个对象中。以下是关于对象展开操作符的一些详细信息和用法:

1. 合并对象

对象展开操作符可以将一个或多个对象的属性合并到一个新的对象中。如果多个对象具有相同的属性,则后面的对象会覆盖前面的对象中的属性。

const obj1 = {a: 1, b: 2};  
const obj2 = {b: 3, c: 4};  
const merged = {...obj1, ...obj2}; // {a: 1, b: 3, c: 4}

  

在这个例子中,obj1 和 obj2 的属性被合并到了 merged 对象中。由于 obj1 和 obj2 都包含 b 属性,所以 merged 对象中的 b 属性值是 obj2 中的 b 属性值(即3)。

2. 创建新对象

对象展开操作符也可以用于创建一个新的对象,并将一个或多个对象的属性复制到新对象中

const obj1 = {foo: 'foo', bar: 'bar'};  
const newObj = {...obj1, baz: 'baz'}; // {foo: 'foo', bar: 'bar', baz: 'baz'}

 

在这个例子中,newObj 是一个新的对象,它包含了 obj1 的所有属性和一个额外的 baz 属性。

3. 复制对象

对象展开操作符也可以用于快速复制一个对象。但是要注意,这是一个浅拷贝(shallow copy),意味着如果对象的属性值是引用类型(如数组或另一个对象),那么复制的将是引用而不是实际的数据。

const obj = {a: 1, b: [2, 3]};  
const copy = {...obj}; // {a: 1, b: [2, 3]}

  

虽然 copy 看上去和 obj 一样,但它们的 b 属性实际上指向的是同一个数组。对 copy.b 的修改也会影响 obj.b。

4. 注意事项

  • 如果尝试展开一个非对象(如数字、字符串、null、undefined等),则会自动将其转换为对象(对于数字和字符串,它们会被转换为一个类似数组的对象,其索引为字符的Unicode码点),但通常这不是你想要的结果。
  • 对象展开操作符不会展开对象中的对象属性,也就是说,如果对象的属性值是一个对象,那么这个子对象不会被展开。

对象展开操作符为处理JavaScript对象提供了极大的便利,使代码更加简洁和易读。

posted @ 2024-06-03 15:06  JackYang  阅读(132)  评论(0)    收藏  举报
刷新页面返回顶部
博客园  ©  2004-2025
浙公网安备 33010602011771号 浙ICP备2021040463号-3