Lodashのextend、assign、mergeの違いについて (日本語)
2024-09-27
Lodashは、JavaScriptのユーティリティライブラリであり、オブジェクト操作や配列操作を簡潔に記述するためのメソッドを提供しています。その中でも、extend、assign、mergeの3つのメソッドは、オブジェクトを結合するための機能を提供しますが、それぞれ異なる挙動を示します。
extendとassign
- 既存のプロパティが上書きされます。
- どちらも、複数のオブジェクトを1つのオブジェクトに結合します。
- extendとassignは、基本的に同じ機能を持ちます。
例
const object1 = { a: 1, b: 2 };
const object2 = { c: 3, d: 4 };
const result1 = _.extend({}, object1, object2); // { a: 1, b: 2, c: 3, d: 4 }
const result2 = _.assign({}, object1, object2); // { a: 1, b: 2, c: 3, d: 4 }
merge
- 既存のプロパティが上書きされるのではなく、マージされます。
- mergeは、ネストされたオブジェクトを再帰的に結合します。
const object1 = { a: 1, b: { c: 2 } };
const object2 = { b: { d: 3 } };
const result = _.merge({}, object1, object2); // { a: 1, b: { c: 2, d: 3 } }
要約
- extendとassignは、単純なオブジェクトの結合に使用します。
選択基準
- ネストされたオブジェクトの結合
mergeを使用します。 - 単純な結合
extendまたはassignを使用します。
注意
mergeは、Lodashのすべてのバージョンで使用できます。extendとassignは、Lodashのバージョン4.0以降では非推奨となっています。代わりに、ES6のオブジェクトスプレッド演算子を使用することを推奨します。
// extendの例
const object1 = { a: 1, b: 2 };
const object2 = { c: 3, d: 4 };
const result1 = _.extend({}, object1, object2); // { a: 1, b: 2, c: 3, d: 4 }
// assignの例
const result2 = _.assign({}, object1, object2); // { a: 1, b: 2, c: 3, d: 4 }
object1とobject2を結合して、新しいオブジェクトresult1とresult2を作成します。
mergeのコード例
// mergeの例
const object1 = { a: 1, b: { c: 2 } };
const object2 = { b: { d: 3 } };
const result = _.merge({}, object1, object2); // { a: 1, b: { c: 2, d: 3 } }
- ネストされたオブジェクト
bがマージされます。
オブジェクトスプレッド演算子
// extendの代替
const object1 = { a: 1, b: 2 };
const object2 = { c: 3, d: 4 };
const result1 = { ...object1, ...object2 }; // { a: 1, b: 2, c: 3, d: 4 }
// mergeの代替
const object3 = { a: 1, b: { c: 2 } };
const object4 = { b: { d: 3 } };
const result2 = { ...object3, b: { ...object3.b, ...object4.b } }; // { a: 1, b: { c: 2, d: 3 } }
オブジェクト結合演算子
// extendの代替
const result3 = Object.assign({}, object1, object2); // { a: 1, b: 2, c: 3, d: 4 }
// mergeの代替
const result4 = Object.assign({}, object3, { b: Object.assign({}, object3.b, object4.b) }); // { a: 1, b: { c: 2, d: 3 } }
- オブジェクト結合演算子は、複数のオブジェクトを結合して新しいオブジェクトを作成する際に使用します。
- より柔軟な制御
オブジェクト結合演算子を使用することもできます。 - シンプルで読みやすいコード
オブジェクトスプレッド演算子が推奨されます。
mergeは、Lodashのすべてのバージョンで使用できますが、オブジェクトスプレッド演算子やオブジェクト結合演算子を使用することもできます。- オブジェクトスプレッド演算子とオブジェクト結合演算子は、ES6以降のJavaScriptでサポートされています。古いブラウザを使用している場合は、ポリフィルを使用する必要があります。
javascript lodash
