如何使用循环在Javascript中从数组中删除多个元素

Question

所以，我有一个包含多个值的javascript数组：

var keymap = {'name': 'foobaz', 
              'mappings': [{'id': 1, 'key': 'b'},
                          {'id': 2, 'key': 'c'},
                          {'id': 3, 'key': 'd'},
                          {'id': 1, 'key': 'e'},
                          {'id': 10, 'key': 'f'},
                          {'id': 7, 'key': 'g'},
                          {'id': 1, 'key': 'h'}]
}

我希望移除所有键为“b”的条目。请注意，这些ID对应于后端ID。我想要做的是删除一些映射（例如，所有“id”为“1”的映射）。

我尝试过以下方法：

for (var i = 0; i < keymap['mappings'].length; i++) {
    if (keymap['mappings'][i]['id'] === id_to_match) {
        keyboard_map['mappings'].splice(i, 1);
    }
}

然而，切片操作会在原地改变数组的索引，因此现在i将不再指向正确的索引点（因为任何更高的索引现在都将是i-n，其中n是之前切片的次数）。

实现这个操作的正确方法是什么？

- jvc26

Answer 1

一个简单的方法是递减迭代器（这个方法有效，因为你每次迭代都要读取长度 - 所以要确保避免缓存长度）。

for (var i = 0; i < keymap['mappings'].length; i++) {
 if (keymap['mappings'][i]['id'] === id_to_match) {
    keyboard_map['mappings'].splice(i, 1);
    i--;
 }
}

- Travis J

Answer 2

我会使用 filter 方法：

var id_to_remove = 1;
keymap.mappings = keymap.mappings.filter(function(item) {
    return item.id !== id_to_remove;
}));

请注意，除了使用filter方法之外，即使使用普通的for循环，从头开始创建一个新数组而不是多次改变当前数组，对于性能来说也更好。 基本上是这样的：

var id_to_remove = 1;
var filtered = [];
for (var i = 0, item; item = keymap.mappings[i++];) {
    if (item.id !== id_to_remove)
        filtered.push(item);
}
keymap.mappings = filtered;

当然，如果可用的话使用原生的filter会更好，这里我们只是模拟相同的行为。

- ZER0

Answer 3

for (var i = 0; i < keymap['mappings'].length; i++) {
    if (keymap['mappings'][i]['id'] === id_to_match) {
        keyboard_map['mappings'].splice(i--, 1);
    }
}

- Nicolas Straub

Answer 4

你可以反向遍历数组，这样切割就不会影响后续的循环迭代：

for (var i = keymap['mappings'].length - 1; i >= 0; i--) {
    if (keymap['mappings'][i]['id'] === id_to_match) {
        keyboard_map['mappings'].splice(i, 1);
    }
}

- Scott Mermelstein

Answer 5

你可以像这样使用“filter”方法：

keymap.mappings = keymap.mappings.filter(function(element){
    return element.id != 1;
});

这意味着“仅保留ID不等于1的元素”，或者说“删除ID等于1的元素”。

除了IE8之外，每个浏览器都实现了它。 http://kangax.github.io/es5-compat-table/#Array.prototype.filter

- VladimirKosmala