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 相关文章推荐
Javascript - HTML的request类
Jul 15 Javascript
广告显示判断
Aug 31 Javascript
贴一个在Mozilla中常用的Javascript代码
Jan 09 Javascript
JavaScript为对象原型prototype添加属性的两种方式
Aug 01 Javascript
js同比例缩放图片的小例子
Oct 30 Javascript
javascript控制在光标位置插入文字适合表情的插入
Jun 09 Javascript
jQuery实现加入购物车飞入动画效果
Mar 14 Javascript
深入理解requireJS-实现一个简单的模块加载器
Jan 15 Javascript
Vue2.0 实现移动端图片上传功能
May 30 Javascript
基于Vue2-Calendar改进的日历组件(含中文使用说明)
Apr 14 Javascript
javascript的delete运算符知识点总结
Nov 19 Javascript
用vue 实现手机触屏滑动功能
May 28 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初学者的8点有效建议
2010/11/20 PHP
PHP策略模式定义与用法示例
2017/07/27 PHP
laravel实现分页样式替换示例代码(增加首、尾页)
2017/09/22 PHP
BOOM vs RR BO5 第四场 2.14
2021/03/10 DOTA
在b/s开发中经常用到的javaScript技术
2006/08/23 Javascript
IE innerHTML,outerHTML所引起的问题
2009/06/04 Javascript
关于 文本框默认值 的操作js代码
2012/01/12 Javascript
点弹代码 点击页面任何位置都可以弹出页面效果代码
2012/09/17 Javascript
jQuery模拟超链接点击效果代码
2013/04/21 Javascript
使用js获取地址栏中传递的值
2013/07/02 Javascript
IE网页js语法错误2行字符1、FF中正常的解决方法
2013/09/09 Javascript
javascript实现检验的各种规则
2015/07/31 Javascript
javascript获取系统当前时间的方法
2015/11/19 Javascript
AngularJS ng-bind 指令简单实现
2016/07/30 Javascript
JS实现禁止高频率连续点击的方法【基于ES6语法】
2017/04/25 Javascript
jQuery层级选择器_动力节点节点Java学院整理
2017/07/04 jQuery
浅谈关于.vue文件中style的scoped属性
2017/08/19 Javascript
深入浅析Vue.js中 computed和methods不同机制
2018/03/22 Javascript
jQuery实现的页面弹幕效果【测试可用】
2018/08/17 jQuery
解决Vue.js父组件$on无法监听子组件$emit触发事件的问题
2018/09/12 Javascript
JavaScript实现放大镜效果代码示例
2020/04/29 Javascript
解决vue动态路由异步加载import组件,加载不到module的问题
2020/07/26 Javascript
python有证书的加密解密实现方法
2014/11/19 Python
Python3.6 Schedule模块定时任务(实例讲解)
2017/11/09 Python
PyCharm 常用快捷键和设置方法
2017/12/20 Python
Django+Ajax+jQuery实现网页动态更新的实例
2018/05/28 Python
Python中的相关分析correlation analysis的实现
2019/08/29 Python
浅析matlab中imadjust函数
2020/02/27 Python
浅谈tensorflow 中的图片读取和裁剪方式
2020/06/30 Python
Java byte数组操纵方式代码实例解析
2020/07/22 Python
金宝贝童装官网:Gymboree
2016/08/31 全球购物
俄罗斯EPL钻石珠宝店:ЭПЛ
2019/10/22 全球购物
使用useBean标志初始化BEAN时如何接受初始化参数
2012/02/11 面试题
四风问题民主生活会对照检查材料思想汇报
2014/09/27 职场文书
正规欠条模板
2015/07/03 职场文书
2016年4月份红领巾广播稿
2015/12/21 职场文书