javascript - 使用 "forEach"有什么问题？

Question

我期望 errorLogArrayList.length 为 3，但结果是 2。

谁能告诉我为什么这段代码不能按我的预期工作以及如何修复它？

代码:

var logArrayList = [
    [1,2,3],
    [1,2,"error"],
    [1,2,"error"],
    [1,2,"error"]
]

var errorLogArrayList = [];

console.log(logArrayList);
console.log("======================");


logArrayList.forEach(function(logArray, index, self) {

    if(logArray[2] === "error") {

        var errorArray = self.splice(index, 1)[0];
        errorLogArrayList.push(errorArray);

    }

}); 

// I expect this value to be 3, but the result is 2.
console.log("errorLogArrayList.length is " +  errorLogArrayList.length)

console.log(errorLogArrayList);

console.log("======================");

// I expect this value to be 1, but the result is 2.
console.log("logArrayList.length is " + logArrayList.length);
console.log(logArrayList);

日志:

[ [ 1, 2, 3 ],
  [ 1, 2, 'error' ],
  [ 1, 2, 'error' ],
  [ 1, 2, 'error' ] ]
======================
// I expect this value to be 3, but the result is 2.
errorLogArrayList.length is 2
[ [ 1, 2, 'error' ], [ 1, 2, 'error' ] ]
======================
//I expect this value to be 1, but the result is 2.
logArrayList.length is 2
[ [ 1, 2, 3 ], [ 1, 2, 'error' ] ]

Answer 1

你可以做 filter操作:

var errorLogArrayList = logArrayList.filter(function(array) {
  return array[2] === 'error';
});

logArrayList = logArrayList.filter(function(array) {
  return array[2] !== 'error';
});

不幸的是，这需要一些重复的迭代。您可以使用_.partition from lodash如果你愿意(看起来更干净一点):

var lists = _.partition(logArrayList, function(array) {
  return array[2] === 'error';
});

var errorLogArrayList = lists[0];

logArrayList = lists[1];

您当前方法的问题是您试图跟踪多个状态并同时修改两个数组，这会导致一些数据冲突。 filter 通常更具声明性，它不会改变原始数组，而是返回一个新数组。

编辑

想要按照 @zerkms 在评论中的建议添加一个带有 reduce 的方法:

var lists = logArrayList.reduce(function(agg, curr) {
  if(curr[2] === 'error') {
    agg[0] = (agg[0] || []).concat([curr]);
  } else {
    agg[1] = (agg[1] || []).concat([curr]);
  }

  return agg;
}, []);

这与分区示例的作用相同。