javascript - 映射新数组，然后将项目推送到现有数组中的对象

Question

如果我有一个像这样存在的主数组。

arr = {
    people:[{name: 'Zero'},{name: 'Jeans'},{name: 'Duct'}]
}

我想映射一个颜色数组，并为数组中的每个对象分配该数组中的颜色。

colors = { color: ['#fff', '#fa0', '#eee'] }

如何实现这一目标？

我可以通过 arr.people 进行映射，然后映射colors.color，但没有运气。

我想以这个结束

 arr = {
    people:[{name: 'Zero', color: '#FFF'},
            {name: 'Jeans', color: '#FA0'},
            {name: 'Duct', color: '#EEE'}
           ]} 

Answer 1

使用 map

arr.people = arr.people.map( (s, i) => ({...s, color: colors.color[i]}) )

演示

var arr = {
  people: [{
    name: 'Zero'
  }, {
    name: 'Jeans'
  }, {
    name: 'Duct'
  }]
};
var colors = {
  color: ['#fff', '#fa0', '#eee']
};
arr.people = arr.people.map((s, i) => ({ ...s,
  color: colors.color[i]
}));

console.log(arr);

说明

• 使用 map 迭代 arr.people
• 使用 spread syntax 从每次迭代中返回一个具有额外属性 - color 的对象.