JS判断元素是否存在于数组中的多种方式

时间:2024-10-21 07:34:12

你好, 我是程序猿零壹。

在前端开发中, 经常会遇到需要判断某个元素是否存在于数组中的场景。其实判断方法有很多种,今天就跟大家来一起一个一个的了解下。

先来定义一个数组:

const arr = [
13,
false,
'abcd',
undefined,
13,
null,
NaN,
 [1, 2],
 { a: 123 },
() => (),
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,indexOf

语法:

(item,start)

参数说明:

item:必需。要查找的元素。

start:可选的整数参数。规定在数组中开始检索的位置。它的合法取值是 0 到 - 1。如省略该参数,则将从字符串的首字符开始检索。

使用方式:

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

(13) >= 0; // true, indexOf返回0
(false) >= 0; // true, indexOf返回1
(undefined) >= 0; // true, indexOf返回3
(2) >= 0; // false, indexOf返回-1

1.2,lastIndexOf

语法:

(item,start)

参数说明:

item:必需。要查找的元素。

start:可选的整数参数。规定在数组中开始检索的位置。它的合法取值是 0 到 - 1。如省略该参数,则将从字符串的首字符开始检索。

使用方式同indexOf。

1.3,第2个可选参数

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

在 indexOf 中,若 start超过数组的长度,则直接返回-1,若为负数,则从最后往前数几个索引((start)),然后开始往后搜索。

在 lastIndexOf 中,若 start达到或超过数组的长度,则搜索整个数组;若为负数,则从最后往前数几个索引((start)),然后开始往前搜索,若负数的绝对值超过了数组的长度,则直接返回-1。

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

2. includes

includes() 方法用来判断一个数组是否包含一个指定的值,如果是返回 true,否则false。

语法:

(searchElement, fromIndex)

参数说明:

searchElement:必须。需要查找的元素值。

fromIndex:可选。从该索引处开始查找 searchElement。如果为负值,则按升序从 + fromIndex 的索引开始搜索。默认为 0。

使用方式:

(13); // true
('abc'); // false
(false); // true, 存在false元素

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

(13, 1); // true, 从索引值1开始往后检索,可检索到
(13, 5); // false, 从索引值5开始往后检索,没检索到
(13, -8); // false, 从最后元素往前数8个索引,没检索到
(13, -9); // true, 从最后元素往前数9个索引,可检索到

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

// 使用indexOf判断
(NaN); // -1
([1, 2]); // -1
({ a: 123 }); // -1
(() => ()); // -1
(new Date('2021/03/04')); // -1
(new RegExp('abc', 'ig')); // -1
(Symbol('sym')); // -1
​
// 使用includes判断
(NaN); // false
([1, 2]); // false
({ a: 123 }); // false
(() => ()); // false
(new Date('2021/03/04')); // false
(new RegExp('abc', 'ig')); // false
(Symbol('sym')); // false

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

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

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. some

some() 方法用于检测数组中的元素是否满足指定条件(函数提供)。some() 方法会依次执行数组的每个元素:如果有一个元素满足条件,则表达式返回true , 剩余的元素不会再执行检测;如果没有满足条件的元素,则返回false。注意:some() 不会对空数组进行检测,也不会改变原来数组。

语法:

(function(currentValue,index,arr),thisValue)

参数说明:

function(currentValue, index,arr):必须。函数,数组中的每个元素都会执行这个函数。

    函数参数:

    currentValue:必须。当前元素的值。

    index:可选。当前元素的索引值。

    arr:可选。当前元素属于的数组对象。

thisValue:可选。对象作为该执行回调时使用,传递给函数,用作 "this" 的值。如果省略了 thisValue ,"this" 的值为 "undefined"。

使用方式:

((item) => item === false); // true
((item) => item === undefined); // true
((item) => typeof item === 'number' && isNaN(item)); // true
((item) => item === 3); // false, 不存在数字3
((item) => {
 if (item instanceof Date) {
  return () === new Date('2021/03/04').toString();
 }
 return false;
}); // true

4. filter

filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。filter() 不会对空数组进行检测,也不会改变原有数组。

语法:

(function(currentValue,index,arr),thisValue)

​参数说明:

function(currentValue, index,arr):必须。函数,数组中的每个元素都会执行这个函数。

    函数参数:

    currentValue:必须。当前元素的值。

    index:可选。当前元素的索引值。

    arr:可选。当前元素属于的数组对象。

thisValue:可选。对象作为该执行回调时使用,传递给函数,用作 "this" 的值。如果省略了 thisValue ,"this" 的值为 "undefined"。

使用方式:

((item) => item === false); // [false]
((item) => item === undefined); // [undefined]
((item) => typeof item === 'number' && isNaN(item)); // [NaN]
((item) => item === 13); // [13,13]
((item) => item === 3); // []
((item) => {
 if (item instanceof Date) {
  return () === new Date('2021/03/04').toString();
 }
 return false;
}); // [Thu Mar 04 2021 00:00:00 GMT+0800 (中国标准时间)]

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

5. find

find() 方法返回通过测试(函数内判断)的数组的第一个元素的值。find() 方法为数组中的每个元素都调用一次函数执行:当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素,之后的值不会再调用执行函数;如果没有符合条件的元素返回 undefined。find() 对于空数组,函数是不会执行的,也不会改变原有数组。

find()方法无法检测数组中的 undefined 元素。因为不存在和存在 undefined 元素,find()方法都会返回 undefined。这里我们就要考虑其他方式了,稍后再讲。

语法:

(function(currentValue, index, arr),thisValue)

参数说明:

function(currentValue, index,arr):必须。函数,数组中的每个元素都会执行这个函数。

    函数参数:

    currentValue:必须。当前元素的值。

    index:可选。当前元素的索引值。

    arr:可选。当前元素属于的数组对象。

thisValue:可选。对象作为该执行回调时使用,传递给函数,用作 "this" 的值。如果省略了 thisValue ,"this" 的值为 "undefined"。

使用方式:

((item) => item === 13); // 13, 找到了元素13
((item) => item === 3); // undefined, 没找到元素3
((item) => item === undefined); // undefined, 也不知道是找到了还是没找到

对于给定数组的稍微复杂点的数据类型,我们就需要做一些特殊的判断了。

((item) => typeof item === 'number' && isNaN(item)); // NaN
​
// array和object类型进行比较时,情况很复杂,因为每个元素的类型都无法确定
// 如果确定都是基本类型,如string, number, boolean, undefined, null等,可以将其转为字符串再比较
// 转字符串的方式也很多,如(arr), (), ('|')等
// 复杂点的,只能一项一项比较,或者使用递归
((item) => () === [1, 2].toString()); // [1, 2]
((item) => (item) === ({ a: 123 })); // {a: 123}
((item) => {
 if (typeof item === 'function') {
 return () === (() => ()).toString();
 }
 return false;
}); // () => ()
((item) => {
 if (item instanceof Date) {
 return () === new Date('2021/03/04').toString();
 }
 return false;
}); // Thu Mar 04 2021 00:00:00 GMT+0800
((item) => {
 if (item instanceof RegExp) {
 return () === new RegExp('abc', 'ig').toString();
 }
 return false;
}); // /abc/gi
​
// Symbol确实没法比较,只能比较描述是否一样
((item) => {
 if (typeof item === 'symbol') {
 return () === Symbol('sym').toString();
 }
 return false;
}); // Symbol(sym)

如果还要判断数组中是否存在 undefined,我们可以使用findIndex()方法。findIndex() 方法返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回-1。

((item) => item === undefined); // 3
((item) => item === 3); // -1, 没有找到数字3

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

6. 总结

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

7. 分享

最后,给大家分享一款学生成绩管理系统,该系统使用php+mysql开发,是一款用于管理课程信息、老师信息、学生信息及成绩的系统,包含最基础的增删改查,可以作为大学的毕业设计,也可以作为初学者的参考项目。有需要的同学可以点此下载