Objekt aus Array erstellen

83

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.

Hussain Dehgamwala
quelle
2
In Ordnung. Was hast du versucht? Wo steckst du fest? Welche Recherchen haben Sie durchgeführt? Haben Sie sich das zum Beispiel angesehen?
TJ Crowder

Antworten:

203

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.

Georg
quelle
1
Vielen Dank! Es hat nach Bedarf funktioniert. Ich wusste nie über array.reduceFunktion.
Hussain Dehgamwala
1
Wenn Sie den funktionalen Stil bevorzugen und ich, sollten Sie verwenden const. Eigentlich solltest du es trotzdem benutzen. Wenn Sie Zugriff auf die ES Next Rest / Spread-Syntax haben (z. B. über TypeScript oder Babel), können Sie auch schreiben const obj = yourArray.reduce((o, key) => ({ ...o, [key]: whatever}), {})und sogar vermeiden, den Samen zu mutieren: p
Aluan Haddad
1
@AluanHaddad: guter Vorschlag, konvertierte den Beitrag in CW, zögern Sie nicht zu bearbeiten.
Georg
({... o, [Schlüssel]: KandidatDoc [Schlüssel]}) .. wobei KandidatDoc ein Pojo ist. Ich möchte nur Werte verwenden, die in CandidateDoc definiert sind. Aber ich bin verwirrt mit den Eltern, kann anscheinend keine "Rückkehr" oder eine if-Anweisung erhalten, um zu funktionieren. Könnten Sie mich in die richtige Richtung weisen - keine Angst, Dokumentation zu lesen.
22.
1
@cameck: danke, der Beitrag ist CW, zögern Sie nicht zu bearbeiten.
Georg
33

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)

Abderrahmane TAHRI JOUTI
quelle
17

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}
Ralexrdz
quelle
3
noch kürzer:[1, 2, 3].reduce((x, y)=>(x[y] = 1, x), {})
exebook
4
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' }
Alok Singh Mahor
quelle
0

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 }
Aasmund Berge Endresen
quelle
-4

Sie können verwenden:

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

Geben Sie hier die Bildbeschreibung ein

Jilykate
quelle
3
Nicht so was ich will !!
Hussain Dehgamwala