服务器之家：专注于服务器技术及软件下载分享
分类导航

node.js|vue.js|jquery|angularjs|React|json|js教程|

服务器之家 - 编程语言 - JavaScript - js教程 - 利用JS十分钟判断数组中存在元素的多种方式

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

2022-02-12 18:23蚊子前端博客 js教程

这篇文章主要给大家介绍了关于利用JS十分钟判断数组中存在元素的多种方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

前言

在前端开发中，经常会遇到要判断数组中是否存在某个元素。其实判断的方式有很多种，我们一个一个来了解下。

我们先来定义一个数组：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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'),
];

在这个数组中，我们包含了好几种类型：number, boolean, string, undefined, null, array, object, Date, Symbol 等。其中数字 13 出现了 2 次。

有备而来

1. indexOf

我们最熟悉的就是indexOf了，毕竟他出现的早，兼容性也好，使用起来也很方便。

如果存在该元素，则返回第一次出现的索引值；若整个数组不存在该元素，则返回-1。

1.1 使用方式

只要判断返回的数据是不是-1，就能知道数组中是否包含该元素。

?
1
2
arr.indexOf(13) >= 0; // true, indexOf返回0
arr.indexOf(2) >= 0; // false, indexOf返回-1

与 indexOf 对应的是 lastIndexOf，从最后往前查找元素，若存在该元素，则返回在数组中的最后一个的索引；若不存在该元素，则返回-1。

?
1
arr.lastIndexOf(13) >= 0; // true, lastIndexOf返回4, 最后一次出现的索引

两个方法在判断变量是否存在时，调用方式是一样的。

1.2 第 2 个可选参数

indexOf 和 lastIndexOf 还有第 2 个可选参数 fromIndex，用来表示从哪个索引开始进行搜索。

在 indexOf 中，若 fromIndex 超过数组的长度，则直接返回-1，若为负数，则从最后往前数几个索引（arr.length-Math.abs(fromIndex)），然后开始往后搜索。

在 lastIndexOf 中，若 fromIndex 达到或超过数组的长度，则搜索整个数组；若为负数，则从最后往前数几个索引（arr.length-Math.abs(fromIndex)），然后开始往前搜索，若负数的绝对值超过了数组的长度，则直接返回-1。

?
1
2
3
4
arr.indexOf(13, 2); // 4, 从索引值2开始往后查找，首先找到的13的索引值为4
arr.indexOf(13, -10); // 4, 从索引值1(11-10)开始往后检索
arr.lastIndexOf(13, 2); // 0, 从索引值2往前开始搜索
arr.lastIndexOf(13, -2); // 4, 从索引值9(11-2)开始往前搜索

而且 indexOf 和 lastIndexOf 中采用的是严格相等的方式（===）来判断的。

arr.indexOf(null); // 5, 在null的前面有几个假值false和undefined，也能准确找到null的索引值
瑟瑟发抖

2. includes

indexOf 主要是为了查找元素所在的索引值，只是我们可以用返回的索引值来间接判断数组中是否存在该元素。

而在 ES7(ES2016)中添加的includes方法，就是专门用来判断元素是否存在的。返回值为 true 或者 false，true 表示存在，false 表示不存在，简单明了。

?
1
2
3
arr.includes(13); // true
arr.includes('abc'); // false
arr.includes(false); // true, 存在false元素

同时，includes 方法中也存在第 2 个可选参数 fromIndex，fromIndex 的用法与 indexOf 中的一样。若 fromIndex 超过数组的长度，则直接返回-1，若为负数，则从最后往前数几个索引（arr.length-Math.abs(fromIndex)），然后开始往后搜索。

?
1
arr.includes(13, 5); // false, 从索引值5开始往后检索，没检索到

到目前为止，后面的几种类型，例如 Array, Object, Date 和 Symbol，我们都没判断呢。我们现在来判断下后面的几个元素：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 使用indexOf判断
arr.indexOf(NaN); // -1
arr.indexOf([1, 2]); // -1
arr.indexOf({ a: 123 }); // -1
arr.indexOf(() => Date.now()); // -1
arr.indexOf(new Date('2021/03/04')); // -1
arr.indexOf(new RegExp('abc', 'ig')); // -1
arr.indexOf(Symbol('sym')); // -1
 
// 使用includes判断
arr.includes(NaN); // false
arr.includes([1, 2]); // false
arr.includes({ a: 123 }); // false
arr.includes(() => Date.now()); // false
arr.includes(new Date('2021/03/04')); // false
arr.includes(new RegExp('abc', 'ig')); // false
arr.includes(Symbol('sym')); // false

结局很惨，这几种元素在数组中都没有检索到。可是实际上在数组中都是真实存在的。

