回答

收藏

如何动态合并两个 JavaScript 对象的属性?

技术问答 技术问答 310 人阅读 | 0 人回复 | 2023-09-11

运行时需要能够合并两个(非常简单)JavaScript 对象。比如我想:
3 S: G8 P" o  v  u: l+ m4 X
    var obj1 = { food: 'pizza',car: 'ford' }var obj2 = { animal: 'dog' }obj1.merge(obj2);//obj1 now has three properties: food,car,and animal
    1 L, Q0 }* k' v1 g0 i
有没有内置的方法可以做到这一点?我不需要递归或合并函数,只需要平面对象上的方法。
  J3 r  ~, |7 B                                                                " h- }1 h& I8 I- i( c$ G3 _1 N
    解决方案:                                                               
6 e1 s- `, i! N  j6 s                                                                ECMAScript 2018年 标准方法9 A* X$ ?3 I& E& ~- S9 K# n" e
用对象传播:
; J" T) Z( C- d! b# i
    let merged = {...obj1,...obj2};! e; J# o, m) }
merged现在是 和 obj1并集obj2。中的属性obj2将覆盖obj1.8 \* u$ Q- Y) J( G& D8 ?9 v
    /** 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};& N/ o* s4 i. g8 c
这也是语法MDN如果使用 文档。babel,你需要babel-plugin-transform-object-rest-spread只有插件才能工作。
+ ]1 y9 Q8 \& @* N! p/ A4 c" wECMAScript 2015 (ES6) 标准方法
1 b' Y% G& R: Y+ U% v- L9 f4 ^: u
    /* 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);
    ! Y; _  `% j) p# U. `! q
(见MDN JavaScript 参考)
1 A  B( K: O4 x$ @! H6 yES5 及早版本的方法
( l7 N$ m3 E" D$ G0 |0 \
    for (var attrname in obj2) { obj1[attrname] = obj2[attrname]; }
    % g& {' L) A+ H; G# n1 n
请注意,如果您仍然想使用未修改的产品obj2的.obj1``obj1
0 D8 Y/ c( [, w6 _3 K如果你使用的框架在你的原型上是废话,你必须通过类似的检查获得更好的体验hasOwnProperty,但该代码将适用于 99% 。
, p6 C0 V% D6 m示例函数:
# a$ U! k& {- D( x' a
    /** * 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;}
    ; E$ k$ X' n* @& q/ o& E- k# L
分享到:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则