web-dev-qa-db-fra.com

Créer un objet à partir d'un tableau

Je veux créer un objet à partir d'une liste de tableau. J'ai un tableau dynamique qui suppose de ressembler à ceci:

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

et avec un peu de javascript es6, je veux créer un objet comme celui-ci:

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

ne vous inquiétez pas des objets intérieurs mais je voulais juste une structure de marque comme celle-ci:

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

S'il vous plaît aider, merci.

javascriptarraysecmascript-6javascript-objects
30
Hussain Dehgamwala

Simplement

 const obj = {};

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

ou si vous préférez le style "fonctionnel":

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

en utilisant l'opérateur de propagation d'objet moderne:

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

Exemple:

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

Sortie:

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

Voici comment cela fonctionne:

reduce est initialisé avec un objet vide (vide {} à la fin), les premières variables d'itération sont donc acc = {}cur = { id: 10, color: "red" }. La fonction retourne un objet - c'est pourquoi le corps de la fonction est entouré de parenthèses => ({ ... }). L'opérateur Spread ne fait rien à la première itération, donc red: 10 Est défini comme premier élément.

Sur la deuxième itération, les variables sont acc = { red: 10 }cur = { id: 20, color: "blue" }. Ici, l'opérateur de propagation développeacc et la fonction renvoie { red: 10, blue: 20 }.

Troisième itération acc = { red: 10, blue: 20 }cur = { id: 30, color: "green" }, Donc lorsque acc est étendu à l'intérieur de l'objet, notre fonction renvoie la valeur finale.

103
georg

en js avec es6 réduire la fonction pour tableau je le fais comme ça

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