JavaScript判断数组成员的几种方法 目录 indexOf() incudes() find()与findIndex() find() findIndex() 对于NaN值 最后 前言: 在开发中经常需要我们在数组中查找元素又或者是判断元素是否存在,所以我列举了几种常用的方法供掘友参考学习. indexOf() 首先想到的就是
目录
- indexOf()
- incudes()
- find()与findIndex()
- find()
- findIndex()
- 对于NaN值
- 最后
前言:
在开发中经常需要我们在数组中查找元素又或者是判断元素是否存在,所以我列举了几种常用的方法供掘友参考学习。
indexOf()
首先想到的就是indexOf()
方法,查找元素,并返回第一个找到的位置索引
[1,2,3,2].indexOf(2) // 1
他还支持第二个可选参数,指定开始查找的位置
[1,2,3,2].indexOf(2,2) // 3
但是indexOf()
有个问题,他的实现是由===
作为判断的,所以这容易造成一些问题,比如他对于NaN会造成误判
[NaN].indexOf(NaN) // -1
console.log(NaN === NaN) // false
如上,由于误判,没有找到匹配元素,所以返回-1
,而在ES6对数组的原型上新增了incudes()
方法,他可以代替indexOf()
,下面来看看这个方法。
incudes()
在ES6之前只有字符串的原型上含有include()
方法来判断是否包含字串,而数组在ES6中也新增了include()
方法来判断是否包含某个元素,下面来看看如何使用。
[1,2,3].incudes(2) // true
数组实例直接调用,参数为要查找的目标元素,返回值为布尔值。而且他能很好地解决indexOf()
的问题:
[NaN].includes(NaN) // true
如上incudes()
可以正确地判断NaN
的查找问题,而incudes()
是用来判断是否包含,查找条件也比较单一,那么如果想要自定义查找条件,比如查找的范围,可以使用这么一对方法:find()与findIndex()
接下来看一看他们是如何使用的。
find()与findIndex()
find()
与findIndex()
可以匹配数组符合条件的元素
find()
find()
支持三个参数,分别为value
,index
,arr
,分别为当前值,当前位置,与原数组,,返回值为符号条件的值
let arr = [1,2,10,6,19,20]
arr.find((value,index,arr) => {
return value > 10
}) // 19
如上,我以元素大于10为范围条件,返回了第一个符合范围条件的值:19。而find()
可以返回符合条件的第一个元素,那么我们要是想拿到符合条件的第一个元素索引就可以使用findIndex()
。
findIndex()
findIndex()
和find
相似也支持三个参数,但是返回值不同,其返回的是符合条件的索引
let arr = [1,2,10,6,19]
arr.find((value,index,arr) => {
return value > 10
}) // 4
例子与find()
相同,返回的是19对应的索引
对于NaN值
find()
与findIndex()
对NaN
值也不会误判,可以使用Object.is()
来作为范围条件来判断NaN
值,如下
[NaN].find((value)=> {
return Object.is(NaN,value)
}) // NaN
如上例子,findIndex()
也同理
最后
判断元素在某数组中是否存在的四种方法就说到这里,到此这篇关于JavaScript判断数组成员的几种方法的文章就介绍到这了,更多相关JS判断数组成员内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!
本文标题为:JavaScript判断数组成员的几种方法
基础教程推荐
- 解决ajax的delete、put方法接收不到参数的问题方法 2023-02-23
- 第7天:CSS入门 2022-11-04
- ExtJS 3.x DateField menuListeners 显示/隐藏 2022-09-15
- 分页技术原理与实现之无刷新的Ajax分页技术(三) 2023-01-20
- 关于 css:WebKit (iPad) CSS3: 背景过渡闪烁 2022-09-21
- Vue+WebSocket实现在线聊天 2023-10-08
- vue的 Mixins (混入) 2023-10-08
- 基于bootstrap的上传插件fileinput实现ajax异步上传功能(支持多文件上传预览拖拽) 2023-02-01
- 深入浅析Jsonp解决ajax跨域问题 2022-12-28
- ECSHOP中实现ajax弹窗登录功能 2023-01-31