javascript - Opprett objekt fra array

Jeg vil lage et objekt fra en liste inne i et array. Jeg har et array som er dynamisk og skal se slik ut:

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

Og jeg vil lage et objekt som dette med litt 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
    }
}

Ikke bekymre deg for de indre objektene. Jeg vil bare lage en struktur som dette:

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

Svar #1

Enkelt

 const obj = {};

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

eller hvis du foretrekker «funksjonell» stil:

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

ved å bruke den moderne objektspreroperatoren:

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

Eksempel:

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

Slik fungerer det:

reduce initialiseres med et tomt objekt (tomt {} på slutten), derfor er første iterasjons variabler acc={} cur={ id: 10, color: "red" }. Funksjonen returnerer et objekt - dette er grunnen til at funksjonskroppen er pakket inn i parenteser => ({ ... }). Spread-operatoren gjør ingenting på første iterasjon, så red: 10 settes som første element.

I den andre iterasjonen er variablene acc={ red: 10 } cur={ id: 20, color: "blue" }. Her utvider spread-operatoren acc og funksjonen returnerer { red: 10, blue: 20 }.

Tredje iterasjon acc={ red: 10, blue: 20 } cur={ id: 30, color: "green" }, så når acc spres inne i objektet, returnerer funksjonen vår den endelige verdien.

Svar #2

Den nye Object.fromEntries fra ECMAScript 2019 gjør det enda enklere å transformere verdier fra en matrise til nøkler i et objekt som følger

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

console.log(obj)

Eller kanskje for å løse ditt eget originale problem

const width = 1920
const height = 1080
const dynamicArray = ["2007", "2008", "2009", "2010"];
const obj = Object.fromEntries(
  dynamicArray.map((year, i) => [year, {
    x: (( i + 1) / 5) * width,
    y: height / 2
  }])
)

console.log(obj)

Svar #3

I JS med es6 reduce function for array gjør jeg det slik

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}

Svar #4

var keys = ['key1', 'key2', 'key3']
var object = keys.reduce((accumulator, currentValue) => ({ ...accumulator, [currentValue]: 'someValue'}), {})
console.log(object)

eller

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

Dette vil produsere

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

Relaterte artikler