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


Posted in Javascript onJune 24, 2020

我在学习ES6数组拓展时,发现了新增了不少了有趣的数组方法,突然想好工作中判断数组是否包含某个元素是非常常见的操作,那么这篇文章顺便做个整理。

1.for循环结合break

可能很多人第一会想到for循环,毕竟for是最为保险和熟悉的操作:

let arr = [1, 2, undefined, '听风是风', 'echo'],
  i = 0;
const LENGTH = arr.length;

//初始化result状态,只要能找到匹配的则修改为true
let result = false;
for (; i < LENGTH; i++) {
  if (arr[i] === '听风是风') {
    result = true;
    break;
  };
};
if (result) {
  //do something...
};

使用for的好处是,能结合break在找到满足条件的情况下,立刻跳出循环,如果第一个元素就符合条件,那后续循环步骤都可以优化直接跳过了。

使用for的缺点是,查找不够直观,我们在for循环中无法直接return查询结果,当然你可以将for循环写在一个函数中,但你还是需要额外定义个result变量。

其次,对于数组操作,我们虽然能使用for循环解决很多问题,但我们不能把目光永远第一个投向for,除了for呢?试着将目光投向更多数组高阶函数,思考更多可能是非常必要的。

说到for你肯定会本能想到forEach,虽然forEach能使用回调函数,但依旧无法在回调函数中使用return,外加上无法直接使用break,这里就不做介绍了。

最后,for循环与forEach对于查找NaN不那么实用,毕竟NaN是唯一一个不等于自己的存在,当然也能实现又能判断NaN还能判断其它非NaN对象,只是比较麻烦了。

2.Arr.indexOf()方法

let arr = [1, 2, undefined, '听风是风', 'echo'];

//利用indexOf查找下标的特性
let result = arr.indexOf('听风是风');//3
if (result>-1) {
  //do something...
};

indexOf方法会从头到尾的检索数组,如果找到了第一个符合条件的元素则返回该元素的下标,如果没找到则返回-1,所以只要能找到最小下标也应该是0,这才有了if(result>-1)的写法。

相对for循环来说,indexOf写法上简洁了不少,但相比for循环能使用break,indexOf即便找到了想要的元素,它还是不会停下检索的脚步,这点就不太优化了。

其次,语义化不太友好,我们是希望判断一个数组有没有某个元素,结果我们到底是拿了下标来做判断,当然,对于NaN查找也不那么友好。

[NaN].indexOf(NaN);//-1

3.find()与findIndex()方法

let arr = [1, 2, undefined, '听风是风', 'echo'];

//利用indexOf查找下标的特性
let result = arr.find(ele => ele === '听风是风')//听风之风
if (result) {
  //do something...
};

find方法是比较推荐的做法,find方法会找到第一个符合条件的数组元素,并返回它,如果没找到则返回undefined。

需要注意的是,只要find找到符合条件的对象后不会继续遍历,可以说自带了break操作,加上箭头函数简化回调,整体代码非常直观。

let arr = [1, 2, undefined, '听风是风', 'echo'];

//利用indexOf查找下标的特性
let result = arr.findIndex(ele => ele === '听风是风')//3
if (result>-1) {
  //do something...
};

findIndex方法与find方法非常类似,只是它返回的不是符合条件的对象,而是该对象的下标,找到后同样会跳出循环,如果没找到则返回-1,这一点与indexOf有点类似。

比较理想的是,find方法还能结合Object.is()方法判断NaN,当然也能判断其它对象,是不是非常的奈斯?

[NaN].find(ele => Object.is(NaN, ele)); //NaN
[1].find(ele => Object.is(1, ele)); //1
[NaN].findIndex(ele => Object.is(NaN, ele)); //0
[1].findIndex(ele => Object.is(1, ele)); //0

写法简洁,自带break,还能判断NaN,这两个方法都比较推荐。

4.some()方法

let arr = [1, 2, undefined, '听风是风', 'echo'];

//利用indexOf查找下标的特性
let result = arr.some(ele => ele === '听风是风') //true
if (result) {
  //do something...
};

some方法同样用于检测是否有满足条件的元素,如果有,则不继续检索后面的元素,直接返回true,如果都不符合,则返回一个false。

用法与find相似,只是find是返回满足条件的元素,some返回的是一个Boolean值,从语义化来说,是否包含返回布尔值更贴切。

当然,some方法同样能结合Object.is()方法检测NaN。some也是较为推荐的方法

[NaN].some(ele => Object.is(NaN, ele));

5.includes()方法

ES6新增的数组方法,用于检测数组是否包含某个元素,如果包含返回true,否则返回false,比较厉害的是,能直接检测NaN:

[1, 3, 'echo'].includes('echo'); //true
[NaN, 3, 'echo'].includes(NaN); //true
[1, 3, 'echo'].includes('听风是风'); //false

