☰

2つのJavaScriptオブジェクトのプロパティをマージするにはどうすればいいですか? 質問する

tag-icon • tag-icon javascript javascript-objects
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

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

ベストアンサー1

ECMAScript 2018 標準メソッド

使用する場合はオブジェクトの拡散:

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

mergedobj1は、との和集合になりました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/プラグイン提案オブジェクトレストスプレッドプラグインが必要です（このプラグインは@babel/preset-env、に含まれています。ES2018）。

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

さらに:-このプログラムをチェックObject.assignとスプレッド構文のオブジェクトリテラルの違いを確認するには

おすすめ記事