[解決済み] 配列からオブジェクトを生成する

質問

配列の中のリストからオブジェクトを作成したい。私は動的な配列を持っており、次のように見えるはずです。

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: ...,
      ...
    }

助けてください、ありがとうございます。

どのように解決するのですか？

単純に

 const obj = {};

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

または、quot;functional" スタイルを好む場合。

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

を現代のオブジェクト拡散演算子を使って

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

例

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

出力します。

{red: 10, blue: 20, green: 30}

以下はその仕組みです。

reduce は空のオブジェクトで初期化されます (空の {} で初期化されます)、したがって最初の反復の変数は acc = {} cur = { id: 10, color: "red" } . 関数はオブジェクトを返します - 関数本体が括弧でくくられるのはこのためです。 => ({ ... }) . Spread 演算子は最初の反復では何もしませんので 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 がオブジェクトの中に広がると、この関数は最終的な値を返します。