在 map 函数中调用 splice答案

【问题标题】：Calling splice inside map function在 map 函数中调用 splice
【发布时间】：2014-06-17 10:34:36
【问题描述】：

我有以下代码：

var a = [{a: 1}, {a: 2}, {a: 3}];
a.map(function (item, index) {
  console.log('call');
  if (index < 1) {
    a.splice(index, 1);
  }
});

但是 call 只打印了两次，而我预计会打印 3 次。我知道splice 搞砸了数组，但是有一些解决方法可以解决这个问题吗？

谢谢！

【问题讨论】：

标签： javascript splice array-splice

【解决方案1】：

制作数组的浅拷贝：

a.slice().map(function (item, index) {

顺便说一句，你应该使用forEach，因为你没有返回任何值。

或者更好的是，您是否考虑过改用filter？

var a = [{a: 1}, {a: 2}, {a: 3}].filter(function (item, index) {
  console.log('call');
  return index >= 1;
});

【讨论】：

对于每个在这个问题的领域中都有相同的行为。
@user232343 如果您使用slice，则不会。但我不确定你想达到什么目的，sn-p 代码的意图相当模糊。

【解决方案2】：

如果您想在迭代时修改数组，那么通常最好使用普通的旧 for 循环，因为您可以控制迭代并纠正您的修改。

如果您的修改只是删除当前元素，那么向后for 循环是最简单的，因为您在删除当前元素时无需进行任何更正。这是一个例子：

var x = [{a: 1}, {a: 2}, {a: 3}];
for (var i = x.length - 1; i >= 0; i--) {
    if (x[i].a === 2) {
        // remove current element
        x.splice(i, 1);
    }
}

如果您不介意创建一个新数组作为迭代的结果，您可以使用其他方法，例如.filter()。

【讨论】：

【解决方案3】：

map 中的回调有第三个参数，它是它自己的数组

var a = [{a: 1}, {a: 2}, {a: 3}];
a.map(function (item, index, a2) {
  console.log('call');
  if (index < 1) {
    a2.splice(index, 1);
  }
});

如果来自https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

map处理的元素范围设置在第一个之前回调的调用。之后附加到数组的元素回调将不会访问对 map 的调用开始。如果存在数组的元素被更改或删除，它们的值被传递 to callback 将是地图访问它们时的值；元素被删除的不会被访问。

【讨论】：