调用含For...of遍历的函数后控制台输出末尾出现undefined的原因

嘿，这个问题其实挺典型的，我来给你拆解清楚：

首先看你的代码片段：

function findRoutes(routes) {
  for (let value of routes) {
    console.log(value)
  }
}

console.log(findRoutes([["MNL", "TAG"], ["CEB", "TAC"], ["TAG", "CEB"], ["TAC", "BOR"]]))

问题根源 #

1. 你的findRoutes函数内部确实会循环遍历传入的数组，逐行打印每一项——这就是你看到的前四行输出的由来。
2. 但JavaScript里的函数如果没有显式声明return语句，执行完毕后默认会返回undefined。
3. 你把整个findRoutes(...)函数调用包裹在了console.log()里，这就等于让控制台打印这个函数调用的返回值——也就是默认的undefined，所以最后会多出来这一行。

解决办法 #

如果你不想看到这个多余的undefined，有两种简单的处理方式：

方式一：直接调用函数，不用包在console.log里

findRoutes([["MNL", "TAG"], ["CEB", "TAC"], ["TAG", "CEB"], ["TAC", "BOR"]])

这样函数内部的console.log会输出每一项，而不会额外打印函数的返回值。

方式二：让函数显式返回内容（如果需要用console.log输出结果）

如果你确实想通过外层的console.log输出结果，可以修改函数，让它返回你需要的内容：

function findRoutes(routes) {
  const routeList = [];
  for (let value of routes) {
    console.log(value); // 依然保留逐行打印
    routeList.push(value);
  }
  return routeList; // 显式返回数组
}

console.log(findRoutes([["MNL", "TAG"], ["CEB", "TAC"], ["TAG", "CEB"], ["TAC", "BOR"]]))

这样外层的console.log会打印整个路由数组，而不是undefined。

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