JavaScript 数组 findLast() 方法

JavaScript findLast() 语法

findLast() 是 JavaScript 数组的一个方法，它用于找出数组中满足测试函数的最后一个元素。

findLast() 会从数组的末尾（右侧）开始向前（左侧）查找。如果能找到一个元素使得回调函数返回 true，则 findLast() 会立即停止迭代并返回该元素的值。如果找不到元素，则返回 undefined。

语法：

arr.findLast(callbackFn, thisArg)

说明：

findLast() 方法接收以下 2 个参数。

• callbackFn（必选）：是一个回调函数，所有数组元素都会 “从右到左” 依次执行该函数。
• thisArg（可选）：回调函数 this 的值，默认值为 undefined。该参数一般不需要手动设置。

callbackFn 这个回调函数的形式如下：

function (element, index, array) {
    ……
}

callbackFn 回调函数只接收以下 3 个参数。

• element（必选）：当前处理的数组元素。
• index（可选）：当前处理的数组元素的索引。
• array（可选）：当前操作的数组。

findLast() 会访问数组中的所有索引，包括空槽元素（即没有值的数组元素）。对于空槽元素，callbackFn 接收到的 element 值为 undefined。

findLast() 一旦找到满足条件的元素就会停止遍历，这在处理大型数组或需要快速查找最后一个匹配项时非常高效。

JavaScript findLast() 摘要

JavaScript findLast() 示例

接下来，我们通过几个简单的例子来讲解一下 JavaScript findLast() 方法是如何使用的。

示例 1：简单数组使用 findLast()

const arr = [3, 9, 1, 12, 50, 21];
const result = arr.findLast(function(element) {
    return element > 10;
});
console.log(result);

运行结果如下。

21

分析：

在这个例子中，findLast() 方法用于找出最后一个大于 10 的数组元素，也就是 21。需要清楚的是，findLast() 方法本质上是一个高阶函数。所谓的高阶函数，指的是一个函数的参数又是一个函数。

在实际开发中，我们更推荐使用 “箭头函数” 的方式书写 findLast() 的回调函数。下面两种方式是等价的。

// 方式1：不使用箭头函数
const result = arr.findLast(function (element) {
    return element > 10;
});

// 方式2：使用箭头函数
const result = arr.findLast(element => element > 10);

示例 2：复杂数组使用 findLast()

const fruitArr = [
    { name: "apple", price: 8.5 },
    { name: "banana", price: 15.8 },
    { name: "cherry", price: 29.8 }
];
const result = fruitArr.findLast(element => element.price > 20);
console.log(result);

运行结果如下。

{ name: 'cherry', price: 29.8 }

分析：

在这个例子中，数组 fruitArr 的每一个元素都是一个对象。findLast() 方法用于找出最后一个 price 属性大于 20 的数组元素，也就是 {name: "cherry", price: 29.8}。

findLast() 与 findLastIndex()

findLast() 和 findLastIndex() 这两个方法非常相似，它们之间的区别如下。

• findLast()：用于查找数组中符合条件的 “元素”。
• findLastIndex()：用于查找数组中符合条件的 “元素的下标”。

简单点来说，findLast() 查找的是 “元素的值”，findLastIndex() 查找的是 “元素的位置（下标）”。

示例 3：findLast() vs findLastIndex()

const arr = [21, 31, 57, 64, 80];

// 使用findLast()
const resultValue = arr.findLast((element) => {
    return element % 2 === 0;
});
console.log(resultValue);

// 使用findLastIndex()
const resultIndex = arr.findLastIndex((element) => {
    return element % 2 === 0;
});
console.log(resultIndex);

运行结果如下。

80
4

4 种方法总结

find()、findIndex()、findLast()、findLastIndex() 这 4 种方式一看就是 “亲兄弟”，它们都是通过回调函数来找出元素或下标。很多小伙伴都会把它们搞混，下面总结对比一下。