JavaScriptで2つの配列を照合して名前に対応するuidを取得する方法

JavaScriptでは、文字列の配列とオブジェクトの配列という、異なる形式の2つの配列を扱う場面がよくあります。本記事では、このような2つの配列を照合し、一方の配列の順序に従って他方の配列から対応する値を取り出す方法を解説します。

前提となるデータ

ここでは、ユーザー情報を持つオブジェクトの配列 data と、名前（文字列）の配列 names の2つを用意します。

const data = [{
    name: 'Kamlesh Kapasi',
    uid: 123
}, {
        name: 'Mahesh Babu',
        uid: 129
}, {
        name: 'Akshay Kapoor',
        uid: 223
}, {
        name: 'Vikas Gupta',
        uid: 423
}, {
        name: 'Mohit Dalal',
        uid: 133
}, {
        name: 'Rajkumar Hirani',
        uid: 233
}, {
        name: 'Joy',
        uid: 127
}];
const names = ['Joy', 'Rajkumar Hirani', 'Akshay Kapoor', 'Mahesh Babu',
'Mohit Dalal', 'Kamlesh Kapasi', 'Vikas Gupta']

実現したいこと

今回の目的は、names 配列を先頭から順に走査し、その順序どおりに各名前に対応する uid を格納した数値配列を作成する関数を書くことです。

つまり、names の最初の要素「Joy」に対応する uid である 127 が、結果配列の最初の要素になる、というイメージです。

実装例

この処理には、累積結果を組み立てるのに便利な Array.prototype.reduce() と、条件に一致する要素のインデックスを見つける Array.prototype.findIndex() を組み合わせると簡潔に書けます。

const data = [{
    name: 'Kamlesh Kapasi',
    uid: 123
}, {
        name: 'Mahesh Babu',
        uid: 129
}, {
        name: 'Akshay Kapoor',
        uid: 223
}, {
        name: 'Vikas Gupta',
        uid: 423
}, {
        name: 'Mohit Dalal',
        uid: 133
}, {
        name: 'Rajkumar Hirani',
        uid: 233
}, {
        name: 'Joy',
        uid: 127
}];
const names = ['Joy', 'Rajkumar Hirani', 'Akshay Kapoor', 'Mahesh Babu',
'Mohit Dalal', 'Kamlesh Kapasi', 'Vikas Gupta']
const mapId = (arr, names) => {
    return names.reduce((acc, val) => {
      const index = arr.findIndex(el => el.name === val);
      return acc.concat(arr[index].uid);
    }, []);
}
console.log(mapId(data, names));

コードのポイント

• reduce() の初期値として空配列 [] を渡し、各ループで見つけた uid を concat() で末尾に追加していきます。
• findIndex() は、オブジェクトの name プロパティが現在の名前 val と一致する要素の位置を返します。
• 一致した要素から uid を取り出すことで、names の並び順がそのまま維持されます。

実行結果

コンソールには次のように出力されます。

[
    127, 233, 223,
    129, 133, 123,
    423
]

補足：より安全な書き方

上記のコードは、names に存在しない名前が含まれていた場合、findIndex() が -1 を返し、arr[-1] が undefined となるためエラーが発生します。実務では以下のようにガード句を入れると安全です。

const mapIdSafe = (arr, names) => {
    return names.reduce((acc, val) => {
      const found = arr.find(el => el.name === val);
      if (found) acc.push(found.uid);
      return acc;
    }, []);
}

このように、reduce() と findIndex()（または find()）を組み合わせることで、2つの配列を柔軟かつ簡潔に照合できます。