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

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

赞 (0)

相关推荐

  • 基于JS判断对象是否是数组

    这篇文章主要介绍了基于JS判断对象是否是数组,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 1.通过instanceof判断 instanceof运算符用于检验构造函数的prototype属性是否出现在对象的原型链中的任何位置,返回一个布尔值. let a = []; a instanceof Array; //true let b = {}; b instanceof Array; //false 在上方代码中,instanceof运算符检测

  • 利用JS十分钟判断数组中存在元素的多种方式

    前言 在前端开发中,经常会遇到要判断数组中是否存在某个元素.其实判断的方式有很多种,我们一个一个来了解下. 我们先来定义一个数组: const arr = [ 13, false, 'abcd', undefined, 13, null, NaN, [1, 2], { a: 123 }, () => Date.now(), new Date('2021/03/04'), new RegExp('abc', 'ig'), Symbol('sym'), ]; 在这个数组中,我们包含了好几种类型:nu

  • JavaScript判断是否为数组的各种方法汇总

    JavaScript判断是否为数组的各种方法汇总

    目录 前言 Array.isArray constructor instanceof isPrototypeOf Object.prototype.toString typeof 总结 前言 我们在日常开发中,常常有判断某值类型的需求,今天我们总结一下常见的几种用来判断是否为数组的 JavaScript 方法. Array.isArray Array.isArray() 是ES5新增的方法,用于确定传递的值是否是一个数组,如果是数组,则返回  true,否则返回 false. let arr =

  • JS判断数组四种实现方法详解

    一.前言 如何判断一个对象或一个值是否是一个数组,在面试或工作中我们常常会遇到这个问题,既然出现频率高,想着还是做个整理,那么本文主要基于几种判断方式,以及方式判断的原理,是否存在问题展开讨论. 二.判断对象是否是数组的几种方式 1.通过instanceof判断 instanceof运算符用于检验构造函数的prototype属性是否出现在对象的原型链中的任何位置,返回一个布尔值. let a = []; a instanceof Array; //true let b = {}; b insta

  • js判断两个数组相等的5种方法实例

    目录 前言 一. toString() 二.join() 三. JSON.stringify() 四.sort() 五.filter() 总结 前言 在 js 中是不能直接用 == 或者 === 来比较两个数组是否相等,那就需要对数组的值进行比较. 下面各种方法,要根据具体情况来使用. 一. toString() 当两个数组元素类型相同,顺序相同时,直接判断是否相等,结果不相等:转化为字符串后,结果相等 [1,2,3].toString() === [1, 2, 3].toString(); /

  • JavaScript判断数组的方法总结与推荐

    目录 前言 根据构造函数判断(妈妈) instanceof constructor 根据原型对象判断(爸爸) __ proto __ Object.getPrototypeOf() Array.prototype.isPrototypeOf() 根据 Object 的原型对象判断(祖先) Object.prototype.toString.call() Array.isArray() 总结 前言 无论在工作还是面试中,我们都会遇到判断一个数据是否为数组的需求,今天我们就来总结一下,到底有多少方法

  • JS判断数组是否包含某元素实现方法汇总

    我在学习ES6数组拓展时,发现了新增了不少了有趣的数组方法,突然想好工作中判断数组是否包含某个元素是非常常见的操作,那么这篇文章顺便做个整理. 1.for循环结合break 可能很多人第一会想到for循环,毕竟for是最为保险和熟悉的操作: let arr = [1, 2, undefined, '听风是风', 'echo'], i = 0; const LENGTH = arr.length; //初始化result状态,只要能找到匹配的则修改为true let result = false;

  • 利用JS判断元素是否为数组的方法示例

    利用JS判断元素是否为数组的方法示例

    此处提供可供验证的数据类型 let a = [1,2,3,4,5,6]; let b = [ {name: '张飞', type: 'tank'}, {name: '关羽', type: 'soldier'}, {name: '刘备', type: 'shooter'}, ]; let c = 123; let d = 'www'; let e = {name: '安琪拉', type: 'mage'}; 1.通过Array.isArray() Array.isArray()能判断一个元素是否为

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

    目录 indexOf() incudes() find()与findIndex() find() findIndex() 对于NaN值 最后 前言: 在开发中经常需要我们在数组中查找元素又或者是判断元素是否存在,所以我列举了几种常用的方法供掘友参考学习. indexOf() 首先想到的就是indexOf()方法,查找元素,并返回第一个找到的位置索引 [1,2,3,2].indexOf(2)  // 1 他还支持第二个可选参数,指定开始查找的位置 [1,2,3,2].indexOf(2,2)  /

  • JavaScript中数组去重的5种方法

    正常情况下,数据去重的工作一般都是由后端同事来完成的,但是前端也要掌握好处理数据的能力,万一去重的工作交给我们大前端处理,我们也不能怂呀.现在我总结了一些去重的方法,希望对大家有点帮助. 方法一:new Set()实现数组去重 ES6 提供了新的数据结构 Set,它类似于数组,但是成员的值都是唯一的,没有重复的值. Set 本身是一个构造函数,用来生成 Set 数据结构.Set函数可以接受一个数组,用于初始化.根据 Set的数据特性,我们可以实现数组去重. let list = [1, 1, '

  • JavaScript实现数组去重的7种方法

    目录 前言 方法实现 双循环去重 indexOf方法去重1 indexOf方法去重2 相邻元素去重 利用对象属性去重 set与解构赋值去重 Array.from与set去重 总结 前言 去重是开发中经常会碰到的一个热点问题,不过目前项目中碰到的情况都是后台接口使用SQL去重,简单高效,基本不会让前端处理去重. 那么前端处理去重会出现什么情况呢?假如每页显示10条不同的数据,如果数据重复比较严重,那么要显示10条数据,可能需要发送多个http请求才能够筛选出10条不同的数据,而如果在后台就去重了的

  • JavaScript清空数组元素的两种方法简单比较

    本文实例讲述了JavaScript清空数组元素的两种方法简单比较.分享给大家供大家参考.具体分析如下: JavaScript中数组清空有多种方法: var arr = [1, 2, 3]; arr = [];//方法一 arr.length = 0;//方法二 arr = null;//方法三 delete arr;//方法四 这里比较最常用的第一种和第二种 var arr = [1, 2, 3]; // 方法一 // 优点:如果有其他地方用到了数组arr中的元素,这种方法相对来说更安全.并且也

  • javascript判断数组内是否重复的方法

    本文实例讲述了javascript判断数组内是否重复的方法.分享给大家供大家参考.具体如下: Array.prototype.del = function(){ var a = {}, c = [], l = this.length; for (var i = 0; i < l; i++) { var b = this[i]; var d = (typeof b) + b; if (a[d] === undefined) { c.push(b); a[d] = 1; } } return c;

  • JavaScript判断数组重复内容的两种方法(推荐)

    JavaScript判断数组重复内容的两种方法(推荐)

    前言 一般,我们可能会给数组去重,这个操作并不复杂,执行一个循环就是了.现在,我要做的是,判断数组中是否有重复的内容,如果有,返回 true 否则,返回 false. 思路 把数组变成字符串 循环原数组,拿每一个字段和这个字符串进行比对,看是否有重复 如何拿A字符串和B字符串进行对比,并且要求判断出B字符串中包含过个A字符串呢? 方法一 indexOf() 和 lastIndexOf() 对比法. 首先,我们构建代码: var arr = ["aa","bb",&q

  • JavaScript数组去重的五种方法

    javascript数组去重是一个比较常见的需求,解决方法也有很多种,网上都可以找到答案的,下面小编给大家整理了一份关于同类型的数组去重的方法,先给大家介绍下简单实现思路. 思路: 遍历数组,一一比较,比较到相同的就删除后面的 遍历数组,一一比较,比较到相同的,跳过前面重复的,不相同的放入新数组 任取一个数组元素放入新数组,遍历剩下的数组元素任取一个,与新数组的元素一一比较,如果有不同的,放入新数组. 遍历数组,取一个元素,作为对象的属性,判断属性是否存在 1. 删除后面重复的: functio

  • JavaScript中判断对象类型的几种方法总结

    我们知道,JavaScript中检测对象类型的运算符有:typeof.instanceof,还有对象的constructor属性: 1) typeof 运算符 typeof 是一元运算符,返回结果是一个说明运算数类型的字符串.如:"number","string","boolean","object","function","undefined"(可用于判断变量是否存在). 但 type

  • JavaScript判断数组是否包含指定元素的方法

    本文实例讲述了JavaScript判断数组是否包含指定元素的方法.分享给大家供大家参考.具体如下: 这段代码通过prototype定义了数组方法,这样就可以在任意数组调用contains方法 /** * Array.prototype.[method name] allows you to define/overwrite an objects method * needle is the item you are searching for * this is a special variab

随机推荐