ES6中Array.find()和findIndex()函数的用法详解

 更新时间:2017年09月16日 09:54:59   作者:白色的海  
ES6为Array增加了find(),findIndex函数。find()函数用来查找目标元素,找到就返回该元素,找不到返回undefined,而findIndex()函数也是查找目标元素,找到就返回元素的位置,找不到就返回-1。下面通过实例详解,需要的朋友参考下吧

ES6为Array增加了find(),findIndex函数。

find()函数用来查找目标元素,找到就返回该元素,找不到返回undefined。

findIndex()函数也是查找目标元素,找到就返回元素的位置,找不到就返回-1。

他们的都是一个查找回调函数。

[1, 2, 3, 4].find((value, index, arr) => {
})

查找函数有三个参数。

value:每一次迭代查找的数组元素。

index:每一次迭代查找的数组元素索引。

arr:被查找的数组。

例:

1.查找元素,返回找到的值,找不到返回undefined。

const arr1 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
var ret1 = arr1.find((value, index, arr) => {
 return value > 4
})
var ret2 = arr1.find((value, index, arr) => {
 return value > 14
})
console.log('%s', ret1)
console.log('%s', ret2)

结果:

undefined

2.查找元素,返回找到的index,找不到返回-1。

var ret3 = arr1.findIndex((value, index, arr) => {
 return value > 4
})

var ret4 = arr1.findIndex((value, index, arr) => {
 return value > 14
})
console.log('%s', ret3)
console.log('%s', ret4)

结果:

4
-1

3.查找NaN。

const arr2 = [1, 2, NaN, 4, 5, 6, 7, 8, 9, 10, 11]
var ret5 = arr2.find((value, index, arr) => {
 return Object.is(NaN, value)
})
var ret6 = arr2.findIndex((value, index, arr) => {
 return Object.is(NaN, value)
})
console.log('%s', ret5)
console.log('%s', ret6)

结果:

NaN
2    

总结

以上所述是小编给大家介绍的ES6中Array.find()和findIndex()函数的用法详解,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

相关文章

  • html数组字符串拼接的最快方法

    html数组字符串拼接的最快方法

    html字符串的连接方法有多种,但效率却有很大区别,大家可以感觉需要选择。
    2009-09-09
  • 微信小程序传值常用的4种方式

    微信小程序传值常用的4种方式

    微信小程序开发中的大部分知识点和前端开发是一模一样的,这篇文章主要给大家介绍了关于微信小程序传值常用的4种方式,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-05-05
  • js实现iframe跨页面调用函数的方法

    js实现iframe跨页面调用函数的方法

    这篇文章主要介绍了js实现iframe跨页面调用函数的方法,实例展示了iframe中父页面调用子页面和子页面调用父页面的实现技巧,非常具有实用价值,需要的朋友可以参考下
    2014-12-12
  • 小程序实现分类页

    小程序实现分类页

    这篇文章主要为大家详细介绍了小程序实现好看的分类页,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-07-07
  • 利用Js+Css实现折纸动态导航效果实例源码

    利用Js+Css实现折纸动态导航效果实例源码

    这篇文章主要给大家介绍了利用Js+Css实现折纸动态导航的效果,实现后的效果非常不错,文中给出了简单的介绍和完整的实例代码,对大家具有一定的参考价值,有需要的朋友们下面来一起看看吧。
    2017-01-01
  • js播放wav文件(源码)

    js播放wav文件(源码)

    如何用JS播放wav文件,理论上用js在网页里嵌入一个window播放器的插件,可以播放的。,不过通用性不是很好,IE下可以用,感兴趣的朋友可以参考下哈本文
    2013-04-04
  • Javascript发送AJAX请求实例代码

    Javascript发送AJAX请求实例代码

    这篇文章主要介绍了Javascript发送AJAX请求的实例代码,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-08-08
  • JS异步执行结果获取的3种解决方式

    JS异步执行结果获取的3种解决方式

    这篇文章主要给大家介绍了关于JS异步执行结果获取的3种解决方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-02-02
  • JavaScript实现x秒后自动跳转到一个页面

    JavaScript实现x秒后自动跳转到一个页面

    今天看视频学习时学习了一种新技术,即平时我们在一个页面点击“提交”或“确认”会自动跳转到一个页面,在网上搜了一下,关于这个技术处理有多种方法,有兴趣的朋友可以参考下
    2013-01-01
  • javascript获取元素文本内容的通用函数

    javascript获取元素文本内容的通用函数

    获取元素文本内容的通用函数,思路很好值得参考。
    2009-12-12

最新评论