将对象数组转换为仅具有值（无索引或键）的对象

Question

我正在尝试将具有键值对的数组转换为仅包含数据（无键）的简单对象。

我有这样的数组...

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

我仅包括此内容以更好地说明我想要什么。 当然，这是行不通的，并会导致错误。

Answer 1

更改此语句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); 

Answer 2

这有效：

var colorStops = {}

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

Answer 3

将键值对分配给对象的语法为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); 

Answer 4

您可以像这样使用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); 

Answer 5

使用数组，map可以正常工作。

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对象内创建新属性。