首页 >> js开发 >> jsJS判断数组是否包含某元素实现方法汇总js大全
jsJS判断数组是否包含某元素实现方法汇总js大全
发布时间: 2021年1月13日 | 浏览:
| 分类:js开发
我在学习ES6数组拓展时，发现了新增了不少了有趣的数组方法，突然想好工作中判断数组是否包含某个元素是非常常见的操作，那么这篇文章顺便做个整理。1.for循环结合break1.for循环结合break1.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...
};
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()方法2.Arr.indexOf()方法2.Arr.indexOf()方法
let arr = [1, 2, undefined, '听风是风', 'echo'];
//利用indexOf查找下标的特性
let result = arr.indexOf('听风是风');//3
if (result>-1) {
//do something...
};
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()方法3.find()与findIndex()方法3.find()与findIndex()方法
let arr = [1, 2, undefined, '听风是风', 'echo'];
//利用indexOf查找下标的特性
let result = arr.find(ele => ele === '听风是风')//听风之风
if (result) {
//do something...
};
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...
};
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
[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()方法4.some()方法4.some()方法
let arr = [1, 2, undefined, '听风是风', 'echo'];
//利用indexOf查找下标的特性
let result = arr.some(ele => ele === '听风是风') //true
if (result) {
//do something...
};
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));
[NaN].some(ele => Object.is(NaN, ele));5.includes()方法5.includes()方法5.includes()方法ES6新增的数组方法，用于检测数组是否包含某个元素，如果包含返回true，否则返回false，比较厉害的是，能直接检测NaN：
[1, 3, 'echo'].includes('echo'); //true
[NaN, 3, 'echo'].includes(NaN); //true
[1, 3, 'echo'].includes('听风是风'); //false
[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
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希望到这里，在以后查找某数组是否包含某元素时，你又多了几种新的花样。以上就是本文的全部内容，希望对大家的学习有所帮助。
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...
};
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()方法2.Arr.indexOf()方法2.Arr.indexOf()方法
let arr = [1, 2, undefined, '听风是风', 'echo'];
//利用indexOf查找下标的特性
let result = arr.indexOf('听风是风');//3
if (result>-1) {
//do something...
};
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()方法3.find()与findIndex()方法3.find()与findIndex()方法
let arr = [1, 2, undefined, '听风是风', 'echo'];
//利用indexOf查找下标的特性
let result = arr.find(ele => ele === '听风是风')//听风之风
if (result) {
//do something...
};
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...
};
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
[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()方法4.some()方法4.some()方法
let arr = [1, 2, undefined, '听风是风', 'echo'];
//利用indexOf查找下标的特性
let result = arr.some(ele => ele === '听风是风') //true
if (result) {
//do something...
};
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));
[NaN].some(ele => Object.is(NaN, ele));5.includes()方法5.includes()方法5.includes()方法ES6新增的数组方法，用于检测数组是否包含某个元素，如果包含返回true，否则返回false，比较厉害的是，能直接检测NaN：
[1, 3, 'echo'].includes('echo'); //true
[NaN, 3, 'echo'].includes(NaN); //true
[1, 3, 'echo'].includes('听风是风'); //false
[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
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希望到这里，在以后查找某数组是否包含某元素时，你又多了几种新的花样。以上就是本文的全部内容，希望对大家的学习有所帮助。
相关文章:
- js解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题js大全
- js解决VUE mounted 钩子函数执行时 img 未加载导致页面布局的问题js大全
- JavaScriptNode.js 深度调试方法解析
- jsVue $emit()不能触发父组件方法的原因及解决js大全
- js使用Webpack 搭建 Vue3 开发环境过程详解js大全
- js解决vue bus.$emit触发第一次$on监听不到问题js大全
- jsvue 遮罩层阻止默认滚动事件操作js大全
- jsvue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)js大全
- js代码JavaScript 监听组合按键思路及代码实现
- js代码JavaScript React如何修改默认端口号方法详解
刚刚发布热门点击发布时间
- [07/09]Chrome抓取页面内容代码|chrome插件获取页面数据
- [07/09]谷歌浏览器数据采集插件开发|谷歌浏览器的采集功能
- [07/09]Chrome插件轻松抓取网络数据,Chrome插件轻松抓取网页源码数据
- [07/09]chrome插件怎么安装?chrome插件开发如何安装chrome插件
- [07/09]快速chrome插件开发-北京chrome插件开发外包
- [12/31]清大光德落地护眼灯|清大光德儿童护眼灯
- [07/20]网站无障碍适老化外包改造私有化过程遇到问题整理
- [07/19]适老化改造工信部明确APP适老化规范：禁广告弹窗，网站需提供特大字体
- [07/19]适老化改造包括哪些方面?
- [07/19]什么是适老化改造？
- [07/19]适老化与信息无障碍是什么关系，二者有何异同？
- [07/19]网站如何进行适老化改造？
- [07/12]老年群体面临“数字鸿沟” 数字化网站适老化改造服务彰显人文关怀
- [07/12]数字适老化改造方案 老龄群体数字化改造受关注
- [07/11]什么是重绘?什么是回流?常见引起回流属性和方法：
