JavaScript のインデックス付け関数 | 配列マッピング

はじめに

この実験では、JavaScript の indexBy 関数を調べます。この関数は、提供された関数に基づいて配列からオブジェクトを作成します。この実験の目的は、Array.prototype.reduce() をどのように使用するか、および配列の各値に関数を適用してキーと値のペアを生成する方法を理解することです。この実験が終了すると、indexBy を使用して配列の値をキーにマッピングし、新しいオブジェクトを作成できるようになります。

配列をインデックス付けする関数

関数を使って配列をインデックス付けするには、次の手順に従います。

ターミナル/SSH を開き、コーディングの練習を始めるために node と入力します。
Array.prototype.reduce() を使って配列からオブジェクトを作成します。
提供された関数を配列の各値に適用してキーを生成し、キーと値のペアをオブジェクトに追加します。

以下はコードの例です。

const indexBy = (arr, fn) =>
  arr.reduce((obj, v, i) => {
    obj[fn(v, i, arr)] = v;
    return obj;
  }, {});

この関数を次のように使うことができます。

indexBy(
  [
    { id: 10, name: "apple" },
    { id: 20, name: "orange" }
  ],
  (x) => x.id
);
// { '10': { id: 10, name: 'apple' }, '20': { id: 20, name: 'orange' } }

この関数は、提供された関数を使って各値をキーにマッピングすることで配列からオブジェクトを作成します。結果のオブジェクトには、キーが関数によって生成され、値が元の配列要素であるキーと値のペアが含まれています。

まとめ

おめでとうございます！関数に基づく配列のインデックス付けの実験を完了しました。スキルを向上させるために、LabEx でさらに多くの実験を行って練習してください。