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 相关文章推荐
window.open的功能全解析
Oct 10 Javascript
jQuery $.extend()用法总结
Jun 15 Javascript
JavaScript定义变量和变量优先级问题探讨
Oct 11 Javascript
jQuery设置和移除文本框默认值的方法
Mar 09 Javascript
使用CoffeeScrip优美方式编写javascript代码
Oct 28 Javascript
javascript合并表格单元格实例代码
Jan 03 Javascript
很棒的js Tab选项卡切换效果
Aug 30 Javascript
轻松理解JavaScript之AJAX
Mar 15 Javascript
解决JS内存泄露之js对象和dom对象互相引用问题
Jun 25 Javascript
vue resource post请求时遇到的坑
Oct 19 Javascript
es6 symbol的实现方法示例
Apr 02 Javascript
微信小程序使用Vant Weapp组件库的方法步骤
Aug 01 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
星际中的相关伤害
2020/03/04 星际争霸
延长phpmyadmin登录时间的方法
2011/02/06 PHP
PHP获取当前执行php文件名的代码
2017/03/02 PHP
JavaScript中的私有成员
2006/09/18 Javascript
用js实现的自定义的对话框的实现代码
2010/03/21 Javascript
return false;和e.preventDefault();的区别
2010/07/11 Javascript
js 程序执行与顺序实现详解
2013/05/13 Javascript
php+js实现倒计时功能
2014/06/02 Javascript
JS+CSS实现鼠标滑过时动态翻滚的导航条效果
2015/09/24 Javascript
AngularJs学习第五篇从Controller控制器谈谈$scope作用域
2016/06/08 Javascript
AngularJS基础 ng-href 指令用法
2016/08/01 Javascript
vue中的scope使用详解
2017/10/29 Javascript
vue中promise的使用及异步请求数据的方法
2018/11/08 Javascript
浅谈在Vue.js中如何实现时间转换指令
2019/01/06 Javascript
vue2.0中set添加属性后视图不能更新的解决办法
2019/02/22 Javascript
vue设计一个倒计时秒杀的组件详解
2019/04/06 Javascript
JS实现简易留言板增删功能
2020/02/08 Javascript
JavaScript实现串行请求的示例代码
2020/09/14 Javascript
[01:57]2018年度DOTA2最具潜力解说-完美盛典
2018/12/16 DOTA
[47:43]Alliance vs KG 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
python常规方法实现数组的全排列
2015/03/17 Python
使用python实现正则匹配检索远端FTP目录下的文件
2015/03/25 Python
Python科学计算之Pandas详解
2017/01/15 Python
Django跨域请求问题的解决方法示例
2018/06/16 Python
django框架基于queryset和双下划线的跨表查询操作详解
2019/12/11 Python
python使用numpy实现直方图反向投影示例
2020/01/17 Python
Python列表操作方法详解
2020/02/09 Python
Python3标准库之dbm UNIX键-值数据库问题
2020/03/24 Python
澳大利亚潮流尖端的快时尚品牌:Cotton On
2016/09/26 全球购物
凯特王妃父母建立的派对用品网站:Party Pieces
2017/05/28 全球购物
为娇小女性量身打造:Petite Studio
2018/11/01 全球购物
Araks官网:纽约内衣品牌
2020/10/15 全球购物
.NET常见笔试题集
2012/12/01 面试题
联谊活动总结范文
2015/05/09 职场文书
Windows server 2012 配置Telnet以及用法详解
2022/04/28 Servers
MySQL自定义函数及触发器
2022/08/05 MySQL