[解決済み] 2つのJavaScriptオブジェクトのプロパティを動的にマージするにはどうすればよいですか？

質問

私は、実行時に2つの（非常に単純な）JavaScriptオブジェクトをマージすることができるようにする必要があります。 たとえば、私はしたい。

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

obj1.merge(obj2);

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

これを行うための組み込みの方法はあるのでしょうか？ 再帰は必要なく、関数をマージする必要もなく、フラットオブジェクトのメソッドだけです。

どのように解決するのですか？

ECMAScript 2018標準メソッド

を使用することになります。 オブジェクトの広がり :

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

merged は、現在では obj1 と obj2 . のプロパティは obj2 にあるものは上書きされます。 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 プラグインを使用することで、動作させることができます。

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 .

フレームワークを使用していて、プロトタイプに問題がある場合は、次のようなチェックを行う必要があります。 hasOwnProperty しかし、このコードで99％のケースはうまくいきます。

関数例です。

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