优点就不用说了,最简单的做法没有之一,不用回调,不用复杂的写法,一个方法直接搞定。

缺点是低版本浏览器支持不是很友好,当然能用我们还是用,不能用我们就自己封装:

let hasEle = (() =>
  Array.prototype.includes ?
  (arr, val) => arr.includes(val) :
  (arr, val) => arr.some(ele => Object.is(val, ele))
)();

hasEle([1, 2, NaN], 1) //true
hasEle([1, 2, NaN], NaN) //true
hasEle([1, 2, NaN], '听风是风') //false

希望到这里,在以后查找某数组是否包含某元素时,你又多了几种新的花样。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
XML+XSL 与 HTML 两种方案的结合
Apr 22 Javascript
jquery DOM操作 基于命令改变页面
May 06 Javascript
javascript 函数声明与函数表达式的区别介绍
Oct 05 Javascript
jQuery中ajax的使用与缓存问题的解决方法
Dec 19 Javascript
js如何判断输入字符串长度
Dec 16 Javascript
JavaScript资源预加载组件和滑屏组件的使用推荐
Mar 10 Javascript
js老生常谈之this,constructor ,prototype全面解析
Apr 05 Javascript
React Native react-navigation 导航使用详解
Dec 01 Javascript
vue动态添加路由addRoutes之不能将动态路由存入缓存的解决
Feb 19 Javascript
layui的select联动实现代码
Sep 28 Javascript
vue 清空input标签 中file的值操作
Jul 21 Javascript
JavaScript中isPrototypeOf函数
Nov 07 Javascript
JS script脚本中async和defer区别详解
Jun 24 #Javascript
javascript实现前端分页效果
Jun 24 #Javascript
JS实现多选框的操作
Jun 24 #Javascript
微信小程序实现发微博功能的示例代码
Jun 24 #Javascript
JavaScript实现答题评分功能页面
Jun 24 #Javascript
JS实现电脑虚拟键盘打字测试
Jun 24 #Javascript
JS实现简单打字测试
Jun 24 #Javascript
You might like
PHP 和 COM
2006/10/09 PHP
php之对抗Web扫描器的脚本技巧
2008/10/01 PHP
mayfish 数据入库验证代码
2010/04/30 PHP
php多文件上传功能实现原理及代码
2013/04/18 PHP
采用ThinkPHP中F方法实现快速缓存实例
2014/06/13 PHP
写的htc的数据表格
2007/01/20 Javascript
Web 前端设计模式--Dom重构 提高显示性能
2010/10/22 Javascript
JS获得QQ号码的昵称,头像,生日的简单实例
2013/12/04 Javascript
Javascript闭包用法实例分析
2015/01/23 Javascript
jQuery插件jFade实现鼠标经过的图片高亮其它变暗
2015/03/14 Javascript
JQuery给select添加/删除节点的实现代码
2016/04/26 Javascript
浅析在javascript中创建对象的各种模式
2016/05/06 Javascript
JS数组操作(数组增加、删除、翻转、转字符串、取索引、截取(切片)slice、剪接splice、数组合并)
2016/05/20 Javascript
JavaScript页面实时显示当前时间实例代码
2016/10/23 Javascript
JavaScript动态绑定详解
2017/09/14 Javascript
vue3.0 CLI - 2.5 - 了解组件的三维
2018/09/14 Javascript
vue自定义tap指令及tap事件的实现
2018/09/18 Javascript
JavaScript实现简单随机点名器
2019/11/21 Javascript
VSCode 添加自定义注释的方法(附带红色警戒经典注释风格)
2020/08/27 Javascript
[01:03]DOTA2新的征程 你的脚印值得踏上
2014/08/13 DOTA
Python字符串处理函数简明总结
2015/04/13 Python
浅谈python和C语言混编的几种方式(推荐)
2017/09/27 Python
利用selenium爬虫抓取数据的基础教程
2019/06/10 Python
详解pytorch 0.4.0迁移指南
2019/06/16 Python
python3获取当前目录的实现方法
2019/07/29 Python
python 使用三引号时容易犯的小错误
2020/10/21 Python
如何利用python 读取配置文件
2021/01/06 Python
mui几种页面跳转方式对比总结概括
2017/08/18 HTML / CSS
Timex手表官网:美国运动休闲手表品牌
2017/01/28 全球购物
Cynthia Rowley官网:全球领先的生活方式品牌
2020/10/27 全球购物
教师自我剖析材料(群众路线)
2014/09/29 职场文书
2014年班务工作总结
2014/12/02 职场文书
介绍长城的导游词
2015/01/30 职场文书
2015年人力资源工作总结
2015/04/08 职场文书
MySQL如何构建数据表索引
2021/05/13 MySQL
Java8 CompletableFuture 异步回调
2022/04/28 Java/Android