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 相关文章推荐
写的htc的数据表格
Jan 20 Javascript
Mootools 1.2教程 滚动条(Slider)
Sep 15 Javascript
Javascript中call的两种用法实例
Dec 13 Javascript
JavaScript获取图片的原始尺寸以宽度为例
May 04 Javascript
表单验证正则表达式实例代码详解
Nov 09 Javascript
探究JavaScript函数式编程的乐趣
Dec 14 Javascript
JavaScript的Backbone.js框架的一些使用建议整理
Feb 14 Javascript
three.js实现围绕某物体旋转
Jan 25 Javascript
jQuery插件HighCharts绘制2D圆环图效果示例【附demo源码下载】
Mar 09 Javascript
Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch的使用教程
May 07 Javascript
详解让sublime text3支持Vue语法高亮显示的示例
Sep 29 Javascript
vue模式history下在iis中配置流程
Apr 17 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
探讨方法的重写(覆载)详解
2013/06/08 PHP
使用PHP curl模拟浏览器抓取网站信息
2013/10/28 PHP
PHP后台微信支付和支付宝支付开发
2017/04/28 PHP
PHP SFTP实现上传下载功能
2017/07/26 PHP
JavaScript 快捷键设置实现代码
2009/03/13 Javascript
24款非常有用的 jQuery 插件分享
2011/04/06 Javascript
jquery 查找iframe父级页面元素的实现代码
2011/08/28 Javascript
JavaScript Scoping and Hoisting 翻译
2012/07/03 Javascript
onmouseover和onmouseout的一些问题思考
2013/08/14 Javascript
JS判断变量是否为空判断是否null
2014/07/25 Javascript
jQuery实现带水平滑杆的焦点图动画插件
2016/03/08 Javascript
AngularJS中watch监听用法分析
2016/11/04 Javascript
JS判断键盘是否按的回车键并触发指定按钮点击操作的方法
2017/02/13 Javascript
Javascript 实现匿名递归的实例代码
2017/05/25 Javascript
js中变量的连续赋值(实例讲解)
2017/07/08 Javascript
JavaScript判断浏览器和hack滚动条的写法
2017/07/23 Javascript
10个最优秀的Node.js MVC框架
2017/08/24 Javascript
JS继承与闭包及JS实现继承的三种方式
2017/10/15 Javascript
vue中post请求以a=a&b=b 的格式写遇到的问题
2018/04/27 Javascript
Node.js的进程管理的深入理解
2019/01/09 Javascript
聊聊vue 中的v-on参数问题
2021/01/29 Vue.js
python采集微信公众号文章
2018/12/20 Python
Python使用Pickle模块进行数据保存和读取的讲解
2019/04/09 Python
python爬虫模块URL管理器模块用法解析
2020/02/03 Python
Python安装whl文件过程图解
2020/02/18 Python
windows下python 3.9 Numpy scipy和matlabplot的安装教程详解
2020/11/28 Python
html5中监听canvas内部元素点击事件的三种方法
2019/04/28 HTML / CSS
意大利香水和彩妆护肤品购物网站:Ditano
2017/08/13 全球购物
征兵宣传标语
2014/06/20 职场文书
2014乡镇干部纪律作风整顿思想汇报
2014/09/13 职场文书
2014保险公司个人工作总结
2014/12/09 职场文书
2014年党小组工作总结
2014/12/20 职场文书
2015年社区卫生工作总结
2015/04/21 职场文书
2015年秋季小学开学标语
2015/07/16 职场文书
python3 删除所有自定义变量的操作
2021/04/08 Python
详解MySQL 联合查询优化机制
2021/05/10 MySQL