这是因为 indexOf 和 includes 都是采用严格相等的方式（===）来判定的。

?
1
2
3
4
5
NaN === NaN; // false, 两个NaN永远也不会相等
[1, 2] === [1, 2]; // false, 每个声明出来的数组都有单独的存储地址
{a: 123} === {a: 123}; // false, 同数组
new Date('2021/03/04')===new Date('2021/03/04'); // false, 看着日期是相同的，但是用new出来的对象进行比较的，肯定是不相等的
Symbol('sym')===Symbol('sym'); // Symbol类型的出现就是为了避免冲突创造出来的类型，括号里的属性仅是为了方便描述而已

针对这些无法被检索的类型，我们就需要自己写函数来判断特殊的类型了。

3. find 和 findIndex

find()和 findIndex()允许我们通过回调函数，来自定义判断的方式。

3.1 find 方法

find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。

find()方法无法检测数组中的 undefined 元素。

因为不存在和存在 undefined 元素，find()方法都会返回 undefined。这里我们就要考虑其他方式了，稍后再讲。

?
1
2
3
arr.find((item) => item === 13); // 13, 找到了元素13
arr.find((item) => item === 3); // undefined, 没找到元素3
arr.find((item) => item === undefined); // undefined, 也不知道是找到了还是没找到

对于上面稍微复杂点的类型，我们就需要特殊的判断了：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
arr.find((item) => typeof item === 'number' && isNaN(item)); // NaN
 
// array和object类型进行比较时，情况很复杂，因为每个元素的类型都无法确定
// 如果确定都是基本类型，如string, number, boolean, undefined, null等，可以将其转为字符串再比较
// 转字符串的方式也很多，如JSON.stringify(arr), arr.toString(), arr.split('|')等
// 复杂点的，只能一项一项比较，或者使用递归
arr.find((item) => item.toString() === [1, 2].toString()); // [1, 2]
arr.find((item) => JSON.stringify(item) === JSON.stringify({ a: 123 })); // {a: 123}
arr.find((item) => {
 if (typeof item === 'function') {
 return item.toString() === (() => Date.now()).toString();
 }
 return false;
}); // () => Date.now()
arr.find((item) => {
 if (item instanceof Date) {
 return item.toString() === new Date('2021/03/04').toString();
 }
 return false;
}); // Thu Mar 04 2021 00:00:00 GMT+0800
arr.find((item) => {
 if (item instanceof RegExp) {
 return item.toString() === new RegExp('abc', 'ig').toString();
 }
 return false;
}); // /abc/gi
 
// Symbol确实没法比较，只能比较描述是否一样
arr.find((item) => {
 if (typeof item === 'symbol') {
 return item.toString() === Symbol('sym').toString();
 }
 return false;
}); // Symbol(sym)

上面的判断代码在后面的方法也将会使用到。

3.2 两个元素进行比较

我们在上面对比了多种类型元素的比较，稍微来总结下。

先来定义一个函数：

?
1
const compare = (x, y) => {};

3.2.1 基本类型

对于元素是 string, number, boolean, undefined, null 等基本类型的，可以直接进行比较：

?
1
2
3
const compare = (x, y) => {
 return x === y;
};

3.2.2 NaN 数据

NaN 用 typeof 来判断是 number 类型，但 NaN 不与任何数字相等，包括它自己。

?
1
2
3
4
5
6
const compare = (x, y) => {
 if (typeof x === 'number' && isNaN(x) && typeof y === 'number' && isNaN(y)) {
  return true;
 }
 return x === y;
};

3.2.3 Function 与 Date 与 RegExp

这些类型的，可以将变量转为字符串进行比较：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const compare = (x, y) => {
 if (typeof x === 'number' && isNaN(x) && typeof y === 'number' && isNaN(y)) {
  return true;
 }
 if (
  (typeof x === 'function' && typeof y === 'function') ||
  (x instanceof Date && y instanceof Date) ||
  (x instanceof RegExp && y instanceof RegExp) ||
  (x instanceof String && y instanceof String) ||
  (x instanceof Number && y instanceof Number)
 ) {
  return x.toString() === y.toString();
 }
 return x === y;
};

对于 object 类型和 array 的，我们可以将每一项拆开，然后利用上面的方式再挨个儿比较。

3.3 findIndex 方法

如果还要判断数组中是否存在 undefined，我们可以使用findIndex()方法。

findIndex() 方法返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回-1。

?
1
2
arr.findIndex((item) => item === undefined); // 3
arr.findIndex((item) => item === 3); // -1, 没有找到数字3

其他数据格式的判断，与上面的 find()一样。

稀客呀

4. some

some() 方法测试数组中是不是至少有 1 个元素通过了被提供的函数测试。它返回的是一个 Boolean 类型的值。

