JavaScript数组map方法返回undefined元素的原因咨询

你对Array.prototype.map的运行逻辑存在认知偏差，核心规则如下：

• map会遍历原数组的所有元素，不会中途终止执行，最终返回的新数组长度和原数组完全相等，原数组的每个索引位置，在新数组里都有对应的映射值，不存在“跳过某个位置不处理”的情况
• JS中，只要函数没有写明确的return语句返回值，函数的默认返回值就是undefined

对应你给出的测试代码：

const numbers = [1, 2, 3, 4];
const filteredNumbers = numbers.map((num, index) => {
  if (index < 3) {
    return num;
  }
});

// filteredNumbers is [1, 2, 3, undefined]

实际执行过程：

1. 原数组numbers长度为4，传入map的回调函数会被依次调用4次，分别处理索引0到3的四个元素
2. 处理索引0、1、2的元素时，index < 3的判断条件成立，回调显式返回对应元素值，因此新数组前三位分别是1、2、3
3. 处理索引3的元素（值为4）时，if条件不成立，回调函数没有执行到return语句，没有显式返回值，因此默认返回undefined，被填入新数组的第四位，最终得到你看到的运行结果

补充说明：如果你的需求是筛选出符合条件的元素、得到长度小于原数组的结果，应该使用Array.prototype.filter而非map。filter会根据回调返回的布尔值判断是否保留当前元素，不符合条件的元素不会被加入新数组，不会出现占位的undefined。

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