JavaScript 新功能：findLast() 和 findLastIndex()
作者：CUGGZ
Wenlu Wang 和 Daniel Rosenwasser 關于findLast() 和 findLastIndex() 的 ECMAScript 提案解決了這一問題。
今天來看一個 ECMAScript 提案：findLast() 和 findLastIndex()。
提案原因
在 JavaScript 中，可以通過 find() 和 findIndex() 查找數組中的值。不過，這些方法從數組的開始進行遍歷：
const array = [{v: 1}, {v: 2}, {v: 3}, {v: 4}, {v: 5}];
array.find(elem => elem.v > 3); // {v: 4}
array.findIndex(elem => elem.v > 3); // 3如果要從數組的末尾開始遍歷，就必須反轉數組并使用上述方法。這樣做就需要一個額外的數組操作。
基本使用
幸運的是，Wenlu Wang 和 Daniel Rosenwasser 關于findLast() 和 findLastIndex() 的 ECMAScript 提案解決了這一問題。該提案的一個重要原因就是：語義。
它們的用法和find()、findIndex()類似，只不過是從后向前遍歷數組，這兩個方法適用于數組和類數組。
- findLast() 會返回第一個查找到的元素，如果沒有找到，就會返回 undefined;
- findLastIndex() 會返回第一個查找到的元素的索引。如果沒有找到，就會返回 -1;
const array = [{v: 1}, {v: 2}, {v: 3}, {v: 4}, {v: 5}];
array.findLast(elem => elem.v > 3); // {v: 5}
array.findLastIndex(elem => elem.v > 3); // 4
array.findLastIndex(elem => elem.v > 5); // -1簡單實現
下面來簡單實現一下這兩個方法。
- findLast()
function findLast(arr, callback, thisArg) {
for (let index = arr.length - 1; index >= 0; index--) {
const value = arr[index];
if (callback.call(thisArg, value, index, arr)) {
return value;
}
}
return undefined;
}
const array = [{v: 1}, {v: 2}, {v: 3}, {v: 4}, {v: 5}];
findLast(array, elem => elem.v > 3, array) // {v: 5}
findLast(array, elem => elem.v > 5, array) // -1- findLastIndex()
function findLastIndex(arr, callback, thisArg) {
for (let index = arr.length - 1; index >= 0; index--) {
const value = arr[index];
if (callback.call(thisArg, value, index, arr)) {
return index;
}
}
return -1;
}
const array = [{v: 1}, {v: 2}, {v: 3}, {v: 4}, {v: 5}];
findLastIndex(array, elem => elem.v > 3, array) // 4
findLastIndex(array, elem => elem.v > 5, array) // -1lodash源碼
下面是 lodash 實現這兩個方法的源碼，供大家學習!
- findLast()
import findLastIndex from './findLastIndex.js'
import isArrayLike from './isArrayLike.js'
/**
* This method is like `find` except that it iterates over elements of
* `collection` from right to left.
*
* @since 2.0.0
* @category Collection
* @param {Array|Object} collection The collection to inspect.
* @param {Function} predicate The function invoked per iteration.
* @param {number} [fromIndex=collection.length-1] The index to search from.
* @returns {*} Returns the matched element, else `undefined`.
* @see find, findIndex, findKey, findLastIndex, findLastKey
* @example
*
* findLast([1, 2, 3, 4], n => n % 2 == 1)
* // => 3
*/
function findLast(collection, predicate, fromIndex) {
let iteratee
const iterable = Object(collection)
if (!isArrayLike(collection)) {
collection = Object.keys(collection)
iteratee = predicate
predicate = (key) => iteratee(iterable[key], key, iterable)
}
const index = findLastIndex(collection, predicate, fromIndex)
return index > -1 ? iterable[iteratee ? collection[index] : index] : undefined
}
export default findLast
- findLastIndex()
import baseFindIndex from './.internal/baseFindIndex.js'
import toInteger from './toInteger.js'
/**
* This method is like `findIndex` except that it iterates over elements
* of `collection` from right to left.
*
* @since 2.0.0
* @category Array
* @param {Array} array The array to inspect.
* @param {Function} predicate The function invoked per iteration.
* @param {number} [fromIndex=array.length-1] The index to search from.
* @returns {number} Returns the index of the found element, else `-1`.
* @see find, findIndex, findKey, findLast, findLastKey
* @example
*
* const users = [
* { 'user': 'barney', 'active': true },
* { 'user': 'fred', 'active': false },
* { 'user': 'pebbles', 'active': false }
* ]
*
* findLastIndex(users, ({ user }) => user == 'pebbles')
* // => 2
*/
function findLastIndex(array, predicate, fromIndex) {
const length = array == null ? 0 : array.length
if (!length) {
return -1
}
let index = length - 1
if (fromIndex !== undefined) {
index = toInteger(fromIndex)
index = fromIndex < 0
? Math.max(length + index, 0)
: Math.min(index, length - 1)
}
return baseFindIndex(array, predicate, index, true)
}
export default findLastIndex
可用性
該提案目前處于第 3 階段，提案地址：https://github.com/tc39/proposal-array-find-from-last
此外，Lodash 和 Ramda 等庫為數組提供了findLast() 和 findLastIndex() 操作。
目前，在 Safari 15.4 中已經支持了這兩個方法。期待更多瀏覽器支持這兩個方法!
責任編輯：武曉燕
來源：
前端充電寶
