使用JavaScript中的单个数组更新数组对象

例子：

mainArray = [ 
    { "name": "bob", "complete": "25" }, 
    { "name": "john", "complete": "50" }, 
    { "name": "mike", "complete": "75" },   
]; 

colorArray = ["#ff0000", "#00ff00", "#0000ff"];

我需要创建一个新的磁盘阵列，结合这些值。

for (i = 0, ilen = mainArray.length; ilen > i; i++) { 
    newArray.push({ 
     name: mainArray[i].name, 
     complete: mainArray[i].complete, 
     color: '', 
    }); 
}

无论我做什么，我要么只得到＃0000ff，要么根本得不到任何工作。失败的尝试：

for (j = 0, jlen = newArray.length; jlen > j; j++) { 
    for (k = 0, km = colorArray.length; km > k; k++) { 
     newArray[j].color = colorArray[k]; 
    } 
}

目标是要取回：

newArray = [ 
    { "name": "bob", "complete": "25", "color": "#ff0000" }, 
    { "name": "john", "complete": "50", "color": "#00ff00" }, 
    { "name": "mike", "complete": "75", "color": "#0000ff" }   
];

什么是做这种正确的方法是什么？

来源

2017-07-18 DusmaN

只需根据colorArray的索引设置每个人的color密钥。

var mainArray = [ 
    { "name": "bob", "complete": "25" }, 
    { "name": "john", "complete": "50" }, 
    { "name": "mike", "complete": "75" },   
]; 
var colorArray = ["#ff0000", "#00ff00", "#0000ff"]; 
var newArray = []; 

for (var i = 0; i < mainArray.length; i++) { 
    newArray.push({ 
    name: mainArray[i].name, 
    complete: mainArray[i].complete, 
    color: colorArray[i] 
    }); 
}

来源

2017-07-18 00:47:16

这很有效，谢谢。我仍然不明白在这种情况下JavaScript如何通过索引来“循环”我的颜色数组。我应该在文档/参考文献中看到什么？ – DusmaN

当你使用像'i'这样的索引的循环时，不要认为它是循环遍历数组，而是将它想象成循环遍历一系列值。在这种情况下，通过循环第一次，'i'为0，然后1，然后2，然后停止，因为比较'3

@FelixGuo很好的解释 – m0meni

使用Array.map和Object.assign功能更强大的方法看起来像

var mainArray = [ 
 
    { "name": "bob", "complete": "25" }, 
 
    { "name": "john", "complete": "50" }, 
 
    { "name": "mike", "complete": "75" },   
 
]; 
 
var colorArray = ["#ff0000", "#00ff00", "#0000ff"]; 
 

 
var newArray = mainArray.map((x, i) => 
 
    Object.assign({}, x, {color: colorArray[i]}) 
 
) 
 
    
 
console.log(newArray);

来源

2017-07-18 00:51:25 m0meni

您有以下不必要的嵌套循环：

for (j = 0, jlen = newArray.length; jlen > j; j++) { 
    for (k = 0, km = colorArray.length; km > k; k++) { 
     newArray[j].color = colorArray[k]; 
    } 
}

您可以将其更改为：

for (j = 0, jlen = newArray.length; jlen > j; j++) { 
    newArray[j].color = colorArray[j]; 
}

来源

2017-07-18 02:19:19 user8282131

使用JavaScript中的单个数组更新数组对象

回答

相关问题