Преобразование массива объектов в объект только с значениями (без индекса или ключей)

1

Я пытаюсь объединить массив, который имеет пары ключевых значений в простой объект, который имеет только данные (без ключей).

У меня есть такой массив...

[
  0:{pos: 0, color: "#4a55e5"}
  1:{pos: 0.2, color: "#206bcb"}
  2:{pos: 0.4, color: "#edffff"}
  3:{pos: 0.6, color: "#ffaa00"}
  4:{pos: 0.8, color: "#000200"}
  5:{pos: 1, color: "#000764"}
]

Мне нужно преобразовать его так, чтобы это было так...

colorStops = {
    0: "#4a55e5",
    0.2: "#206bcb",
    0.4: "#edffff",
    0.6: "#ffaa00",
    0.8: "#000200",
    1: "#000764"
}

Думаю, мне нужно пройти через массив и каким-то образом вставить значения в объект...

colorStops = {};
for(var i=0; i<color.length; i++){
   colorStops[i] = color[i].pos : color[i].color;
}

Я только включил это, чтобы лучше проиллюстрировать то, что я хочу. Конечно, это не работает и приводит к ошибке.

Теги:
arrays
javascript-objects

5 ответов

3
Лучший ответ

Изменить этот оператор colorStops[i] = color[i].pos: color[i].color; colorStops[color[i].pos] = color[i].color;

var color = [ {pos: 0, color: "#4a55e5"}, {pos: 0.2, color: "#206bcb"}, {pos: 0.4, color: "#edffff"}, {pos: 0.6, color: "#ffaa00"}, {pos: 0.8, color: "#000200"}, {pos: 1, color: "#000764"} ];
colorStops = {};
for(var i=0; i<color.length; i++){
   colorStops[color[i].pos] = color[i].color;
}
console.log(colorStops);

Вы можете использовать array#reduce и object#destructuring для создания своего объекта.

var data = [ {pos: 0, color: "#4a55e5"}, {pos: 0.2, color: "#206bcb"}, {pos: 0.4, color: "#edffff"}, {pos: 0.6, color: "#ffaa00"}, {pos: 0.8, color: "#000200"}, {pos: 1, color: "#000764"} ];
var result = data.reduce((o,{pos, color}) => (o[pos] = color, o), {});
console.log(result);
1

Синтаксис для назначения пары ключ-значение для объекта - obj[key] = value. Поэтому обновленный код должен выглядеть следующим образом:

var color = [
  {pos: 0, color: "#4a55e5"},
  {pos: 0.2, color: "#206bcb"},
  {pos: 0.4, color: "#edffff"},
  {pos: 0.6, color: "#ffaa00"},
  {pos: 0.8, color: "#000200"},
  {pos: 1, color: "#000764"}
];

var colorStops = {};
for(var i=0; i<color.length; i++){
  let key = color[i].pos;
  let value = color[i].color;
  colorStops[key] = value;
}

console.log(colorStops);
1

Вы можете использовать reduce следующим образом:

var obj = arr.reduce(function(res, o) {
    res[o.pos] = o.color;
    return res;
}, {});

который может быть сокращен (с использованием функций стрелок ES6) до:

var obj = arr.reduce((res, o) => (res[o.pos]=o.color, res), {});

Пример:

var arr = [
  {pos: 0, color: "#4a55e5"},
  {pos: 0.2, color: "#206bcb"},
  {pos: 0.4, color: "#edffff"},
  {pos: 0.6, color: "#ffaa00"},
  {pos: 0.8, color: "#000200"},
  {pos: 1, color: "#000764"}
];

var obj = arr.reduce((res, o) => (res[o.pos]=o.color, res), {});

console.log(obj);
1

Это работает:

var colorStops = {}

for (var i = 0; i < color.length; i++) colorStops[color[i].pos] = color[i].color
0

С массивом карта будет работать нормально.

var colorStops = {};

var color = [
  {pos: 0, color: "#4a55e5"},
  {pos: 0.2, color: "#206bcb"},
  {pos: 0.4, color: "#edffff"},
  {pos: 0.6, color: "#ffaa00"},
  {pos: 0.8, color: "#000200"},
  {pos: 1, color: "#000764"}
];

color.map(function(value) {
  colorStops[value.pos] = value.color;
})

Как вы видите, для создания новых свойств внутри объекта colorStop используется нотация скобок.

  • 0
    map - пустая трата (она возвращает массив, который вы не используете), используйте forEach

Ещё вопросы

Сообщество Overcoder
Наверх
Меню