我想通过 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
object 引用同一个对象,并且在每次迭代中都会更新。
同一物体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 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/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);
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)