注意：如果用一个空数组进行测试，在任何情况下它返回的都是 false。

some()方法与 find()方法的使用方式一样，只不过 some()方法返回的是 boolean 类型的数据。

?
1
2
3
4
5
6
7
8
9
10
arr.some((item) => item === false); // true
arr.some((item) => item === undefined); // true
arr.some((item) => typeof item === 'number' && isNaN(item)); // true
arr.some((item) => item === 3); // false, 不存在数字3
arr.some((item) => {
 if (item instanceof Date) {
  return item.toString() === new Date('2021/03/04').toString();
 }
 return false;
}); // true

5. filter

filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。

无论找到几个元素或者没有元素，filter()方法都是会返回一个数组，数组中的数据就是我们想要的元素。

?
1
2
3
4
5
6
7
8
9
10
11
arr.filter((item) => item === false); // 1
arr.filter((item) => item === undefined); // 1
arr.filter((item) => typeof item === 'number' && isNaN(item)); // 1
arr.filter((item) => item === 13); // 2
arr.filter((item) => item === 3); // 0
arr.filter((item) => {
 if (item instanceof Date) {
  return item.toString() === new Date('2021/03/04').toString();
 }
 return false;
}); // 1

因此我们可以通过该数组的长度，来判断原数组是否包含我们想要的元素。

略略

6. 总结

查找数组中元素的方式有很多，我们可以数组中元素的格式，来选择更合适的方式。如果都是一些基本类型，建议优先选择使用includes()方法；如果格式比较复杂的，建议选择使用some()方法。这两个方法都是直接返回 boolean 类型，无需更多的转换即可直接使用方法的结果。

到此这篇关于利用JS十分钟判断数组中存在元素的多种方式的文章就介绍到这了,更多相关JS判断数组存在元素内容请搜索服务器之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持服务器之家！

原文链接：https://www.xiabingbao.com/post/array/check-item-in-array.html

  • JS
  • 元素
  • 数组
  • 判断

    • 延伸 · 阅读

    精彩推荐
    • js教程详解js创建对象的几种方式和对象方法

      详解js创建对象的几种方式和对象方法

      这篇文章主要介绍了详解js创建对象的几种方式和对象方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的...

      joychenke3782022-01-24
    • js教程javascript代码实现简易计算器

      javascript代码实现简易计算器

      这篇文章主要为大家详细介绍了javascript代码实现简易计算器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...

      Hope°8902022-01-06
    • js教程如何在JavaScript中正确处理变量

      如何在JavaScript中正确处理变量

      这篇文章主要介绍了如何在JavaScript中正确处理变量，帮助大家更好的理解和使用JavaScript，感兴趣的朋友可以了解下...

      疯狂的技术宅10712021-12-20
    • js教程用javascript实现倒计时效果

      用javascript实现倒计时效果

      这篇文章主要为大家详细介绍了用javascript实现倒计时效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...

      爱前端的茂茂7942022-01-20
    • js教程微信小程序抽奖组件的使用步骤

      微信小程序抽奖组件的使用步骤

      这篇文章主要给大家介绍了关于微信小程序抽奖组件的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需...

      い 狂奔的蜗牛10892021-12-29
    • js教程四个Javascript 中的 For 循环

      四个Javascript 中的 For 循环

      在 ECMAScript5（简称 ES5）中，有三个循环。在 2015 年 6 月发布的 ECMAScript6（简称 ES6）中，新增了一种循环类型。...

      锋享前端4652022-01-12
    • js教程javascript实现简单页面倒计时

      javascript实现简单页面倒计时

      这篇文章主要为大家详细介绍了javascript实现简单页面倒计时，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...

      潜力股wjk11952022-01-25
    • js教程JavaScript实现跟随鼠标移动的盒子

      JavaScript实现跟随鼠标移动的盒子

      这篇文章主要为大家详细介绍了JavaScript实现跟随鼠标移动的盒子，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...

      搬砖大法10852022-01-10
    最近更新
    编辑推荐
    阅读排行
    热门标签
    array.flatMap 　 文字时钟 　 Object.assign 　 removeAttribute 　 attachEvent 　 并发请求控制 　 选择图片 　 电灯开关 　 随机图形 　 点击切换 　 防止重复 　 规则集 　 arcgis.js 　 关闭广告 　 Nest.js 　 SSG 　 onShareTimeline 　 点餐程序 　 胶囊 　 mustache.js 　 元件 　 悬浮图标 　 按钮角标 　 鼠标拖曳 　 AutoJs 　 Strve.js 　 蒙板 　 mapboxgl 　 轨迹线 　 多层次 　
    © 2019-2022 服务器之家(www.zzvips.com) 版权所有关于我们联系我们版权申明网站地图