web-dev-qa-db-ja.com

配列からオブジェクトを作成

配列のリストからオブジェクトを作成したい。私はこのように見えると思われる動的な配列を持っています：

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

助けてください、ありがとう。

javascriptarraysecmascript-6javascript-objects
30
Hussain Dehgamwala

単に

 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}), {})

例：

[
  { 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" }です。ここで、スプレッド演算子expandsaccと関数は{ red: 10, blue: 20 }を返します。

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

103
georg

jsでes6を使用して配列の関数を減らす

let x = [1,2,3]
let y = x.reduce((acc, elem) => {
  acc[elem] = elem // or what ever object you want inside
  return acc
}, {})
console.log(y) // {1:1, 2:2, 3:3}
11
Ralexrdz