배열에서 개체 만들기

배열 목록에서 개체를 만들고 싶습니다. 다음과 같이 보이는 동적 배열이 있습니다.

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

그리고 일부 자바 스크립트 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: ...,
      ...
    }

도와주세요, 감사합니다.

간단히

 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첫 번째 항목으로 설정됩니다.

두 번째 반복 변수는 acc = { red: 10 } cur = { id: 20, color: "blue" }. 여기서 스프레드 연산자는 확장 acc 되고 함수는를 반환합니다 { red: 10, blue: 20 }.

세 번째 반복 acc = { red: 10, blue: 20 } cur = { id: 30, color: "green" }이므로 acc객체 내부에 퍼지면 함수가 최종 값을 반환합니다.

Object.fromEntriesECMAScript 2019 의 새로운을 사용하면 다음과 같이 배열의 값을 객체의 키로 훨씬 쉽게 변환 할 수 있습니다.

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

console.log(obj)

es6가있는 js에서 배열에 대한 기능을 줄입니다.

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)

이것은 생산할 것입니다

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

실제로 Object.assign()스프레드 연산자로 직접 사용할 수 있다는 것을 알았습니다 . reduce또는 map함수에 더 이상 복잡성을 도입 할 필요가 없습니다 .

간단히 수행 Object.assign(...yourArray, {})하면 원하는 결과를 얻을 수 있습니다. 대신에 객체 배열을 다른 객체로 병합하려면 호출 Object.assign(...yourArray, yourObject)할 수도 있으며 제대로 작동합니다.

또한이 동일한 방법을 사용하여 두 배열을 하나의 객체로 병합 할 수 있습니다. 배열 중 하나에 객체가 포함되어 있지 않고 원시 값만 포함되어 있더라도이 방법을 사용하면 배열 중 하나 이상이 객체 만 포함하도록해야합니다 프리미티브는 기본적으로 색인이 key이므로 중복 키가 있으면 오류가 발생합니다.

그러나 OP의 목적을 위해 빈 개체와 병합되므로 이러한 오류의 위험이 없습니다. 이는 가장 안전한 방법입니다.

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 }

당신이 사용할 수있는:

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