如何使用JavaScript移除数组中指定项及其后续所有元素

给定如下JavaScript数组：

const data =  [
    {id: 1, name: 'Gill'},
    {id: 2, name: 'Gill2'},
    {id: 3, name: 'Gill3'},
    {id: 4, name: 'Gill4'},
    {id: 5, name: 'Gill5'}
]

需要实现filterID(targetId, data)函数，调用filterID("4", data)时，返回仅包含id小于4的元素的新数组（移除所有id大于等于目标值的元素）。

解决方案1：使用Array.filter实现 #

这是最直观的实现方式，通过遍历数组筛选符合条件的元素：

function filterID(targetId, arr) {
  // 将字符串类型的目标ID转为数字，避免类型比较逻辑错误
  const targetNum = Number(targetId);
  // 过滤出id小于目标值的元素，返回新数组
  return arr.filter(item => item.id < targetNum);
}

解决方案2：利用排序特性优化性能（数组id递增时适用） #

如果你的数组是按id从小到大排序的，可以用findIndex定位第一个需要移除的元素位置，再截取前面的部分，这种方法不需要遍历整个数组，性能更优：

function filterID(targetId, arr) {
  const targetNum = Number(targetId);
  // 找到第一个id大于等于目标值的元素索引
  const cutIndex = arr.findIndex(item => item.id >= targetNum);
  // 若所有元素都符合条件，返回原数组的浅拷贝；否则截取到目标索引前的元素
  return cutIndex === -1 ? [...arr] : arr.slice(0, cutIndex);
}

关键注意点 #

必须对传入的targetId做类型转换——因为调用时传入的是字符串（比如"4"），而数组元素的id是数字类型，直接用字符串和数字比较会出现逻辑错误（例如"10" < 5会被判定为true，因为字符串是按字符编码逐位比较的）。

测试结果 #

调用console.log(filterID("4", data))，会得到预期输出：

[
    {id: 1, name: 'Gill'},
    {id: 2, name: 'Gill2'},
    {id: 3, name: 'Gill3'}
]

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