JavaScript内核与高级编程之：`JavaScript`的`Array.prototype.findLast()`：其在数组搜索中的新特性。

各位观众，欢迎来到今天的JavaScript内核与高级编程小讲堂！今天咱们聊点儿新鲜的——Array.prototype.findLast()，这玩意儿可是数组搜索家族里的一位新成员，让咱们看看它能带来什么惊喜。

开场白：数组搜索的那些事儿

在JavaScript的世界里，数组这东西，那是相当常见。咱们经常需要在数组里找点儿什么，比如找到第一个大于某个值的元素，或者找到符合某种条件的元素。以前，咱们可能会用for循环，或者Array.prototype.find()之类的。但现在，findLast()来了，它要做什么呢？简单来说，就是从数组的末尾开始搜索。

find()的老朋友，findLast()的新面孔

Array.prototype.find()，各位肯定不陌生。它从数组的开头开始，找到第一个符合条件的元素，然后就停止搜索。如果没找到，就返回undefined。

const numbers = [5, 12, 8, 130, 44];

const found = numbers.find(element => element > 10);

console.log(found); // 输出: 12

findLast()呢？它就像find()的逆向版本。它从数组的末尾开始，找到第一个符合条件的元素。

const numbers = [5, 12, 8, 130, 44];

const found = numbers.findLast(element => element > 10);

console.log(found); // 输出: 130

看到区别了吧？find()找到的是12，而findLast()找到的是130。

findLast()的语法结构

findLast()的语法很简单，和find()几乎一模一样：

Array.prototype.findLast(callbackFn[, thisArg])

• callbackFn：这是一个回调函数，用来测试数组中的每个元素。它接受三个参数：
  • element：当前正在处理的元素。
  • index (可选)：当前元素的索引。
  • array (可选)：调用findLast()的数组本身。
  • callbackFn 应当返回一个真值来指示找到了匹配的元素。 一旦找到，函数将返回该元素的值并停止迭代；否则，返回 undefined。
• thisArg (可选)：执行callbackFn时用作this的值。

findLast()的使用场景：举几个栗子

findLast()在某些情况下会非常有用。比如，你需要找到数组中最后一个满足特定条件的元素。以下是一些例子：

1. 查找最后一个符合条件的订单：

   假设你有一个订单数组，每个订单都有一个status属性。你需要找到最后一个状态为"completed"的订单。

   const orders = [
     { id: 1, status: 'pending' },
     { id: 2, status: 'completed' },
     { id: 3, status: 'pending' },
     { id: 4, status: 'completed' },
   ];
   
   const lastCompletedOrder = orders.findLast(order => order.status === 'completed');
   
   console.log(lastCompletedOrder); // 输出: { id: 4, status: 'completed' }

2. 查找最后一个小于某个值的元素：

   假设你有一个数字数组，你需要找到最后一个小于10的数字。

   const numbers = [12, 5, 8, 15, 3];
   
   const lastLessThanTen = numbers.findLast(number => number < 10);
   
   console.log(lastLessThanTen); // 输出: 3

3. 查找最后一个包含特定字符的字符串：

   假设你有一个字符串数组，你需要找到最后一个包含字母"a"的字符串。

   const strings = ['banana', 'apple', 'orange', 'grape'];
   
   const lastWithA = strings.findLast(str => str.includes('a'));
   
   console.log(lastWithA); // 输出: 'grape'

4. 日志分析场景：

   在一个日志记录数组中，你可能需要查找最后一个错误日志。

   const logs = [
       { timestamp: '2023-10-26T10:00:00', level: 'info', message: 'Application started' },
       { timestamp: '2023-10-26T10:05:00', level: 'warning', message: 'Low memory' },
       { timestamp: '2023-10-26T10:10:00', level: 'error', message: 'Database connection failed' },
       { timestamp: '2023-10-26T10:15:00', level: 'info', message: 'User login successful' }
   ];
   
   const lastErrorLog = logs.findLast(log => log.level === 'error');
   
   console.log(lastErrorLog); // 输出: { timestamp: '2023-10-26T10:10:00', level: 'error', message: 'Database connection failed' }

findLastIndex()：找到索引也重要

和find()对应的是findIndex()一样，findLast()也有一个小伙伴，叫做findLastIndex()。它不是返回元素本身，而是返回最后一个符合条件的元素的索引。如果没找到，就返回-1。

