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的图片大小自动适应实现代码
Nov 17 Javascript
关于event.cancelBubble和event.stopPropagation()的区别介绍
Dec 11 Javascript
JS关键字变色实现思路及代码
Feb 21 Javascript
分享两个手机访问pc网站自动跳转手机端网站代码
Dec 24 Javascript
JS正则表达式比较常见用法
Jan 26 Javascript
BootStrap glyphicon图标无法显示的解决方法
Sep 06 Javascript
清除输入框内的空格
Dec 21 Javascript
浅谈JavaScript中的apply/call/bind和this的使用
Feb 26 Javascript
ionic2自定义cordova插件开发以及使用(Android)
Jun 19 Javascript
Vue自定义过滤器格式化数字三位加一逗号实现代码
Mar 23 Javascript
React事件处理的机制及原理
Dec 03 Javascript
Vue3.0的优化总结
Oct 16 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读MYSQL中文乱码的解决方法
2006/12/17 PHP
解析PHP中intval()等int转换时的意外异常情况
2013/06/21 PHP
PHP获取windows登录用户名的方法
2014/06/24 PHP
php中session定期自动清理的方法
2015/11/12 PHP
Yii框架组件和事件行为管理详解
2016/05/20 PHP
php array_keys 返回数组的键名
2016/10/25 PHP
PHP实现求连续子数组最大和问题2种解决方法
2017/12/26 PHP
RR vs IO BO3 第二场2.13
2021/03/10 DOTA
js或css实现滚动广告的几种方案
2010/01/28 Javascript
google 搜索框添加关键字实现代码
2010/04/24 Javascript
基于Jquery的实现回车键Enter切换焦点
2010/09/14 Javascript
javascript实现页面内关键词高亮显示代码
2014/04/03 Javascript
angularJS 中$scope方法使用指南
2015/02/09 Javascript
JavaScript获取伪元素(Pseudo-Element)属性的方法技巧
2015/03/13 Javascript
Javascript代码实现仿实例化类
2015/04/03 Javascript
javascript数组克隆简单实现方法
2015/12/16 Javascript
JavaScript中三种异步上传文件方式
2016/03/06 Javascript
js实现千分符和保留几位小数的简单实例
2016/08/01 Javascript
easyui form validate总是返回false的原因及解决方法
2016/11/07 Javascript
微信小程序 基础知识css样式media标签
2017/02/15 Javascript
webpack构建vue项目的详细教程(配置篇)
2017/07/17 Javascript
微信小程序导入Vant报错VM292:1 thirdScriptError的解决方法
2019/08/01 Javascript
浅谈vuex为什么不建议在action中修改state
2020/02/02 Javascript
JS判断数组是否包含某元素实现方法汇总
2020/06/24 Javascript
vue实现div单选多选功能
2020/07/16 Javascript
Vue2.x和Vue3.x的双向绑定原理详解
2020/11/05 Javascript
vue3.0中setup使用(两种用法)
2020/12/02 Vue.js
python学习教程之Numpy和Pandas的使用
2017/09/11 Python
pandas series序列转化为星期几的实例
2018/04/11 Python
Python zip函数打包元素实例解析
2019/12/11 Python
利用python对excel中一列的时间数据更改格式操作
2020/07/14 Python
html5+css3进度条倒计时动画特效代码【推荐】
2016/03/08 HTML / CSS
党小组鉴定意见
2015/06/02 职场文书
农村老人去世追悼词
2015/06/23 职场文书
初中班干部工作总结
2015/08/10 职场文书
Nginx服务器添加Systemd自定义服务过程解析
2021/03/31 Servers