Javascript：forEach（）循环以填充数组-封闭问题

Question

假设我们有一个对象数组，例如：

var fruits = [ {name:"banana", weight:150},{name:"apple", weight:95},{name:"orange", weight:160},{name:"kiwi", weight:80} ];

我想用重量大于100的“水果”数组中的项填充“ heavy_fruits”数组。这是我的代码：

var heavy_fruits = [];
myfruit = {};

fruits.forEach(function(item,index) {
  if ( item.weight > 100 ) { 
    myfruit ["name"] = item.name;
    myfruit ["weight"] = item.weight;
  }

heavy_fruits.push(myfruit);
});

但是显示：名称：“ orange”，重量：160名称：“ orange”，重量：160名称：“ orange”，重量：160名称：“ orange”，重量：160

我知道这是混合使用闭包和循环的问题...但是我读了一篇文章（ http://zsoltfabok.com/blog/2012/08/javascript-foreach/ ）解释说，我会避免使用forEach循环，而不是经典的for循环。

我知道我可以使用filter（）等数组方法，但我是故意问这个问题的，因为我实际上遇到了一个更大的函数的麻烦，而我在这里无法公开...所以我试图总结和简化我的问题描述为“水果”。

Answer 1

var heavy_fruits = [];
myfruit = {}; // here's your object

fruits.forEach(function(item,index) {
    if ( item.weight > 100 ) { 
        myfruit ["name"] = item.name;
        myfruit ["weight"] = item.weight; // you modify it's properties
    }

    heavy_fruits.push(myfruit); // you push it to the array
});

您最终得到一个数组[myfruit, myfruit, myfruit, myfruit] 。

现在，如果您在代码中的任何位置修改myfruit ，则每次myfruit该更改都将可见。 为什么？

因为您正在修改对对象的引用 。 在此示例中，数组仅存储对象的副本。 而且，如果您更改其中之一，则每一个都会更改，因为它们都是参考。

要在每次迭代中解决此问题，您应该先创建一个新对象，然后对它进行一些处理。

顺便说一句，事实上，您的if可能就是这样：

if ( item.weight > 100 ) { 
    heavy_fruits.push(item); // if `item` only has `name` and `weight` properties
}

Answer 2

 fruits.forEach(function (item, index) {
  if (item.weight > 100) {
    myfruit = {};
    myfruit["name"] = item.name;
    myfruit["weight"] = item.weight;
    heavy_fruits.push(myfruit);
  }
}); 

Answer 3

较短的将使用过滤器

var heavy_fruits = fruits.filter(x => x.weight > 100);

但是，如果您确实想使用forEach，请按照这种方式

var heavy_fruits = [];
fruits.forEach(x => {if(x.weight > 100) heavy_fruits.push(x)} );