将循环数组分配给对象答案

【问题标题】：Assign circular array to object将循环数组分配给对象
【发布时间】：2017-09-10 01:50:25
【问题描述】：

我对 java 脚本比较陌生。我创建了一个对象和键值对。最近我需要添加另一个键 (color)，其值应该来自 color array (color[])。如果 object size 大于 color array size，那么 color 键的 value 应该从颜色数组的开头

var sumArray=[{"sum":1},{"sum":2},{"sum":3},{"sum":4},{"sum":5},{"sum":6}]
var color=["#FF0F00","#FF6600","#FF9E01"];


var combinedObj =sumArray.map(function(obj) {
    var me = Object.assign({}, obj);
      var i=0;    
      me.color = color[i++];
    return me;
});

输出是

[{"sum":1,"color":"#FF0F00"},{"sum":2,"color":"#FF0F00"},
{"sum":3,"color":"#FF0F00"},{"sum":4,"color":"#FF0F00"},
{"sum":5,"color":"#FF0F00"},{"sum":6,"color":"#FF0F00"}]

预期输出为

[{"sum":1,"color":"#FF0F00"},{"sum":2,"color":"#FF6600"},
{"sum":3,"color":"#FF9E01"},{"sum":4,"color":"#FF0F00"},
{"sum":5,"color":"#FF6600"},{"sum":6,"color":"#FF9E01"}]

如果对象大小大于颜色数组大小，则该值从头开始循环。

我尽力推荐了。但是失败了。提前致谢

【问题讨论】：

标签： javascript arrays

【解决方案1】：

您想在循环外定义迭代器，并在它达到最小数组长度时将其重置为零

var sumArray = [{"sum": 1}, {"sum": 2}, {"sum": 3}, {"sum": 4}, {"sum": 5}, {"sum": 6}]
var color    = ["#FF0F00", "#FF6600", "#FF9E01"];

var i = 0;

var combinedObj = sumArray.map(function(obj) {
  var me = Object.assign({}, obj);
  i = i === color.length ? 0 : i;
  me.color = color[i++];
  return me;
});

console.log( JSON.stringify( combinedObj, 0, 4 ) )

你可以直接减少数组

var sumArray = [{"sum":1},{"sum":2},{"sum":3},{"sum":4},{"sum":5},{"sum":6}]
var color    = ["#FF0F00","#FF6600","#FF9E01"];

var combinedObj = sumArray.reduce( (a,b,i) => 
  (a.push(Object.assign({}, b, {color:color[i%color.length]})), a)
, []);

console.log( JSON.stringify(combinedObj, 0, 4) )

【讨论】：

【解决方案2】：

您的问题在这一行：

var i=0;

将其移出循环，并且在循环中增量必须是：

 i = (i + 1) % color.length;

var sumArray=[{"sum":1},{"sum":2},{"sum":3},{"sum":4},{"sum":5},{"sum":6}]
var color=["#FF0F00","#FF6600","#FF9E01"];


var i=0;
var combinedObj = sumArray.map(function(obj) {
    var me = Object.assign({}, obj);
    me.color = color[i];
    i = (i + 1) % color.length;
    return me;
});
console.log(combinedObj);

另一种方法，避免全局变量，可以基于第二个地图参数：

var sumArray=[{"sum":1},{"sum":2},{"sum":3},{"sum":4},{"sum":5},{"sum":6}]
var color=["#FF0F00","#FF6600","#FF9E01"];


var combinedObj = sumArray.map(function(obj, idx) {
    var me = Object.assign({}, obj);
    me.color = color[idx % color.length];
    return me;
});
console.log(combinedObj);

【讨论】：

【解决方案3】：

只需检查i 的值是否为 3，然后将其分配回 0

var sumArray = [{
  "sum": 1
}, {
  "sum": 2
}, {
  "sum": 3
}, {
  "sum": 4
}, {
  "sum": 5
}, {
  "sum": 6
}]
var color = ["#FF0F00", "#FF6600", "#FF9E01"];

var i = 0;
var combinedObj = sumArray.map(function(obj) {

  obj.color = color[i];
  i++;
  if (i === 3) {
    i = 0;
  }
  return obj

}, {});
console.log(combinedObj)

【讨论】：