JavaScript中如何保留列表指定位置元素并删除其余元素？

假设我获取了一个元素列表a = document.getElementsByTagName('li')，希望删除列表中除位置keep = [3, 5, 8]外的所有元素。一开始我想用for循环实现，跳过需要保留的位置：

for (i = 0; i < a.length; i++) {
  if (!keep.includes(i)) {
    a[i].remove();
  }
}

但这里有个问题——从a中删除元素时，a是动态的HTMLCollection，长度会实时变化，导致后续元素的索引偏移，最终逻辑出错。

我自己想到了一个修正偏移的方案：

shift = 0;
len = a.length;
for (i = 0; i < len; i++) {
  if (!keep.includes(i)) {
    a[i-shift].remove();
    shift++;
  }
}

更优雅的实现方式 #

1. 转静态数组遍历

把动态的HTMLCollection转成普通数组，遍历过程中数组不会因为元素删除而变化，索引始终准确：

const elements = Array.from(document.getElementsByTagName('li'));
const keep = [3, 5, 8];
elements.forEach((el, index) => {
  if (!keep.includes(index)) {
    el.remove();
  }
});

2. 倒序遍历动态集合

倒着遍历的话，删除后面的元素不会影响前面元素的索引，完全避开偏移问题：

const a = document.getElementsByTagName('li');
const keep = [3, 5, 8];
for (let i = a.length - 1; i >= 0; i--) {
  if (!keep.includes(i)) {
    a[i].remove();
  }
}

3. 用Set优化查找性能

如果keep里的元素很多，includes的查找效率会很低，转成Set后查找变成O(1)，性能更好：

const elements = Array.from(document.getElementsByTagName('li'));
const keepSet = new Set([3, 5, 8]);
elements.forEach((el, index) => {
  if (!keepSet.has(index)) {
    el.remove();
  }
});

内容的提问来源于stack exchange，提问作者chausies