Javascript-嵌套循环和索引

Question

我正在尝试建立一个看起来像这样的数组：

[
 [{"name":"Mercury","index":0}],
 [{"name":"Mercury","index":1},{"name":"Venus","index":1}],
 [{"name":"Mercury","index":2},{"name":"Venus","index":2},{"name":"Earth","index":2}],
...
]

每个元素都是前一个对象和一个新对象的串联，所有索引都更新为最新值（例如，Mercury的索引为0，然后为1，依此类推）。 我尝试使用以下代码构建此数组：

var b = [];
var buffer = [];
var names = ["Mercury","Venus","Earth"]
for (k=0;k<3;k++){

    // This array is necessary because with real data there are multiple elements for each k
    var a = [{"name":names[k],"index":0}]; 

    buffer = buffer.concat(a);

    // This is where the index of all the elements currently in the 
    // buffer (should) get(s) updated to the current k 
    for (n=0;n<buffer.length;n++){
        buffer[n].index = k;
    }

    // Add the buffer to the final array
    b.push(buffer);

}
console.log(b);

打印到控制台的最后一个数组（b）在每个元素中都有正确数量的对象，但是到处的所有索引都等于k的最后一个值（2）。 我不明白为什么会这样，也不知道如何解决。

Answer 1

之所以发生这种情况，是因为内部数组中的每个对象实际上都是与存储在先前外部数组条目中的对象完全相同的对象-您仅存储对该对象的引用 ，而不是副本。 当您更新对象中的index时，您将在各处对其进行更新。

要解决此问题，您需要在每个内部迭代中创建新对象，或使用对象复制功能，例如ES6的Object.assign ，jQuery的$.extend或_.clone的_.clone 。

这是使用第一种方法的版本，并且还使用两个嵌套的.map调用来生成内部（可变长度）数组和外部数组：

var names = ["Mercury","Venus","Earth"];

var b = names.map(function(_, index, a) {
    return a.slice(0, index + 1).map(function(name) {
        return {name: name, index: index};
    });
});

或在ES6中：

var names = ["Mercury","Venus","Earth"];
var b = names.map((_, index, a) => a.slice(0, index + 1).map(name => ({name, index})));

Answer 2

尝试这个：

 var names = ["Mercury","Venus","Earth"]; var result = []; for (var i=0; i<names.length; i++){ var _temp = []; for(var j=0; j<=i; j++){ _temp.push({ name: names[j], index:i }); } result.push(_temp); } console.log(result) 

Answer 3

试试这个简单的脚本：

var b = [];
var names = ["Mercury","Venus","Earth"];
for(var pos = 0; pos < names.length; pos++) {
    var current = [];
    for(var x = 0; x < pos+1; x++) {
        current.push({"name": names[x], "index": pos});
    }
    b.push(current);
}