遍历数组对象时匹配元素的更优方案及forEach返回值问题

为什么你的代码返回undefined？ #

forEach 本质是用来遍历数组执行操作的，它本身不会返回任何值（固定返回undefined）。你在回调里写的return book.color，只是结束当前这一轮的回调函数，根本不会把值传递给外面的color变量，所以最终返回的自然是undefined。

更高效的实现方式 #

推荐：用Array.find() #

find()会遍历数组，一旦找到第一个符合条件的元素就立刻返回它，同时停止遍历（不用像forEach那样走完整个数组），效率更高：

function getBookColor(bookList, userSelectedBook) {
  const matchedBook = bookList.find(book => book.id === userSelectedBook.id);
  // 处理找不到对应书籍的情况，避免报错
  return matchedBook ? matchedBook.color : undefined;
}

备选：用Array.findIndex() #

如果需要先拿到匹配元素的索引，再获取颜色，可以用这个方法：

function getBookColor(bookList, userSelectedBook) {
  const matchIndex = bookList.findIndex(book => book.id === userSelectedBook.id);
  return matchIndex !== -1 ? bookList[matchIndex].color : undefined;
}

不推荐：用Array.filter() #

filter()会返回所有符合条件的元素组成的新数组，哪怕只有一个匹配项，也会遍历完整个数组，效率不如上面两种方法：

function getBookColor(bookList, userSelectedBook) {
  const matchedBooks = bookList.filter(book => book.id === userSelectedBook.id);
  return matchedBooks.length ? matchedBooks[0].color : undefined;
}

测试结果 #

调用修改后的函数：

console.log(getBookColor(bookList, userSelectedBook)); // 输出 "red"

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