如何使用 JS 动态合并两个对象的属性
作者:Abhilash Kakumanu
译者:前端小智
来源:stackak
有梦想,有干货,微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录,有一线大厂面试完整考点、资料以及我的系列文章。
我们可以使用扩展操作符(...
)将不同的对象合并为一个对象,这也是合并两个或多个对象最常见的操作。
这是一种合并两个对象的不可变方法,也就是说,用于合并的初始两个对象不会因为副作用而以任何方式改变。最后,我们得到了一个新对象,它由这两个对象构造而成,而它们仍然保持完整。
我们创建两个对象并合并它们:
const person = {name: "前端小智",age: 24
}
const job = {title: "前端开发",location: "厦门"
}const employee = {...person, ...job};console.log(employee);
运行结果:
{ name: '前端小智', age: 24, title: '前端开发', location: '厦门'
}
注意:如果这两个对象之间有共同的属性,例如它们都有location
,则第二个对象(job
)的属性将覆盖第一个对象(person
)的属性:
const person = {name: "前端小智",location: "北京"
}
const job = {title: "前端开发",location: "厦门"
}const employee = {...person, ...job};console.log(employee);
运行结果:
{ name: '前端小智', location: '厦门', title: '前端开发'
}
如果要合并两个以上的对象,最右边的对象将覆盖左边的对象。
使用 Object.assign()
合并JavaScript对象
并两个或多个对象的另一种常用方法是使用内置的Object.assign()
方法:
Object.assign(target, source1, source2, ...);
此方法将一个或多个源对象中的所有属性复制到目标对象中。就像扩展操作符一样,在覆盖时,将使用最右边的值:
const person = {name: "前端小智",location: "北京",
};
const job = {title: "前端开发",location: "厦门",
};const employee = Object.assign(person, job);
console.log(employee);
运行结果:
{ name: '前端小智', age: 24,location: '厦门', title: '前端开发'
}
同样,请记住employee
引用的对象是一个全新的对象,不会链接到person
或job
引用的对象。
浅合并和深合并
在浅合并的情况下,如果源对象上的属性之一是另一个对象,则目标对象将包含对源对象中存在的同一对象的引用。 在这种情况下,不会创建新对象。
我们调整前面的person
对象,并将location
作为对象本身
const person = {name: "John Doe",location: {city: "London", country: "England"}
}
const job = {title: "Full stack developer"
}const employee = {...person, ...job};console.log(employee.location === person.location);
运行结果:
true
我们可以看到person
和employee
对象中对location
对象的引用是相同的。事实上,spread操作符(...
)和Object.assign()
都是浅合并。
JavaScript没有现成的深合并支持。然而,第三方模块和库确实支持它,比如Lodash的.merge
。
总结
本文中,我们演示在如何在 JS 中合并两个对象。介绍了spread操作符(...
)和Object.assign()
方法,它们都执行两个或多个对象的浅合并到一个新对象中,而不会影响组成部分。
~完,我是刷碗智,我要去刷碗了,我们下期见!
代码部署后可能存在的BUG没法实时知道,事后为了解决这些BUG,花了大量的时间进行log 调试,这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。
原文:https://stackak.com/merge-properties-of-two-objects-dynamically-in-javascript/
交流
有梦想,有干货,微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录,有一线大厂面试完整考点、资料以及我的系列文章。
如何使用 JS 动态合并两个对象的属性相关推荐
- 如何动态合并两个JavaScript对象的属性?
我需要能够在运行时合并两个(非常简单的)JavaScript对象. 例如,我想: var obj1 = { food: 'pizza', car: 'ford' } var obj2 = { anim ...
- js中判断两个对象是否相等。
js中判断两个对象是否相等. js中的Object.Array.Function等复杂数据类型,是无法直接用==和===操作符进行比对的. Object对比 const tar = { name:'张 ...
- javascript 数组对象根据相同属性值{key:value}合并两个对象
前言 js 数组对象的合并,方便自己后续使用与学习,废话少说,这段代码的功能就是根据某个相同的value值合并两个数组对象 比如:根据相同的hotelId来合并 一 , 数组对象根据相同属性值合并两个 ...
- [js] 如何判断两个对象相等?
[js] 如何判断两个对象相等? 提供另一种写法:function isSameObject(object1, object2) {if (Object.prototype.toString.call ...
- js reduce 累加数组里对象某个属性的和 NaN
js reduce 累加数组里对象某个属性的和 NaN var temp = [ { "y": 32 }, { "y": 60 }, { "y&quo ...
- js深度合并两个数组对象
js合并两个数组对象, 如果a中含有b,则b的值覆盖a的值 如果a中不含有b 则b的值新增到a MergeRecursive(obj1, obj2) {// 合并两个数组for (var p in o ...
- js合并两个对象(面试题)
const a ={a:1,b:2} const b ={b:1,c:2} // 两个对象合并 function extend(target,source){for (const key in sou ...
- js合并两个对象的方法
1 对象的合并 1.1 $.extend() var obj1= {'a': 1}; var obj2= {'b': 1}; var c = $.extend(obj1, obj2); 复制代码 co ...
- js 如何判断两个对象相等
什么是相等,一般我们认为只要===的结果是true,两者就相等. 我们一般认为 1.NaN和NaN是相等的 2.[1]和[1]就是相等的 3.{value:1}和{value:1}就是相等的 4.1和 ...
最新文章
- php 常用设计模式demo
- 【Java】 Thinking in Java 4.8 练习9
- DiskGenius的 “终止位置参数溢出”错误解决方法。
- linux 生成2g文件吗,linux 32位系统 c++写大于2G文件
- 快回家了,感觉什么事情都不想做,除了吃饭睡觉
- PS2019橡皮擦工具、背景橡皮擦工具、魔术橡皮擦工具
- 写了个算分压电阻阻值的MATLAB小程序
- kafka auto.offset.reset / latest / earliest 详解
- 叉积 微分 恒等式_单摆-微分方程浅谈
- AD7606-4输出数据异常
- 设计模式之美总结(创建型篇)
- idea提示:无法解析 文件 ‘xxx.xml‘,servelet应该有mapping
- 海思3519A uboot开机画面
- 智能生活 App SDK 如何实现设备控制
- 鸡兔同笼python程序怎么写_鸡肉的做法大全_怎么做好吃_家常做法_下厨房
- 信息系统项目管理-项目采购管理-十二
- 如何快速搞一个导播系统?
- [转]PAGEII携手极速网爱情电影经典对白
- cadvisor如何采集数据
- 电压互感器二次侧不能短路运行,电流互感器二次侧不能开路运行