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实现一个省市区三级联动选择框代码分享
Mar 06 Javascript
JavaScript DOM元素尺寸和位置
Apr 13 Javascript
javascript检查浏览器是否已经启用XX功能
Jul 10 Javascript
jquery左右全屏大尺寸多图滑动效果代码分享
Aug 28 Javascript
仅9张思维导图帮你轻松学习Javascript 就这么简单
Jun 01 Javascript
JS实现一次性弹窗的方法【刷新后不弹出】
Dec 26 Javascript
百度地图API之百度地图退拽标记点获取经纬度的实现代码
Jan 12 Javascript
jQuery遮罩层实例讲解
May 11 jQuery
Vuex实现计数器以及列表展示效果
Mar 10 Javascript
Vue2 轮播图slide组件实例代码
May 31 Javascript
使用konva和vue-konva库实现拖拽滑块验证功能
Apr 27 Javascript
js实现点击选项置顶动画效果
Aug 25 Javascript
详解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 strlen mb_strlen计算中英文混排字符串长度
2009/07/10 PHP
php自定文件保存session的方法
2014/12/10 PHP
JavaScript 判断浏览器类型及版本
2009/02/21 Javascript
JavaScript Event学习第十章 一些可替换的事件对
2010/02/10 Javascript
jQuery为iframe的body添加click事件的实现代码
2011/04/07 Javascript
解决jquery的datepicker的本地化以及Today问题
2012/05/23 Javascript
jquery实现图片放大镜功能
2015/11/23 Javascript
用AngularJS的指令实现tabs切换效果
2016/08/31 Javascript
Websocket协议详解及简单实例代码
2016/12/12 Javascript
vue.js学习笔记:如何加载本地json文件
2017/01/17 Javascript
Three.js利用dat.GUI如何简化试验流程详解
2017/09/26 Javascript
AjaxUpLoad.js实现文件上传功能
2018/03/02 Javascript
JS window对象简单操作完整示例
2020/01/14 Javascript
vue实现评价星星功能
2020/06/30 Javascript
使用vue3重构拼图游戏的实现示例
2021/01/25 Vue.js
python3使用urllib示例取googletranslate(谷歌翻译)
2014/01/23 Python
python通过floor函数舍弃小数位的方法
2015/03/17 Python
Python中规范定义命名空间的一些建议
2016/06/04 Python
python如何保证输入键入数字的方法
2019/08/23 Python
python基于celery实现异步任务周期任务定时任务
2019/12/30 Python
python日期与时间戳的各种转换示例
2020/02/12 Python
python2和python3哪个使用率高
2020/06/23 Python
利用css3径向渐变做一张优惠券的示例
2018/03/22 HTML / CSS
惠普墨西哥官方商店:HP墨西哥
2016/12/01 全球购物
吉列剃须刀英国官网:Gillette英国
2019/03/28 全球购物
英国计算机商店:Technextday
2019/12/28 全球购物
摩飞电器俄罗斯官方网站:Morphy Richards俄罗斯
2020/07/30 全球购物
JSF面试题:Jsf中的核心类用那些?有什么作用?LiftCycle六大生命周期是什么?
2014/07/17 面试题
元旦晚会主持词
2014/03/24 职场文书
县长“四风”对照检查材料思想汇报
2014/10/05 职场文书
党政领导班子群众路线对照检查材料
2014/10/26 职场文书
先进个人事迹材料
2014/12/29 职场文书
心灵捕手观后感
2015/06/02 职场文书
外出培训学习心得体会
2016/01/18 职场文书
详解vue身份认证管理和租户管理
2021/05/25 Vue.js
使用python求解迷宫问题的三种实现方法
2022/03/17 Python