开发前端软件素材源码教程下载网站

mysql mysql 微信 微信 小程序 dedecms 苹果 修真图
当前位置：首页 > 建站学院 > 前端开发 >  JS判断元素是否存在数组中的方法有哪些

JS判断元素是否存在数组中的方法有哪些

前端开发   发布日期：2023年07月21日   浏览次数：338次

这篇文章主要介绍“JS判断元素是否存在数组中的方法有哪些”，在日常操作中，相信很多人在JS判断元素是否存在数组中的方法有哪些问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”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'),
];

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

    接下来我们来看下具体实现的方法。

    1. indexOf

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

    1.1，indexOf

    语法：

    array.indexOf(item,start)

    参数说明：

    • item：必需。要查找的元素。

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

    使用方式：

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

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

    1.2，lastIndexOf

    语法：

    array.lastIndexOf(item,start)

    参数说明：

    • item：必需。要查找的元素。

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

    使用方式同indexOf。

    1.3，第2个可选参数

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

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

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

    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)开始往前搜索

    2. includes

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

    语法：

    array.includes(searchElement, fromIndex)

    参数说明：

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

    • fromIndex：可选。从该索引处开始查找 searchElement。如果为负值，则按升序从 array.length + fromIndex 的索引开始搜索。默认为 0。

    使用方式：

    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)），然后开始往后搜索。

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

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

    // 使用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 都是采用严格相等的方式（===）来判定的。

    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() 不会对空数组进行检测，也不会改变原来数组。

    语法：

    array.some(function(currentValue,index,arr),thisValue)

    参数说明：

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

    函数参数：

    • currentValue：必须。当前元素的值。

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

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

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

    使用方式：

    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

    4. filter

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

    语法：

    array.filter(function(currentValue,index,arr),thisValue)

    参数说明：

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

    函数参数：

    • currentValue：必须。当前元素的值。

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

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

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

    使用方式：

    arr.filter((item) => item === false); // [false]
arr.filter((item) => item === undefined); // [undefined]
arr.filter((item) => typeof item === 'number' && isNaN(item)); // [NaN]
arr.filter((item) => item === 13); // [13,13]
arr.filter((item) => item === 3); // []
arr.filter((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 (中国标准时间)]

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

    5. find

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

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

    语法：

    array.find(function(currentValue, index, arr),thisValue)

    参数说明：

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

    函数参数：

    • currentValue：必须。当前元素的值。

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

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

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

    使用方式：

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

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

    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)

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

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

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

    以上就是JS判断元素是否存在数组中的方法有哪些的详细内容，更多关于JS判断元素是否存在数组中的方法有哪些的资料请关注九品源码其它相关文章！

    相关热词： 判断元素存在数组中的方法哪些
    上一篇：微信小程序 confirm（删除提示）
    下一篇：VueJs中customRef函数怎么使用

    文章分类

    IT资讯 CMS教程 服务器 数据库 前端开发 后端开发 工具使用 其他教程

    最后更新

    热门排行

    网站首页 | 关于我们 | 免责声明 | 网站建设 | 在线工具 | 网站地图

    版权声明：本站发布的资源部分自互联网，所有资源版权归原作者所有。如果有侵犯到您的权益，请联系本站删除，谢谢合作！

    Copyright 2018-2024 ©19jp.com All Rights Reserved. 陕ICP备16002142号-1