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

Juntae 发表于 Dev

俊太

我想通过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' } 
]

这是因为功能更紧密吗？我怎样才能做好呢？

杜沙尔

之所以发生这种情况，是因为该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);

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。