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 相关文章推荐
JScript中的&quot;this&quot;关键字使用方式补充材料
Mar 08 Javascript
jQuery的12招常用技巧分享
Aug 08 Javascript
JS实现QQ图片一闪一闪的效果小例子
Jul 31 Javascript
js调出上下文菜单的实例
Dec 17 Javascript
JS实现把鼠标放到链接上出现滚动文字的方法
Apr 06 Javascript
JS正则表达式验证账号、手机号、电话和邮箱是否合法
Mar 08 Javascript
JS简单验证上传文件类型的方法
Apr 17 Javascript
JavaScript hasOwnProperty() 函数实例详解
Aug 04 Javascript
如何自定义微信小程序tabbar上边框的颜色
Jul 09 Javascript
JavaScript 截取字符串代码实例
Sep 05 Javascript
15 分钟掌握vue-next响应式原理
Oct 13 Javascript
Vue实现简单计算器
Jan 20 Vue.js
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
实用函数4
2007/11/08 PHP
PHP逐行输出(ob_flush与flush的组合)
2012/02/04 PHP
PHP简洁函数(PHP简单明了函数语法)
2012/06/10 PHP
php计算两个整数的最大公约数常用算法小结
2015/03/05 PHP
php线性表的入栈与出栈实例分析
2015/06/12 PHP
php文档工具PHP Documentor安装与使用方法
2016/01/25 PHP
[原创]php token使用与验证示例【测试可用】
2017/08/30 PHP
PHP排序算法之希尔排序(Shell Sort)实例分析
2018/04/20 PHP
Yii使用EasyWechat实现小程序获取用户的openID的方法
2020/04/29 PHP
遨游,飞飞,IE,空中网 浏览器无提示关闭方法
2011/07/11 Javascript
JavaScript中:表达式和语句的区别[译]
2012/09/17 Javascript
如何解决easyui自定义标签 datagrid edit combobox 手动输入保存不上
2015/12/26 Javascript
如何在JS中实现相互转换XML和JSON
2016/07/19 Javascript
jQuery快速实现商品数量加减的方法
2017/02/06 Javascript
nodejs入门教程二:创建一个简单应用示例
2017/04/24 NodeJs
bootstrap table表格插件使用详解
2017/05/08 Javascript
layui 弹出层回调获取弹出层数据的例子
2019/09/02 Javascript
layui 地区三级联动 form select 渲染的实例
2019/09/27 Javascript
vue+elementUI组件table实现前端分页功能
2020/11/15 Javascript
JS实现百度搜索框
2021/02/25 Javascript
Python计算一个文件里字数的方法
2015/06/15 Python
Python对list列表结构中的值进行去重的方法总结
2016/05/07 Python
python爬虫系列Selenium定向爬取虎扑篮球图片详解
2017/11/15 Python
dataframe设置两个条件取值的实例
2018/04/12 Python
CentOS 7下安装Python3.6 及遇到的问题小结
2018/11/08 Python
Python3安装pip工具的详细步骤
2019/10/14 Python
amazeui树节点自动展开折叠面板并选中第一个树节点的实现
2020/08/24 HTML / CSS
柯基袜:Corgi Socks
2017/01/26 全球购物
Omio波兰:全欧洲低价大巴、火车和航班搜索和比价
2018/02/16 全球购物
越南综合购物网站:Lazada越南
2019/06/10 全球购物
党的群众路线教育实践活动个人对照检查材料(公安)
2014/11/05 职场文书
安阳殷墟导游词
2015/02/10 职场文书
硕士学位申请报告
2015/05/15 职场文书
学校教学工作总结2015
2015/05/19 职场文书
导游词之扬州大明寺
2019/10/09 职场文书
一文帮你理解PReact10.5.13源码
2021/04/03 Javascript