JavaScriptで配列を検索・更新する方法｜POSITIONをキーに別配列からLEVELを追加する

JavaScript開発では、複数の配列に分かれたデータを共通のキーをもとに結合・更新したいケースがよくあります。例えば、一方の配列には「LEVEL」と「POSITION」が含まれ、もう一方には「EMAIL」と「POSITION」が含まれているような場合です。

本記事では、「POSITION」の値をキーとして、arr1から対応する「LEVEL」の値を取り出し、arr2の各オブジェクトに新たなプロパティとして追加する関数を実装する方法を解説します。

元となる2つの配列

今回扱うのは、次のような2つの配列です。

let arr1 = [
  { "LEVEL": 4, "POSITION": "RGM" },
  { "LEVEL": 5, "POSITION": "GM" },
  { "LEVEL": 5, "POSITION": "GMH" }
];

let arr2 = [
  { "EMAIL": "test1@stc.com", "POSITION": "GM" },
  { "EMAIL": "test2@stc.com", "POSITION": "GMH" },
  { "EMAIL": "test3@stc.com", "POSITION": "RGM" },
  { "EMAIL": "test3@CSR.COM.AU", "POSITION": "GM" }
];

実装コード

arr2の各要素を走査し、同じ「POSITION」を持つarr1のオブジェクトから「LEVEL」をコピーして追加します。

const formatArray = (first, second) => {
  second.forEach((el, index) => {
    const ind = first.findIndex(item => item["POSITION"] === el["POSITION"]);
    if (ind !== -1) {
      second[index]["LEVEL"] = first[ind]["LEVEL"];
    }
  });
};

formatArray(arr1, arr2);
console.log(arr2);

コードのポイント

• forEach()： arr2の各要素を順番に処理します。
• findIndex()： POSITIONの値が一致するarr1内の要素のインデックスを検索します。見つからない場合は -1 を返します。
• -1チェック： 一致する要素が存在する場合のみ、LEVELプロパティを追加することで安全に更新できます。

実行結果

コンソールへの出力は以下のようになります。

[
  { EMAIL: 'test1@stc.com', POSITION: 'GM', LEVEL: 5 },
  { EMAIL: 'test2@stc.com', POSITION: 'GMH', LEVEL: 5 },
  { EMAIL: 'test3@stc.com', POSITION: 'RGM', LEVEL: 4 },
  { EMAIL: 'test3@CSR.COM.AU', POSITION: 'GM', LEVEL: 5 }
]

このように、arr2のすべてのオブジェクトに、POSITIONをキーとして対応するLEVELの値が正しく追加されました。

補足：データ量が多い場合はMapで高速化できる

上記の実装はシンプルですが、findIndex()が毎回線形探索を行うため、要素数が多いと計算量はO(n²)になります。大規模なデータセットでは、事前にMapオブジェクトを作成しておくことで、O(n)まで改善できます。

const formatArrayOptimized = (first, second) => {
  const levelMap = new Map(
    first.map(item => [item["POSITION"], item["LEVEL"]])
  );

  second.forEach(el => {
    if (levelMap.has(el["POSITION"])) {
      el["LEVEL"] = levelMap.get(el["POSITION"]);
    }
  });
};

Mapはキーの検索がほぼ定数時間で行えるため、数千件以上のデータを扱う場合に特に効果的です。

まとめ

共通のキー（今回はPOSITION）をもとに、ある配列の情報を別の配列へマージする処理は、forEach()とfindIndex()の組み合わせで簡単に実現できます。データ量が少なければそのままで十分ですが、規模が大きくなる場合はMapを活用した実装に切り替えることで、パフォーマンスを大きく向上させられます。用途やデータサイズに応じて使い分けましょう。