Lodash ライブラリの _.merge() 関数でオブジェクトプロパティを結合する

TypeScriptにおけるオブジェクトプロパティの結合方法

スプレッド構文は、オブジェクトリテラルや関数呼び出しで、オブジェクトのプロパティを展開するのに役立ちます。

const obj1 = { name: "John", age: 30 };
const obj2 = { city: "Tokyo", country: "Japan" };

const combinedObj = { ...obj1, ...obj2 };

console.log(combinedObj); // { name: 'John', age: 30, city: 'Tokyo', country: 'Japan' }

この例では、obj1 と obj2 のプロパティを combinedObj に結合しています。 同名のプロパティが存在する場合、後から定義された方が優先されます。

Object.assign() メソッドは、ターゲットオブジェクトにソースオブジェクトのプロパティをコピーします。

const obj1 = { name: "John", age: 30 };
const obj2 = { city: "Tokyo", country: "Japan" };

const combinedObj = Object.assign({}, obj1, obj2);

console.log(combinedObj); // { name: 'John', age: 30, city: 'Tokyo', country: 'Japan' }

Lodash ライブラリの _.merge() 関数は、複数のオブジェクトを深くマージするのに役立ちます。

import _ from 'lodash';

const obj1 = { name: "John", age: 30, address: { street: "1st Ave" } };
const obj2 = { city: "Tokyo", country: "Japan", address: { city: "Tokyo" } };

const combinedObj = _.merge({}, obj1, obj2);

console.log(combinedObj); 
// {
//   name: 'John',
//   age: 30,
//   address: { street: '1st Ave', city: 'Tokyo' },
//   city: 'Tokyo',
//   country: 'Japan'
// }

この例では、obj1 と obj2 を深くマージしています。

自作関数

上記のいずれの方法もニーズに合わない場合は、自作関数を作成することもできます。

function mergeObjects(obj1: object, obj2: object): object {
  const result = {};

  for (const key in obj1) {
    result[key] = obj1[key];
  }

  for (const key in obj2) {
    if (!result.hasOwnProperty(key)) {
      result[key] = obj2[key];
    }
  }

  return result;
}

const obj1 = { name: "John", age: 30 };
const obj2 = { city: "Tokyo", country: "Japan" };

const combinedObj = mergeObjects(obj1, obj2);

console.log(combinedObj); // { name: 'John', age: 30, city: 'Tokyo', country: 'Japan' }

この例では、obj1 と obj2 のプロパティをループ処理して、result オブジェクトに結合しています。

• プロパティの数が少ない場合は、スプレッド構文が最も簡潔で効率的な方法です。
• プロパティの数が多い場合や、複雑なマージ処理が必要な場合は、Object.assign() メソッドや Lodash ライブラリの _.merge() 関数を使うと便利です。

• [TypeScript オブジェクトを結合したいなら、shallow copy か lodash.merge で？ - Qiita

スプレッド構文

const person = {
  name: "John",
  age: 30,
};

const address = {
  city: "Tokyo",
  country: "Japan",
};

const combined = { ...person, ...address };

console.log(combined); // { name: 'John', age: 30, city: 'Tokyo', country: 'Japan' }

Object.assign() メソッド

const person = {
  name: "John",
  age: 30,
};

const address = {
  city: "Tokyo",
  country: "Japan",
};

const combined = Object.assign({}, person, address);

console.log(combined); // { name: 'John', age: 30, city: 'Tokyo', country: 'Japan' }

この例では、Object.assign() メソッドを使って person オブジェクトと address オブジェクトを結合しています。

Lodash ライブラリの _.merge() 関数

import _ from "lodash";

const person = {
  name: "John",
  age: 30,
  address: {
    street: "1st Ave",
  },
};

const address = {
  city: "Tokyo",
  country: "Japan",
  address: {
    city: "Tokyo",
  },
};

const combined = _.merge({}, person, address);

console.log(combined); 
// {
//   name: 'John',
//   age: 30,
//   address: { street: '1st Ave', city: 'Tokyo' },
//   city: 'Tokyo',
//   country: 'Japan'
// }

自作関数

function mergeObjects(obj1: object, obj2: object): object {
  const result = {};

  for (const key in obj1) {
    result[key] = obj1[key];
  }

  for (const key in obj2) {
    if (!result.hasOwnProperty(key)) {
      result[key] = obj2[key];
    }
  }

  return result;
}

const person = {
  name: "John",
  age: 30,
};

const address = {
  city: "Tokyo",
  country: "Japan",
};

const combined = mergeObjects(person, address);

console.log(combined); // { name: 'John', age: 30, city: 'Tokyo', country: 'Japan' }

オブジェクトプロパティを結合するその他の方法

reduce() メソッド

const obj1 = { name: "John", age: 30 };
const obj2 = { city: "Tokyo", country: "Japan" };

const combinedObj = Object.keys(obj1).concat(Object.keys(obj2)).reduce((acc, key) => {
  acc[key] = obj1[key] ?? obj2[key];
  return acc;
}, {});

console.log(combinedObj); // { name: 'John', age: 30, city: 'Tokyo', country: 'Japan' }

この例では、reduce() メソッドを使って obj1 と obj2 のプロパティを結合しています。

手動で結合する

const obj1 = { name: "John", age: 30 };
const obj2 = { city: "Tokyo", country: "Japan" };

const combinedObj = {};

for (const key in obj1) {
  combinedObj[key] = obj1[key];
}

for (const key in obj2) {
  combinedObj[key] = obj2[key];
}

console.log(combinedObj); // { name: 'John', age: 30, city: 'Tokyo', country: 'Japan' }

オブジェクトプロパティを結合するには、いくつかの方法があります。 状況に合わせて最適な方法を選択してください。