前言:

在开发中经常需要我们在数组中查找元素又或者是判断元素是否存在,所以我列举了几种常用的方法供掘友参考学习。

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()支持三个参数,分别为valueindexarr,分别为当前值,当前位置,与原数组,,返回值为符号条件的值

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判断数组成员内容请搜索Devmax以前的文章或继续浏览下面的相关文章希望大家以后多多支持Devmax!

JavaScript判断数组成员的几种方法的更多相关文章

  1. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  2. html5使用canvas实现弹幕功能示例

    这篇文章主要介绍了html5使用canvas实现弹幕功能示例的相关资料,需要的朋友可以参考下

  3. HTML5数字输入仅接受整数的实现代码

    这篇文章主要介绍了HTML5数字输入仅接受整数的实现代码,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  4. amaze ui 的使用详细教程

    这篇文章主要介绍了amaze ui 的使用详细教程,本文通过多种方法给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  5. html5简介_动力节点Java学院整理

    这篇文章主要介绍了html5简介,用于指定构建网页的元素,这些元素中的大多数都用于描述网页内容,有兴趣的可以了解一下

  6. 前端实现弹幕效果的方法总结(包含css3和canvas的实现方式)

    这篇文章主要介绍了前端实现弹幕效果的方法总结(包含css3和canvas的实现方式)的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  7. H5 canvas实现贪吃蛇小游戏

    本篇文章主要介绍了H5 canvas实现贪吃蛇小游戏,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  8. ios – parse.com用于键,预期字符串的无效类型,但是得到了数组

    我尝试将我的数据保存到parse.com.我已经预先在parse.com上创建了一个名为’SomeClass’的类.它有一个名为’mySpecialColumn’的列,其数据类型为String.这是我尝试使用以下代码保存数据的代码:如果我运行这个我得到:错误:密钥mySpecialColumn的无效类型,预期字符串,但得到数组这就是我在parse.com上的核心外观:有谁知道我为什么会收到这个错误?

  9. ios – 上下文类型’NSFastEnumeration’不能与数组文字一起使用

    斯威夫特3,你会这样做吗?解决方法正如您所发现的,您不能使用as-casting将数组文字的类型指定为NSFastEnumeration.您需要找到一个符合NSFastEnumeration的正确类,在您的情况下它是NSArray.通常写这样的东西:

  10. ios 8 Homescreen webapp,关闭和打开iPad停止javascript

    我有一个适用于iPad的全屏HTML5网络应用程序,并且刚刚安装了IOS8来试用它,它一切正常,直到你关闭并重新启动iPad.一旦web应用程序重新启动javascript就会停止并加载新页面不会重新启动它.在iPad上的Safari中打开同一页面时,关闭和打开iPad会继续按预期工作.其他人注意到了这个或想出了一个解决方案吗?解决方法这似乎是我在iOS8.1.1更新中解决的.

随机推荐

  1. js中‘!.’是什么意思

  2. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  4. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,怎么实现这样的功能呢?今天小编给大家分享AugularJs上传前预览图片的实现代码,需要的朋友参考下吧

  6. JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念,例如类、对象、属性、方法等面向对象的术语,并以实例讲解各种术语的使用,非常好的一篇面向对象入门教程,其它语言也可以参考哦

  7. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  8. javascript 动态调整图片尺寸实现代码

    在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了。如果对每个插图都先进行缩放再插入的话,太麻烦了。

  9. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

返回
顶部