☰

配列からオブジェクトを作成する 質問する

tag-icon • tag-icon javascript
配列からオブジェクトを作成する 質問する

配列内のリストからオブジェクトを作成したいです。動的な配列があり、次のようになります。

var dynamicArray = ["2007", "2008", "2009", "2010"];

そして、JavaScript ES6 を使用して次のようなオブジェクトを作成したいと思います。

const obj = {
    2007: {
        x: width / 5,
        y: height / 2
    },
    2008: {
        x: (2 / 5) * width,
        y: height / 2
    },
    2009: {
        x: (3 / 5) * width,
        y: height / 2
    },
    2010: {
        x: (4 / 5) * width,
        y: height / 2
    }
}

内部のオブジェクトについては心配しないでください。次のような構造を作成したいだけです。

 obj = {
      2007: ...,
      2008: ...,
      ...
    }

ベストアンサー1

単に

 const obj = {};

 for (const key of yourArray) {
      obj[key] = whatever;
 }

または、「機能的な」スタイルを好む場合:

 const obj = yourArray.reduce((o, key) => Object.assign(o, {[key]: whatever}), {});

最新のオブジェクトスプレッド演算子を使用します。

const obj = yourArray.reduce((o, key) => ({ ...o, [key]: whatever}), {})

例：

console.log(
[
  { id: 10, color: "red" },
  { id: 20, color: "blue" },
  { id: 30, color: "green" }
].reduce((acc, cur) => ({ ...acc, [cur.color]: cur.id }), {})
);

仕組みは次のとおりです:

reduceは空のオブジェクト（{}最後は空）で初期化されるため、最初の反復変数は ですacc = {} cur = { id: 10, color: "red" }。関数はオブジェクトを返します。これが関数本体が括弧で囲まれている理由です=> ({ ... })。スプレッド演算子は最初の反復では何もしないため、 がred: 10最初の項目として設定されます。

2回目の反復では変数は ですacc = { red: 10 } cur = { id: 20, color: "blue" }。ここでスプレッド演算子拡大する acc関数は を返します{ red: 10, blue: 20 }。

3 回目の反復acc = { red: 10, blue: 20 } cur = { id: 30, color: "green" }で、accがオブジェクト内に広がると、関数は最終値を返します。

おすすめ記事