angular.forEach 中的 OR (||) 运算符不起作用？

Question

我有如下的json数组，需要通过一定的条件去掉一些：

var data = [
             {data1: "aaa", data2: "bbb", data3: "ccc"},  // First
             {data1: "ddd", data2: "eee", data3: "fff"},  // Second
             {data1: "ggg", data2: "hhh", data3: "iii"},  // Third
             {data1: "jjj", data2: "eee", data3: "lll"}   // Fourth
           ];
angular.forEach(data, (item, i) => {
  if (item.data2 == 'eee' || item.data3 == 'iii') {
    data.splice(i, 1);
  }
});
console.log(data);

在上述情况下，我需要从数据数组中删除第二个（data2 有“eee”）、第三个（data3 有“iii”）和第四个（data2 是“eee”）对象。 但是第三个对象并没有被拼接，而是保留在数据数组中。

我可以以这种方式使用 OR (||) 运算符吗？如果不是，使用多个条件从数组中删除元素的正确方法是什么？

我已经为这个问题摸索了好几个小时，但也许我错过了一些东西。

Answer 1

使用filter 而不是splice。

splice 与项目的索引相关，因此当您在循环中删除项目时，索引号将变为无效。

var data = [
             {data1: "aaa", data2: "bbb", data3: "ccc"},  // First
             {data1: "ddd", data2: "eee", data3: "fff"},  // Second
             {data1: "ggg", data2: "hhh", data3: "iii"},  // Third
             {data1: "jjj", data2: "eee", data3: "lll"}   // Fourth
           ];

function keepItemCondition(item) {
  return !(item.data2 == 'eee' || item.data3 == 'iii');
}

var filtered = data.filter(keepItemCondition);

console.log(filtered);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

Answer 2

改用过滤器， 使用 splice 时，您可以更改要迭代的数组，该数组是否：

var data = [
             {data1: "aaa", data2: "bbb", data3: "ccc"},  // First
             {data1: "ddd", data2: "eee", data3: "fff"},  // Second
             {data1: "ggg", data2: "hhh", data3: "iii"},  // Third
             {data1: "jjj", data2: "eee", data3: "lll"}   // Fourth
           ];
var filtered = data.filter(function (element) {
    return element.data2 !== 'eee' && element.data3 !== 'iii';
});
console.log(filtered);

Answer 3

在控制台检查输出时，你会看到返回的是一个数组：

[Object, Object]

其中包含

[{'aaa', 'bbb', 'ccc'}, {'ggg', 'hhh', 'iii'}]

这告诉我们您的代码正在删除第二个和第四个数组对象。作为证据，注释掉您的foreach 例程以发现原始数组的完整性得以保留。

为什么？好吧，您的逻辑 OR ( || ) 运算符正在按预期工作！

angular.forEach(data, (item, i) => {
  if (item.data2 == 'eee' || item.data3 == 'iii') {
    data.splice(i, 1);
  }
});

当正在检查的当前对象中的对象项data2 == 'eee' 或data3 == 'iii' 时，您的代码将拼接（换句话说，删除）从i 开始并结束于的元素i 在 data 数组中。这通过您写splice(i, 1) 的事实来表达；例如，您是否写过类似splice(i, 3) 的东西，您会删除从i 开始并以i+2 结束的对象元素。另一种看待方式是说，“splice(i, n) 表示删除从索引 i 开始的 n 元素”。

因此，每次评估比较表达式时，您都在命令当前元素 i 和 only 1 element from i（即i 本身）从 data 数组中删除；当前元素恰好是包含eee 和iii 的objects。如果必须，请遍历您的循环，计数 i 以向自己证明 data[1] 和 data[3] 正在被删除。

如果您在 item data2 == eee 或 item data3 == iii 时询问如何删除对象的特定项目，请考虑以下内容：

var data = [
             {data1: "aaa", data2: "bbb", data3: "ccc"},  // First
             {data1: "ddd", data2: "eee", data3: "fff"},  // Second
             {data1: "ggg", data2: "hhh", data3: "iii"},  // Third
             {data1: "jjj", data2: "eee", data3: "lll"}   // Fourt
           ];
angular.forEach(data, (item, i) => {
  if (item.data2 == 'eee') {
    delete data[i].data2;   
  } 
  else if (item.data3 == 'iii') {
    delete data[i].data3;
  }
});
console.log(data);

返回：

[{'aaa', 'bbb', 'ccc'}, {'ddd', 'fff'}, {'ggg', 'hhh'}, {'jjj, 'lll'}]

JSFiddle 上有一个工作演示。尽管您的 OR ( || ) 表达式确实“有效”，但它并不完全符合您的预期，因为 splice 被用于删除 一个对象 而不是一个项目。因此，我们必须稍微改变一下我们的逻辑。

Answer 4

正如我评论的那样，您的代码不起作用，因为在遍历数组时，如果您删除一个项目，下一个项目将放置在已删除项目的索引中，索引增加一个，并且永远不会评估该项目。

var data = [
  {data1: "aaa", data2: "bbb", data3: "ccc"},  // First
  {data1: "ddd", data2: "eee", data3: "fff"},  // Second
  {data1: "ggg", data2: "hhh", data3: "iii"},  // Third
  {data1: "jjj", data2: "eee", data3: "lll"}   // Fourth
];

// Won't work
for(var i = 0; i < data.length; i++){
  var item = data [i];
  if (item.data2 == 'eee' || item.data3 == 'iii') {
    data.splice(i, 1);
  }
}
console.log(data);

一种解决方案是以反向模式循环。在这种情况下，删除一项不会影响下一项。

var data = [
  {data1: "aaa", data2: "bbb", data3: "ccc"},  // First
  {data1: "ddd", data2: "eee", data3: "fff"},  // Second
  {data1: "ggg", data2: "hhh", data3: "iii"},  // Third
  {data1: "jjj", data2: "eee", data3: "lll"}   // Fourth
];

for(var i = data.length -1; i >= 0; i--)
  if (data[i].data2 == 'eee' || data[i].data3 == 'iii')
    data.splice(i, 1);

console.log(data);

如果你想保持 forEach 循环风格，你可以自己做forEachReverse：

Array.prototype.forEachReverse = function (callback){ 
  var arr = this;
  for(var i = arr.length -1; i >= 0; i--) 
  	callback(arr[i], i, arr);
};


var data = [
  {data1: "aaa", data2: "bbb", data3: "ccc"},  // First
  {data1: "ddd", data2: "eee", data3: "fff"},  // Second
  {data1: "ggg", data2: "hhh", data3: "iii"},  // Third
  {data1: "jjj", data2: "eee", data3: "lll"}   // Fourth
];

data.forEachReverse((item, i)=>{
  if (item.data2 == 'eee' || item.data3 == 'iii') {
    data.splice(i, 1);
  }
});

console.log(data);

正如其他答案所建议的那样，filter 更干净，并且会根据条件过滤您的列表。