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数组使用调用方法汇总
Dec 08 Javascript
php上传图片并给图片打上透明水印的代码
Jun 07 Javascript
JS特权方法定义作用以及与公有方法的区别
Mar 18 Javascript
Jquery读取URL参数小例子
Aug 30 Javascript
jquery中 $.expr使用实例介绍
Jun 09 Javascript
浅析webapp框架AngularUI的demo
Dec 21 Javascript
Javascript的比较汇总
Jul 25 Javascript
Angular 2.x学习教程之结构指令详解
May 25 Javascript
vue-cli单页应用改成多页应用配置详解
Jul 14 Javascript
详解小程序设置缓存并且不覆盖原有数据
Apr 15 Javascript
vue 项目打包时样式及背景图片路径找不到的解决方式
Nov 12 Javascript
只有 20 行的 JavaScript 模板引擎实例详解
May 11 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
source.php查看源文件
2006/12/09 PHP
PHP+MySQL 制作简单的留言本
2009/11/02 PHP
PHP连接MYSQL数据库实例代码
2016/01/20 PHP
精心挑选的12款优秀的基于jQuery的手风琴效果插件和教程
2012/08/22 Javascript
JavaScript中的getDay()方法使用详解
2015/06/09 Javascript
基于Arcgis for javascript实现百度地图ABCD marker的效果
2015/09/12 Javascript
Sequelize中用group by进行分组聚合查询
2016/12/12 Javascript
Websocket协议详解及简单实例代码
2016/12/12 Javascript
JQuery ZTree使用方法详解
2017/01/07 Javascript
vue router学习之动态路由和嵌套路由详解
2017/09/21 Javascript
jQuery实现的粘性滚动导航栏效果实例【附源码下载】
2017/10/19 jQuery
es6在react中的应用代码解析
2017/11/08 Javascript
javaScript中的空值和假值
2017/12/18 Javascript
vue 组件中添加样式不生效的解决方法
2018/07/06 Javascript
vue 音乐App QQ音乐搜索列表最新接口跨域设置方法
2018/09/25 Javascript
微信小程序实现弹出层效果
2020/05/26 Javascript
JavaScript中this的全面解析及常见实例
2019/05/14 Javascript
python中list循环语句用法实例
2014/11/10 Python
python提取内容关键词的方法
2015/03/16 Python
Python 创建子进程模块subprocess详解
2015/04/08 Python
python中函数总结之装饰器闭包详解
2016/06/12 Python
Python+Wordpress制作小说站
2017/04/14 Python
python 实现上传图片并预览的3种方法(推荐)
2017/07/14 Python
Python2/3中urllib库的一些常见用法
2017/12/19 Python
Python字典循环添加一键多值的用法实例
2019/01/20 Python
Python中的 sort 和 sorted的用法与区别
2019/08/10 Python
python实现银行实战系统
2020/02/26 Python
Tensorflow中的dropout的使用方法
2020/03/13 Python
优质有机椰子产品:Dr. Goerg
2019/09/24 全球购物
大学生创业策划书
2014/02/02 职场文书
策划总监岗位职责
2014/02/16 职场文书
篮球比赛口号
2014/06/10 职场文书
计算机考试作弊检讨书1000字
2015/01/01 职场文书
2015年团委副书记工作总结
2015/07/23 职场文书
赞美教师的句子
2019/09/02 职场文书
详解PyTorch模型保存与加载
2022/04/28 Python