オブジェクトの値同士をマージ+足し算する【JavaScript】

ググっても情報がなかったのでメモしておきます。

1.異なるキーがないとき

例えば、以下のような同じキーを持つ2つのオブジェクトを足し算&マージして

const a = {
1: 100,
2: 200,
3: 300,
};

const b = {
1: 10,
2: 20,
3: 30,
};

 

以下のようなオブジェクトを作りたい場合、

{
 1: 110,
 2: 220,
 3: 330,
};

 

以下のように書けば実現できます。

const a = {
1: 100,
2: 200,
3: 300,
};

const b = {
1: 10,
2: 20,
3: 30,
};

const c = Object.keys(a).reduce((acc, value) => {
  acc[value] = a[value] + b[value];
  return acc;
}, {});

console.log(c);

2.異なるキーがあるとき

例えば、以下のような異なるキーを持つ2つのオブジェクトを足し算&マージして

const a = {
  1: 100,
  3: 300,
  4: 400,
};

const b = {
  1: 10,
  3: 30,
  5: 50,
};

 

以下のようなオブジェクトを作りたい場合、

{
 1: 110,
 2: 220,
 3: 330,
 4: 400,
 5: 50,
};

 

以下のように書けば実現できます。

const a = {
  1: 100,
  3: 300,
  4: 400,
};
const b = {
  1: 10,
  3: 30,
  5: 50,
};

const ab = [...new Set(Object.keys(a).concat(Object.keys(b)))];
//[1, 3, 4, 5]

const c = ab.reduce((acc, value) => {
  const x = a[value] === undefined ? 0 : a[value];
  const y = b[value] === undefined ? 0 : b[value];
  acc[value] = x + y;
  return acc;
}, {});

console.log(c);
  1. Object.keysメソッドでa,bのキーだけを取り出す
  2. concatメソッドで1.で作った配列を結合する(ab)
  3. 作った配列abをnew Setして重複を取り除く
  4. スプレッド構文(…)でSetを配列に戻す

という風にするのがポイント。(const abの行でこれらすべて行っています)

おわり

HTML/CSS/JavaScript
スポンサーリンク
この記事を書いた人
penpen

1991生まれ。
2019年くらいからフロントエンドエンジニアを目指している元アフィリエイターです💩

penpenをフォローする
penpenをフォローする
penpenメモ

コメント

タイトルとURLをコピーしました