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


Posted in Javascript onSeptember 16, 2017

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()函数的用法详解,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
输入密码检测大写是否锁定js实现代码
Dec 03 Javascript
使用JavaScript判断图片是否加载完成的三种实现方式
May 04 Javascript
jQuery中 prop() attr()使用详解
May 19 Javascript
jQuery+json实现动态创建复杂表格table的方法
Oct 25 Javascript
js简单实现网页换肤功能
Apr 07 Javascript
vue组件如何被其他项目引用
Apr 13 Javascript
详解React服务端渲染从入门到精通
Mar 28 Javascript
vue 实现小程序或商品秒杀倒计时
Apr 14 Javascript
Vue学习笔记之计算属性与侦听器用法
Dec 07 Javascript
JS JQuery获取data-*属性值方法解析
Sep 01 jQuery
手写Vue2.0 数据劫持的示例
Mar 04 Vue.js
vue使用localStorage持久性存储实现评论列表
Apr 14 Vue.js
详解JS构造函数中this和return
Sep 16 #Javascript
Angular使用Md5加密的解决方法
Sep 16 #Javascript
使用JS实现气泡跟随鼠标移动的动画效果
Sep 16 #Javascript
EasyUI创建人员树的实例代码
Sep 15 #Javascript
webpack构建react多页面应用详解
Sep 15 #Javascript
详解Vue中一种简易路由传参办法
Sep 15 #Javascript
JavaScript实现换肤功能
Sep 15 #Javascript
You might like
无数据库的详细域名查询程序PHP版(5)
2006/10/09 PHP
PHP4与PHP5的时间格式问题
2008/02/17 PHP
php一个找二层目录的小东东
2012/08/02 PHP
PHP时间戳 strtotime()使用方法和技巧
2013/10/29 PHP
制作个性化的WordPress登陆界面的实例教程
2016/05/21 PHP
PHP基于新浪IP库获取IP详细地址的方法
2017/05/04 PHP
javascript支持firefox,ie7页面布局拖拽效果代码
2007/12/20 Javascript
基于jQuery的模仿新浪微博时间的组件
2011/10/04 Javascript
javascript创建cookie、读取cookie
2016/03/31 Javascript
基于JavaScript实现点击页面任何位置返回
2016/08/31 Javascript
bootstrap模态框垂直居中效果
2016/12/03 Javascript
jquery中用函数来设置css样式
2016/12/22 Javascript
JS正则表达式验证中文字符
2017/05/08 Javascript
vue2项目使用sass的示例代码
2017/06/28 Javascript
react开发教程之React 组件之间的通信方式
2017/08/12 Javascript
jQuery实现百度图片移入移出内容提示框上下左右移动的效果
2018/06/05 jQuery
在小程序Canvas中使用measureText的方法示例
2018/10/19 Javascript
《javascript设计模式》学习笔记七:Javascript面向对象程序设计组合模式详解
2020/04/08 Javascript
[00:36]DOTA2风云人物相约完美“圣”典 12月17日不见不散
2016/11/30 DOTA
Python实现更改图片尺寸大小的方法(基于Pillow包)
2016/09/19 Python
python图形工具turtle绘制国际象棋棋盘
2019/05/23 Python
Python3.7 新特性之dataclass装饰器
2019/05/27 Python
python networkx 包绘制复杂网络关系图的实现
2019/07/10 Python
python 制作网站小说下载器
2021/02/20 Python
FOREO官方网站:LUNA露娜洁面仪
2016/11/28 全球购物
任意存:BOXFUL
2018/05/21 全球购物
奥地利智能家居和智能生活网上商店:tink.at
2019/10/07 全球购物
大学生职业生涯规划书的基本内容
2014/01/06 职场文书
电子工程专业毕业生求职信
2014/03/14 职场文书
大班幼儿评语大全
2014/04/30 职场文书
读书伴我成长演讲稿
2014/05/07 职场文书
优秀安全员事迹材料
2014/05/11 职场文书
2014中学教师节广播稿
2014/09/10 职场文书
golang 接口嵌套实现复用的操作
2021/04/29 Golang
超级详细实用的pycharm常用快捷键
2021/05/12 Python
天谕手游15杯全调酒配方和调酒券的获得方式
2022/04/06 其他游戏