将不含check类的DOM元素存入数组统计长度结果不符如何解决

问题根源 #

1. 你错误使用了Array.filter()方法，该方法本身会返回符合判定条件的新数组，无需额外声明空数组手动推入元素。
2. 你看到的1 2 3是遍历过程中的中间长度值：你每次往数组里推入元素时都会打印长度，自然会逐次累加，不是遍历结束后的最终统计结果。

修复方案 #

方案1（推荐，正确使用filter特性）

直接用filter生成符合条件的数组，直接取其长度即可：

const countUnactiveList = () => {
  const list = [...todoList.children];
  // 筛选所有不带check类的元素，生成新数组
  const unactiveList = list.filter(child => !child.classList.contains('check'));
  // 最终统计长度
  console.log(unactiveList.length);
  return unactiveList.length;
}

方案2（保留原逻辑，仅调整打印时机）

如果你要保留手动推入数组的写法，把打印语句挪到遍历结束后即可，同时建议把不需要返回值的遍历逻辑替换为forEach更符合语义：

const countUnactiveList = () => {
  let list = [...todoList.children];
  let listArr = [];
  
  list.forEach(child => {
    if(!child.classList.contains('check')) {
      console.log(child);
      listArr.push(child); 
    }
  });
  // 遍历完成后打印最终长度
  console.log(listArr.length);
  return listArr.length;
}

补充注意 #

如果todoList.children中包含非列表项的其他子节点，可在筛选条件中补充节点类型判断，避免统计到多余元素：
list.filter(child => child.nodeName === 'LI' && !child.classList.contains('check'))

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