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 相关文章推荐
HTML Dom与Css控制方法
Oct 25 Javascript
基于jquery的15款幻灯片插件
Apr 10 Javascript
到处都是jQuery选择器的年代 不了解它们的性能,行吗
Jun 18 Javascript
浅析javascript 定时器
Dec 23 Javascript
BootStrap中的表单大全
Sep 07 Javascript
最实用的jQuery分页插件
Oct 09 Javascript
jQuery实现可移动选项的左右下拉列表示例
Dec 26 Javascript
令按钮悬浮在(手机)页面底部的实现方法
May 02 Javascript
Vue中render方法的使用详解
Jan 26 Javascript
详解Webpack loader 之 file-loader
Nov 07 Javascript
layui按条件隐藏表格列的实例
Sep 19 Javascript
vue实现列表拖拽排序的功能
Nov 02 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 图像处理类1
2009/06/15 PHP
PHP 程序员的调试技术小结
2009/11/15 PHP
使用phpexcel类实现excel导入mysql数据库功能(实例代码)
2016/05/12 PHP
Jquery 插件开发笔记整理
2011/01/17 Javascript
JS判断表单输入是否为空(示例代码)
2013/12/23 Javascript
JS对img标签进行优化使用onerror显示默认图像
2014/04/24 Javascript
JQuery遍历json数组的3种方法
2014/11/08 Javascript
JavaScript中的this关键字使用方法总结
2015/03/13 Javascript
jQuery实现防止提交按钮被双击的方法
2015/03/24 Javascript
javascript编程异常处理实例小结
2015/11/30 Javascript
JS实现图片延迟加载并淡入淡出效果的简单方法
2016/08/25 Javascript
jQuery Easyui datagrid editor为combobox时指定数据源实例
2016/12/19 Javascript
JavaScript实现弹窗效果代码分析
2017/03/09 Javascript
js自定义瀑布流布局插件
2017/05/16 Javascript
js实现缓动动画
2020/11/25 Javascript
[02:19]DOTA选手解说齐贺岁
2018/02/11 DOTA
Pthon批量处理将pdb文件生成dssp文件
2015/06/21 Python
Python获取文件所在目录和文件名的方法
2017/01/12 Python
Windows下PyCharm安装图文教程
2018/08/27 Python
解决Python plt.savefig 保存图片时一片空白的问题
2019/01/10 Python
Python----数据预处理代码实例
2019/03/20 Python
Python实现线性插值和三次样条插值的示例代码
2019/11/13 Python
python实现人脸签到系统
2020/04/13 Python
基于Python实现视频的人脸融合功能
2020/06/12 Python
python入门:argparse浅析 nargs='+'作用
2020/07/12 Python
解决python对齐错误的方法
2020/07/16 Python
python 爬虫请求模块requests详解
2020/12/04 Python
CSS3实现多背景模拟动态边框的效果
2016/11/08 HTML / CSS
Parts Express:音频、视频和扬声器的第一来源
2017/04/25 全球购物
为什么group by 和order by会使查询变慢
2014/05/16 面试题
领导失职检讨书
2014/02/24 职场文书
基层干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
个人房屋转让协议书范本
2014/10/26 职场文书
旷课检讨书范文
2015/01/27 职场文书
《我的伯父鲁迅先生》教学反思
2016/02/16 职场文书
个人向公司借款协议书
2016/03/19 职场文书