JavaScript判断数组成员的几种方法

 更新时间:2022年08月09日 09:17:37   作者:猪痞恶霸​​​​​​​  
这篇文章主要介绍了JavaScript判断数组成员的几种方法,文章围绕主题展开详细的内容介绍,具有一定的参考价值,需要的朋友可以参考一下

前言:

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

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

相关文章

  • 微信小程序模板和模块化用法实例分析

    微信小程序模板和模块化用法实例分析

    这篇文章主要介绍了微信小程序模板和模块化用法,结合实例形式分析了微信小程序中的模板与模块化概念与简单使用技巧,需要的朋友可以参考下
    2017-11-11
  • 微信小程序开发指南之图片压缩解决方案

    微信小程序开发指南之图片压缩解决方案

    在项目开发过程中遇到一个需要从小程序上传图片的需求,此需求实现起来并不难,下面这篇文章主要给大家介绍了关于微信小程序开发指南之图片压缩解决方案的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-08-08
  • 微信小程序获取用户头像昵称组件封装实例(最新版)

    微信小程序获取用户头像昵称组件封装实例(最新版)

    我们在进行小程序开发的时候,往往需要获取微信用户的部分个人信息,常见的有用户头像,昵称等,下面这篇文章主要给大家介绍了关于微信小程序获取用户头像昵称组件封装的相关资料,需要的朋友可以参考下
    2022-12-12
  • 前端的框架TDesign小程序组件库体验

    前端的框架TDesign小程序组件库体验

    TDesign是腾讯各业务团队在服务业务过程中沉淀的一套企业级设计体系,下面这篇文章主要给大家介绍了关于前端的框架TDesign小程序组件库体验的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2022-11-11
  • JavaScript实现下拉列表

    JavaScript实现下拉列表

    这篇文章主要为大家详细介绍了JavaScript实现下拉列表,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-01-01
  • js+ajax实现的A*游戏路径算法整理

    js+ajax实现的A*游戏路径算法整理

    js+ajax实现的A*游戏路径算法整理...
    2007-05-05
  • TypeScript数组的定义与使用详解

    TypeScript数组的定义与使用详解

    数组对象是使用单独的变量名来存储一系列的值,数组非常常用,数组是具有连续存储位置的相似类型元素的同质集合。数组是用户定义的数据类型。数组是一种数据结构,我们在其中存储相似数据类型的元素
    2022-09-09
  • JavaScript设计模式之原型模式分析【ES5与ES6】

    JavaScript设计模式之原型模式分析【ES5与ES6】

    这篇文章主要介绍了JavaScript设计模式之原型模式,简单描述了原型模式的概念、原理,并结合实例形式分析了ES5与ES6实现原型模式的相关操作技巧,需要的朋友可以参考下
    2018-07-07
  • javascript之通用简单的table选项卡实现(二)

    javascript之通用简单的table选项卡实现(二)

    上篇中的选项卡存在这样的问题:把逻辑封装在table.js中,不够灵活,也就是说如果某个选项卡是实现异步请求或者跳转,而非div的显隐切换,那么就得修过table.js来达到目的,显然不是我所需要的。
    2010-05-05
  • JavaScript+Canvas实现文字粒子流特效

    JavaScript+Canvas实现文字粒子流特效

    看到大师级的canvas文字粒子动画,要10个jq币才能下载啊,我内心的小鹿蠢蠢欲动,我也要写一个。所以本文就来用Canvas实现简单的文字粒子流特效,希望对大家有所帮助
    2023-01-01

最新评论