JavaScript读取undefined的length属性报错及数组过滤函数问题排查

存在的核心思路问题 #

• 边遍历数组边调用splice删除元素，会导致数组长度动态变化，索引对应关系错乱，极易出现越界访问
• 元素匹配判断读取的是原数组arr的元素，删除操作针对的是复制后的newArr，第一次删除操作执行后，两个数组的索引完全错位，匹配逻辑本身就不成立

报错的具体触发过程 #

你遇到的TypeError: Cannot read properties of undefined (reading 'length')错误，是在内层循环读取newArr[i].length时触发的，newArr[i]为undefined，原因如下：

1. 初始状态下你调用的测试用例传入的数组长度为4，newArr初始复制后长度也为4，外层循环从i=0开始遍历
2. 当某次循环中匹配到目标元素，执行newArr.splice(i, 1)后，newArr的长度会直接减1，原i索引之后的所有元素都会向前移动一位
3. 此时外层循环的计数器i不会回退，还会继续递增，同时内层循环还在继续执行，当i的数值已经大于等于删除后的newArr长度时，newArr[i]就会返回undefined
4. 内层循环的判断条件x< newArr[i].length尝试读取undefined的length属性，就触发了对应的报错

举个直观的运行片段示例：
当i遍历到最后一位（初始长度4时i=3），匹配到元素执行删除后，newArr长度变为3，此时内层循环还未结束，继续执行判断条件时访问newArr[3].length，newArr[3]不存在，直接触发报错。

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