如何在 JavaScript 中正确地将对象从 for 循环推送到数组？答案

【问题标题】：How to push object to array from for loop properly in JavaScript?如何在 JavaScript 中正确地将对象从 for 循环推送到数组？
【发布时间】：2016-04-13 14:52:19
【问题描述】：

我想通过for循环创建一个包含对象的数组但是有一个问题，我想要的形状如下：

[ 
  { data: 'apple', label: 'Fruits'  },
  { data: 'banana', label: 'Fruits' },
  { data: 'mango', label: 'Fruits'  } 
]

所以我尝试了以下方式，但它无法正常工作。

var arr = [];
obj = {};
var fruits = ['banana', 'apple', 'mango'];
var label = 'Fruits';

for (var i=0; i<fruits.length; i++){
    obj['data'] = fruits[i];
    obj['label'] = label;
    arr.push(obj);
}

console.log(arr);

结果只是推送了同一个对象。

[
  { data: 'apple', label: 'Fruits' },
  { data: 'apple', label: 'Fruits' },
  { data: 'apple', label: 'Fruits' } 
]

这是因为更紧密的功能吗？我怎样才能使它好起来？

【问题讨论】：

标签： javascript arrays

【解决方案1】：

这是因为 obj 对象引用了同一个对象，并且在每次迭代中都会更新。

循环内引用了相同的对象obj

将对象声明移动到循环内以在每次迭代中创建一个新对象。

for(var i = 0; i < fruits.length; i++) {
    var obj = {}; // <---- Move declaration inside loop

    obj['data'] = fruits[i];
    obj['label'] = label;
    arr.push(obj);
}

var arr = [];
var fruits = ['banana', 'apple', 'mango'];
var label = 'Fruits';

for(var i = 0; i < fruits.length; i++) {
    var obj = {};
    obj['data'] = fruits[i];
    obj['label'] = label;
    arr.push(obj);
}

console.log(arr);

避免这种情况的一种简单方法是使用 Array#map 从旧数组创建新数组。

var arr = fruits.map(fruit => ({
    data: fruit,
    label: label
}));

var arr = [],
    fruits = ['banana', 'apple', 'mango'],
    label = 'Fruits';

var arr = fruits.map(fruit => ({
    data: fruit,
    label: label
}));
console.log(arr);

【讨论】：

【解决方案2】：

你总是覆盖同一个对象。

你需要在 for 行之后

obj = {};

用于创建空对象

var arr = [],
    obj,
    fruits = ['banana', 'apple', 'mango'],
    label = 'Fruits',
    i;

for (i = 0; i < fruits.length; i++){
    obj = {}; // <----- new Object

    obj['data'] = fruits[i];
    obj['label'] = label;
    arr.push(obj);
}
 
document.write('<pre>' + JSON.stringify(arr, 0, 4) + '</pre>');

更短的方法是使用Array#map()

var arr = [], 
    fruits = ['banana', 'apple', 'mango'],
    label = 'Fruits';

arr = fruits.map(function (a) {
    return { data: a, label: label };
});

document.write('<pre>' + JSON.stringify(arr, 0, 4) + '</pre>');

【讨论】：

第一个obj = {}是没用的吧？
@isvforall，在哪里，在哪里？

【解决方案3】：

你应该在循环内创建新对象obj，你总是引用同一个对象。

var arr = [];
var fruits = ['banana', 'apple', 'mango'];
var label = 'Fruits';

for (var i = 0; i < fruits.length; i++) {
    var obj = {};
    obj['data'] = fruits[i];
    obj['label'] = label;
    arr.push(obj);
}

【讨论】：