如何动态合并两个 JavaScript 对象的属性?
技术问答
450 人阅读
|
0 人回复
|
2023-09-11
|
运行时需要能够合并两个(非常简单)JavaScript 对象。比如我想:5 p ^$ ?+ l6 v) p
var obj1 = { food: 'pizza',car: 'ford' }var obj2 = { animal: 'dog' }obj1.merge(obj2);//obj1 now has three properties: food,car,and animal$ |# n% f& j! h
有没有内置的方法可以做到这一点?我不需要递归或合并函数,只需要平面对象上的方法。( c( g, f# K1 v, s
M1 ~: \1 x8 i7 j 解决方案: 7 J3 h/ u7 v" b
ECMAScript 2018年 标准方法
2 K+ f4 D' G6 P# t. Z* {0 ]用对象传播:
/ r3 O) P( m' q8 _let merged = {...obj1,...obj2};
3 l0 p t8 `' j; a% f. W5 b |+ Z merged现在是 和 obj1并集obj2。中的属性obj2将覆盖obj1.7 q/ X7 W3 z% D7 p/ Q2 p) f# e
/** There's no limit to the number of objects you can merge. * Later properties overwrite earlier properties with the same name. */const allRules = {...obj1,...obj2,...obj3};
# X6 j, S- Q/ d 这也是语法MDN如果使用 文档。babel,你需要babel-plugin-transform-object-rest-spread只有插件才能工作。3 P7 m$ B4 G% N) m8 M
ECMAScript 2015 (ES6) 标准方法
: C: E, r3 Z" P7 ?* F: _2 L( c/* For the case in question,you would do: */Object.assign(obj1,obj2);/** There's no limit to the number of objects you can merge. * All objects get merged into the first object. * Only the object in the first argument is mutated and returned. * Later properties overwrite earlier properties with the same name. */const allRules = Object.assign({},obj1,obj2,obj3,etc);3 P$ y/ i1 ~6 U: P6 U% v
(见MDN JavaScript 参考)9 v+ N: l4 E; e' f
ES5 及早版本的方法
' m2 @: z) J! u( P+ Jfor (var attrname in obj2) { obj1[attrname] = obj2[attrname]; }% q* _4 ^% a8 R* M; O3 b9 ?
请注意,如果您仍然想使用未修改的产品obj2的.obj1``obj1
$ G, U5 q, t( P0 I$ G6 W" x如果你使用的框架在你的原型上是废话,你必须通过类似的检查获得更好的体验hasOwnProperty,但该代码将适用于 99% 。' Y( `* v2 d1 C* R" q n
示例函数:
: m! D* P6 i( N3 R( ^( q; t( e/** * Overwrites obj1's values with obj2's and adds obj2's if non existent in obj1 * @param obj1 * @param obj2 * @returns obj3 a new object based on obj1 and obj2 */function merge_options(obj1,obj二、{ var obj3 = {}; for (var attrname in obj1) { obj3[attrname] = obj1[attrname]; for (var attrname in obj2) { obj3[attrname] = obj2[attrname]; return obj3;}+ S, O1 i! ?0 o8 b: b
|
|
|
|
|
|