JavaScript新功能介绍之findLast()和findLastIndex()

 更新时间:2022年04月12日 14:31:14   作者:CUGGZ  
最近工作中遇到了一个关于查找数组里面的目标元素的方法,所以下面这篇文章主要给大家介绍了关于JavaScript新功能之findLast() 和findLastIndex()的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下

今天来看一个 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) // -1

lodash源码

下面是 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 中已经支持了这两个方法。期待更多浏览器支持这两个方法!

总结

到此这篇关于JavaScript新功能介绍之findLast()和findLastIndex()的文章就介绍到这了,更多相关JS findLast() 和findLastIndex()内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 一文详解JS与TS的主要区别

    一文详解JS与TS的主要区别

    TypeScript(简称 TS)和JavaScript(简称 JS)都是用于编写Web应用程序的语言,下面这篇文章主要给大家介绍了关于JS与TS的主要区别,需要的朋友可以参考下
    2024-03-03
  • js实现网页倒计时、网站已运行时间功能的代码3例

    js实现网页倒计时、网站已运行时间功能的代码3例

    这篇文章主要介绍了js实现网页倒计时、网站已运行时间功能的代码3例,需要的朋友可以参考下
    2014-04-04
  • 在JavaScript中使用for循环的方法

    在JavaScript中使用for循环的方法

    这篇文章主要介绍了如何在JavaScript中使用for循环,通过使用JavaScript for...in循环,我们可以循环对象的键或属性,在迭代对象属性或进行调试时,它可能很有用,但在迭代数组或对对象进行修改时,应该避免使用for...in循环,需要的朋友可以参考下
    2022-11-11
  • pace.js和NProgress.js两个加载进度插件的一点小总结

    pace.js和NProgress.js两个加载进度插件的一点小总结

    这两个插件都是关于加载进度动画的,今天就和大家一起了解下pace.js和NProgress.js两个加载进度插件的一点小总结,感兴趣的朋友一起看看吧
    2018-01-01
  • js实现京东快递单号查询

    js实现京东快递单号查询

    这篇文章主要为大家详细介绍了js实现京东快递单号查询,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • axios的简单封装以及使用实例代码

    axios的简单封装以及使用实例代码

    一般我们在做一个大型项目的时候,需要用到很多接口时,我们为了方便使用,就把接口封装起来,这篇文章主要给大家介绍了关于axios简单封装以及使用的相关资料,需要的朋友可以参考下
    2021-06-06
  • 禁止页面刷新让F5快捷键及右键都无效

    禁止页面刷新让F5快捷键及右键都无效

    禁止页面刷新让F5快捷键及右键都无效,下面有个不不错的实现方法,大家可以感受下
    2014-01-01
  • es6 filter() 数组过滤方法总结

    es6 filter() 数组过滤方法总结

    这篇文章主要介绍了es6 filter() 数组过滤方法总结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • javascript 获取所有id中包含某关键字的控件的实现代码

    javascript 获取所有id中包含某关键字的控件的实现代码

    获取某容器控件中id包含某字符串的控件id列表
    2010-11-11
  • 如何利用js实时监听input输入框值的变化

    如何利用js实时监听input输入框值的变化

    在做web开发时候很多时候都需要即时监听输入框值的变化,以便作出即时动作去引导浏览者增强网站的用户体验感,这篇文章主要给大家介绍了关于如何利用js实时监听input输入框值的变化,需要的朋友可以参考下
    2024-02-02

最新评论