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 遮罩层和加载效果代码
Aug 01 Javascript
ExtJS的拖拽效果示例
Dec 09 Javascript
jquery.fastLiveFilter.js实现输入自动过滤的方法
Aug 11 Javascript
js实现完美兼容各大浏览器的人民币大小写相互转换
Oct 29 Javascript
JQuery 的跨域方法推荐_可跨任何网站
May 18 Javascript
AngularJS基础 ng-srcset 指令简单示例
Aug 03 Javascript
Bootstrap基本组件学习笔记之分页(12)
Dec 08 Javascript
bootstrap table配置参数例子
Jan 05 Javascript
Angular2 路由问题修复详解
Mar 01 Javascript
vue-router实现tab标签页(单页面)详解
Oct 17 Javascript
Vue.js中对css的操作(修改)具体方式详解
Oct 30 Javascript
vue源码nextTick使用及原理解析
Aug 13 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 字符串正则替换函数preg_replace使用说明
2011/07/15 PHP
php header函数的常用http头设置
2015/06/25 PHP
phpStudy访问速度慢和启动失败的解决办法
2015/11/19 PHP
PHP常用的三种设计模式汇总
2016/08/28 PHP
JQuery textlimit 显示用户输入的字符数 限制用户输入的字符数
2009/05/14 Javascript
半角全角相互转换的js函数
2009/10/16 Javascript
JS按位非(~)运算符与~~运算符的理解分析
2011/07/31 Javascript
Jquery实现侧边栏跟随滚动条固定(兼容IE6)
2014/04/02 Javascript
jQuery+ajax实现鼠标单击修改内容的方法
2014/06/27 Javascript
JS中的form.submit()不能提交表单的错误原因
2014/10/08 Javascript
使用jQuery中的wrap()函数操作HTML元素的教程
2016/05/24 Javascript
关于RequireJS的简单介绍即使用方法
2016/10/20 Javascript
Javascript 两种刷新方法以及区别和适用范围
2017/01/17 Javascript
AngularJS动态菜单操作指令
2017/04/25 Javascript
vue裁切预览组件功能的实现步骤
2018/05/04 Javascript
详解如何为你的angular app构建一个第三方库
2018/12/07 Javascript
Vue 2.0 侦听器 watch属性代码详解
2019/06/19 Javascript
p5.js绘制创意自画像
2019/11/04 Javascript
JS代码优化的8点建议
2020/02/04 Javascript
基于Vue+Webpack拆分路由文件实现管理
2020/11/16 Javascript
python模拟登陆Tom邮箱示例分享
2014/01/13 Python
Python3遍历目录树实现方法
2015/05/22 Python
Python的Django框架中从url中捕捉文本的方法
2015/07/20 Python
Pyqt实现无边框窗口拖动以及窗口大小改变
2018/04/19 Python
Python装饰器原理与简单用法实例分析
2018/04/29 Python
python使用tornado实现登录和登出
2018/07/28 Python
python3 selenium自动化 下拉框定位的例子
2019/08/23 Python
python爬虫开发之Beautiful Soup模块从安装到详细使用方法与实例
2020/03/09 Python
TensorFLow 数学运算的示例代码
2020/04/21 Python
python实现canny边缘检测
2020/09/14 Python
Tory Burch英国官方网站:美国时尚生活品牌
2017/12/06 全球购物
泰国办公用品购物网站:OfficeMate
2018/02/04 全球购物
学雷锋演讲稿汇总
2014/05/10 职场文书
吃空饷专项整治方案
2014/10/27 职场文书
学校施工安全责任书
2015/01/29 职场文书
安全生产感想
2015/08/07 职场文书