Objekt aus Array erstellen

Ich möchte ein Objekt aus einer Liste von Arrays erstellen. Ich habe ein dynamisches Array, das vermutlich so aussieht:

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

und mit etwas javascript es6 möchte ich ein objekt wie folgt erstellen:

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
    }
}

Mach dir keine Sorgen um innere Objekte, sondern wollte nur eine Struktur wie diese erstellen:

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

Bitte helfen Sie, danke.

Einfach

 const obj = {};

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

oder wenn Sie einen "funktionalen" Stil bevorzugen:

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

mit dem modernen Objektverbreitungsoperator:

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

Beispiel:

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

Ausgabe:

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

So funktioniert es:

reducewird mit einem leeren Objekt initialisiert ( {}am Ende leer ), daher sind erste Iterationsvariablen acc = {} cur = { id: 10, color: "red" }. Die Funktion gibt ein Objekt zurück. Aus diesem Grund wird der Funktionskörper in Klammern gesetzt => ({ ... }). Der Spread-Operator führt bei der ersten Iteration nichts aus und wird daher red: 10als erstes Element festgelegt.

Bei der zweiten Iteration handelt es sich um Variablen acc = { red: 10 } cur = { id: 20, color: "blue" }. Hier , um die Ausbreitung Betreiber erweitert acc und die Funktion zurückkehrt { red: 10, blue: 20 }.

Dritte Iteration acc = { red: 10, blue: 20 } cur = { id: 30, color: "green" }: Wenn accdiese Funktion innerhalb des Objekts verteilt ist, gibt sie den endgültigen Wert zurück.

Das neue Object.fromEntriesaus ECMAScript 2019 macht es noch einfacher, Werte aus einem Array in Schlüssel in einem Objekt wie folgt umzuwandeln

const dynamicArray = ["2007", "2008", "2009", "2010"];
const obj = Object.fromEntries(
  dynamicArray.map(year => [year, {
    something: "based",
    on: year
  }])
)

console.log(obj)

in js mit es6 reduziere Funktion für Array mache ich es so

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}

var keys = ['key1', 'key2', 'key3']

var object = Object.assign({}, ...Object.entries({...keys}).map(([a,b]) => ({ [b]: 'someValue' })))
console.log(object)

Dies wird produzieren

{ key1: 'someValue', key2: 'someValue', key3: 'someValue' }

Ich habe festgestellt, dass Sie tatsächlich nur Object.assign()direkt mit dem Spread-Operator verwenden können. Keine Notwendigkeit mehr Komplexität mit einer reduceoder mapFunktion einzuführen .

Tun Object.assign(...yourArray, {})Sie es einfach und Sie erhalten das gewünschte Ergebnis. Wenn Sie stattdessen Ihr Array von Objekten in einem anderen Objekt zusammenführen möchten, können Sie es auch aufrufen Object.assign(...yourArray, yourObject)und es funktioniert auch einwandfrei.

Sie können dieselbe Methode auch verwenden, um zwei Arrays zu einem Objekt zusammenzuführen, selbst wenn eines der Arrays keine Objekte, sondern nur primitive Werte enthält. Wenn Sie dies jedoch tun, müssen Sie sicherstellen, dass mindestens eines der Arrays nur Objekte als enthält Ein Grundelement verwendet standardmäßig seinen Index als key, sodass Sie Fehler erhalten, wenn ein doppelter Schlüssel vorhanden ist.

Für OP-Zwecke besteht jedoch kein Risiko für solche Fehler, da er mit einem leeren Objekt verschmilzt, was der sicherste Weg ist.

const arr = [
  { a: 0 },
  { c: 1 },
  { e: 2 },
];

const obj = Object.assign(...arr, {});

console.log(obj)

// Results to:
// Object { a: 0, c: 1, e: 2 }

Sie können verwenden:

     dynamicArray.map(value => ({'key': value, 'val': 'whatever you want'}));