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

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]}) )

<强>演示

＆＃13;

＆＃13;

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);

＆＃13;

＆＃13;

＆＃13;

<强>解释

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