自定义List类filter方法返回数组出现多余逗号的原因咨询

你遇到的是JavaScript**稀疏数组（Sparse Array）**的问题，那些多余的逗号代表数组中的空槽（empty slots）——也就是数组中存在未被赋值的索引位置，这些位置既不是undefined，也不是任何有效值，只是“不存在”的索引。

问题根源分析 #

从你的代码片段来看，推测你在循环时错误地递增了新数组的索引indexNewList，无论当前元素是否通过过滤条件。举个例子：
假设原数组是[1,2,3,4,5]，过滤条件是取奇数：

• 当处理元素2（不满足条件）时，你依然让indexNewList加1，导致newList[1]没有被赋值；
• 后续处理元素3时，直接赋值给newList[2]，跳过了索引1，于是数组中就出现了空槽；
• 最终数组就变成了[1, <empty>, 3, <empty>, 5]，打印时就会显示为[1,,3,,5]。

修复方案 #

有两种简单的方式解决这个问题：

1. 修正索引递增逻辑

只有当元素通过过滤条件时，才递增新数组的索引：

class List {
  constructor(values = []) {
    this._list = values;
  }

  filter(func) {
    let newList = [];
    let indexList = 0;
    let indexNewList = 0;
    // 建议用数组长度判断循环，避免原数组含undefined时提前终止
    while (indexList < this._list.length) {
      const currentItem = this._list[indexList];
      if (func(currentItem)) {
        newList[indexNewList] = currentItem;
        indexNewList++; // 仅满足条件时递增新数组索引
      }
      indexList++; // 原数组索引每次都递增
    }
    return newList;
  }
}

2. 用push()简化逻辑（更推荐）

直接使用数组的push()方法，完全不需要手动管理索引，从根源避免空槽：

class List {
  constructor(values = []) {
    this._list = values;
  }

  filter(func) {
    const newList = [];
    for (const item of this._list) {
      if (func(item)) {
        newList.push(item); // 自动追加到数组末尾，无空槽风险
      }
    }
    return newList;
  }
}

补充说明 #

JavaScript的数组本质上是键为数字的特殊对象，空槽意味着对应的数字键不存在。比如newList[1]不存在时，Object.keys(newList)只会返回["0","2","4"]，这和数组中存undefined是不同的——如果是undefined，键依然存在，打印时会显示[1,undefined,3,...]。

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