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 相关文章推荐
jQuery的end()方法使用详解
Jul 15 Javascript
全面解析Bootstrap表单使用方法(表单按钮)
Nov 24 Javascript
Bootstrap Validator 表单验证
Jul 25 Javascript
js select下拉联动 更具级联性!
Apr 17 Javascript
bootstrap multiselect 多选功能实现方法
Jun 05 Javascript
深入理解React Native原生模块与JS模块通信的几种方式
Jul 24 Javascript
基于Vue实现支持按周切换的日历
Sep 24 Javascript
使用layui 渲染table数据表格的实例代码
Aug 19 Javascript
详解Vue改变数组中对象的属性不重新渲染View的解决方案
Sep 21 Javascript
Element ui 下拉多选时新增一个选择所有的选项
Aug 21 Javascript
Vue指令实现OutClick的示例
Nov 16 Javascript
使用vue编写h5公众号跳转小程序的实现代码
Nov 27 Vue.js
详解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
Windows下XDebug 手工配置与使用说明
2010/07/11 PHP
php采集中国代理服务器网的方法
2015/06/16 PHP
PHP下载生成的csv文件及问题总结
2015/08/06 PHP
双冒号 ::在PHP中的使用情况
2015/11/05 PHP
利用php实现一周之内自动登录存储机制(cookie、session、localStorage)
2016/10/31 PHP
在Laravel5中正确设置文件权限的方法
2019/05/22 PHP
javascript实现动态CSS换肤技术的脚本
2007/06/29 Javascript
js中将多个语句写成一个语句的两种方法小结
2007/12/08 Javascript
JS 常用校验函数
2009/03/26 Javascript
select标签模拟/美化方法采用JS外挂式插件
2013/04/01 Javascript
JS动态添加option和删除option(附实例代码)
2013/04/01 Javascript
jquery zTree异步加载简单实例讲解
2016/02/25 Javascript
javascript如何定义对象数组
2016/06/07 Javascript
Angularjs 自定义服务的三种方式(推荐)
2016/08/02 Javascript
使用JavaScript判断手机浏览器是横屏还是竖屏问题
2016/08/02 Javascript
详解Jquery的事件操作和文档操作
2016/12/19 Javascript
JS实现按钮添加背景音乐示例代码
2017/10/17 Javascript
原生js+cookie实现购物车功能的方法分析
2017/12/21 Javascript
一个基于react的图片裁剪组件示例
2018/04/18 Javascript
解决vue axios的封装 请求状态的错误提示问题
2018/09/25 Javascript
Nuxt.js SSR与权限验证的实现
2018/11/21 Javascript
可用于监控 mysql Master Slave 状态的python代码
2013/02/10 Python
用python制作游戏外挂
2018/01/04 Python
对python sklearn one-hot编码详解
2018/07/10 Python
用python3教你任意Html主内容提取功能
2018/11/05 Python
Python开启线程,在函数中开线程的实例
2019/02/22 Python
python求最大值,不使用内置函数的实现方法
2019/07/09 Python
python redis 批量设置过期key过程解析
2019/11/26 Python
基于Python计算圆周率pi代码实例
2020/03/25 Python
Django如何继承AbstractUser扩展字段
2020/11/27 Python
英国最大的宠物食品和宠物用品网上零售商: Zooplus
2016/08/01 全球购物
商务日语毕业生自荐信
2013/11/23 职场文书
机关中层领导干部群众路线教育实践活动个人对照检查材料
2014/09/24 职场文书
CAD实训总结范文
2015/08/03 职场文书
Python OpenCV实现图形检测示例详解
2022/04/08 Python
阿里云服务器(windows)手动部署FTP站点详细教程
2022/08/05 Servers