const numbers = [5, 12, 8, 130, 44];

const lastIndex = numbers.findLastIndex(element => element > 10);

console.log(lastIndex); // 输出: 4 (44 的索引)

findLast() vs. find()：选择哪个？

什么时候用findLast()，什么时候用find()呢？这取决于你的需求。

• 如果你需要找到第一个符合条件的元素，用find()。
• 如果你需要找到最后一个符合条件的元素，用findLast()。

简单来说，如果数组中只有一个满足条件的元素，用哪个都一样。但如果数组中有多个满足条件的元素，那么find()会返回第一个，而findLast()会返回最后一个。

性能考量：谁更快？

从理论上讲，findLast()和find()的性能应该差不多。它们都是线性搜索，最坏的情况下需要遍历整个数组。但是，在某些情况下，findLast()可能会更快。

比如，如果你知道符合条件的元素很可能出现在数组的末尾，那么用findLast()可以更快地找到目标元素，因为它不需要从头开始搜索。

兼容性问题：别踩坑

findLast()和findLastIndex()是比较新的特性，并不是所有的浏览器都支持。截至我写这篇文章时，它们已经被 Chrome 97+, Edge 97+, Firefox 91+, Safari 15.2+ 和 Node.js 18+ 支持。

如果你的目标用户使用的浏览器版本比较老，那么你需要使用polyfill来提供兼容性。你可以使用core-js库来polyfill这些方法。

// 引入 core-js 的 findLast 和 findLastIndex polyfill
import 'core-js/features/array/find-last';
import 'core-js/features/array/find-last-index';

// 现在你就可以在旧版本浏览器中使用 findLast 和 findLastIndex 了
const numbers = [5, 12, 8, 130, 44];

const found = numbers.findLast(element => element > 10);

console.log(found); // 输出: 130

与filter的比较：不同的搜索策略

你可能会想，findLast()和filter()有什么区别？它们都可以用来查找数组中的元素。

• findLast()：找到最后一个符合条件的元素，然后就停止搜索。返回的是一个元素。
• filter()：找到所有符合条件的元素，然后返回一个新的数组，包含所有符合条件的元素。

所以，如果你只需要找到一个元素，那么用findLast()更高效。如果你需要找到所有符合条件的元素，那么用filter()。

代码实战：一个更复杂的例子

让我们来看一个更复杂的例子，展示findLast()的威力。

假设你有一个产品数组，每个产品都有一个name、price和category属性。你需要找到最后一个价格低于100且属于"electronics"类别的产品。

const products = [
  { name: 'Laptop', price: 1200, category: 'electronics' },
  { name: 'Headphones', price: 80, category: 'electronics' },
  { name: 'T-shirt', price: 20, category: 'clothing' },
  { name: 'Smartwatch', price: 200, category: 'electronics' },
  { name: 'Keyboard', price: 75, category: 'electronics' },
];

const lastCheapElectronics = products.findLast(product => product.price < 100 && product.category === 'electronics');

console.log(lastCheapElectronics); // 输出: { name: 'Keyboard', price: 75, category: 'electronics' }

总结：findLast()的价值

Array.prototype.findLast()是JavaScript数组搜索的一个有用的补充。它可以让你从数组的末尾开始搜索，找到最后一个符合条件的元素。在某些情况下，它可以比find()更高效。但是，你需要注意兼容性问题，并根据你的具体需求选择合适的搜索方法。

表格总结：各种搜索方法的对比

方法	搜索方向	返回值	找到多个元素？	兼容性	用途
find()	从头开始	第一个元素	否	广泛	查找第一个符合条件的元素
findIndex()	从头开始	第一个元素的索引	否	广泛	查找第一个符合条件的元素的索引
findLast()	从末尾开始	最后一个元素	否	较新	查找最后一个符合条件的元素
findLastIndex()	从末尾开始	最后一个元素的索引	否	较新	查找最后一个符合条件的元素的索引
filter()	从头开始	符合条件的数组	是	广泛	查找所有符合条件的元素

展望未来：JavaScript的进化

JavaScript一直在不断进化，新的特性层出不穷。findLast()只是其中之一。作为开发者，我们需要不断学习新的知识，掌握新的技能，才能更好地应对未来的挑战。

好了，今天的讲堂就到这里。希望大家有所收获！下次再见！