如何动态合并两个 JavaScript 对象的属性? [英] How can I merge properties of two JavaScript objects dynamically?

问题描述

我需要能够在运行时合并两个(非常简单的)JavaScript 对象.例如我想:

I need to be able to merge two (very simple) JavaScript objects at runtime. For example I'd like to:

var obj1 = { food: 'pizza', car: 'ford' }
var obj2 = { animal: 'dog' }

obj1.merge(obj2);

//obj1 now has three properties: food, car, and animal

有没有人有这个脚本或知道一个内置的方法来做到这一点?我不需要递归，也不需要合并函数，只需要平面对象上的方法.

Does anyone have a script for this or know of a built in way to do this? I do not need recursion, and I do not need to merge functions, just methods on flat objects.

推荐答案

ECMAScript 2018 标准方法

您将使用对象传播:

let merged = {...obj1, ...obj2};

merged 现在是 obj1 和 obj2 的并集.obj2 中的属性将覆盖 obj1 中的属性.

merged is now the union of obj1 and obj2. Properties in obj2 will overwrite those in obj1.

/** 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};

这里还有 MDN 文档对于这种语法.如果您使用 babel，则需要 babel-plugin-transform-object-rest-spread 插件使其工作.

Here is also the MDN documentation for this syntax. If you're using babel you'll need the babel-plugin-transform-object-rest-spread plugin for it to work.

ECMAScript 2015 (ES6) 标准方法

/* 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);

(参见 MDN JavaScript 参考)

ES5 及更早版本的方法

for (var attrname in obj2) { obj1[attrname] = obj2[attrname]; }

请注意，这只会将 obj2 的所有属性添加到 obj1，如果您仍想使用未修改的 obj1，这可能不是您想要的代码>.

Note that this will simply add all attributes of obj2 to obj1 which might not be what you want if you still want to use the unmodified obj1.

如果你使用的框架在你的原型上乱七八糟，那么你必须更喜欢像 hasOwnProperty 这样的检查，但该代码适用于 99% 的情况.

If you're using a framework that craps all over your prototypes then you have to get fancier with checks like hasOwnProperty, but that code will work for 99% of cases.

示例函数:

/**
 * 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,obj2){
    var obj3 = {};
    for (var attrname in obj1) { obj3[attrname] = obj1[attrname]; }
    for (var attrname in obj2) { obj3[attrname] = obj2[attrname]; }
    return obj3;
}

这篇关于如何动态合并两个 JavaScript 对象的属性?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！