Я пытаюсь объединить массив, который имеет пары ключевых значений в простой объект, который имеет только данные (без ключей).
У меня есть такой массив...
[
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;
}
Я только включил это, чтобы лучше проиллюстрировать то, что я хочу. Конечно, это не работает и приводит к ошибке.
Изменить этот оператор 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);
Синтаксис для назначения пары ключ-значение для объекта - 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);
Вы можете использовать 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);
Это работает:
var colorStops = {}
for (var i = 0; i < color.length; i++) colorStops[color[i].pos] = color[i].color
С массивом карта будет работать нормально.
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 используется нотация скобок.
map
- пустая трата (она возвращает массив, который вы не используете), используйте forEach