es6数组includes()用法实例分析


Posted in Javascript onApril 18, 2020

本文实例讲述了es6数组includes()用法。分享给大家供大家参考,具体如下:

Array.prototype.includes方法返回一个布尔值,表示某个数组是否包含给定的值,与字符串的includes方法类似。ES2016引入了该方法。

[1, 2, 3].includes(2) // true
[1, 2, 3].includes(4) // true
[1, 2, NaN].includes(NaN) // true

该方法的第二个参数表示搜索的起始位置,默认为0。如果第二个参数为负数,则表示倒数的位置,如果这时它大于数组长度(比如第二个参数为-4, 但数组长度为3),则会重置为0开始。

[1, 2, 3].includes(3, 3); // false
[1, 2, 3].includes(3, -1); // true

没有该方法之前,我们通常使用数组的indexOf方法,检查是否包含某个值。

if (arr.indexOf(el) !== -1) {
 // ...
}

indexOf方法有两个缺点,一是不够语义化,它的含义是找到参数值的第一个出现位置,所以要去比较是否不等于-1,表达起来不够直观。二是,它内部使用严格相等运算符进行判断,这会导致对NaN的误判。

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

includes使用的是不一样的判断算法,就没有这个问题。

[NaN].includes(NaN) // true

下面代码用来检查当前环境是否支持该方法,如果不支持,部署一个简易的替代版本。

const contains = (() => Array.prototype.includes 
? (arr, value) => arr.includes(value)
:(arr, value) => arr.some(el => el === value) 
)()

另外,Map和Set数据结构有一个has方法需要注意与includes区分。

-Map结构的has方法,是用来查找键名的,比如Map.prototype.has(key),
WeakMap.prototype.has(key), Reflect.has(target, propertyKey)

-Set结构的has方法,是用来查找值的,比如Set.prototype.has(value),
WeakSet.prototype.has(value)

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容可查看本站专题:《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
js简单实现根据身份证号码识别性别年龄生日
Nov 29 Javascript
javascript获取函数名称、函数参数、对象属性名称的代码实例
Apr 12 Javascript
处理文本部分内容的TextRange对象应用实例
Jul 29 Javascript
JS获取图片高度宽度的方法分享
Apr 17 Javascript
javascript创建动态表单的方法
Jul 25 Javascript
Javascript实现一个简单的输入关键字添加标签效果实例
Jun 01 Javascript
vue弹窗组件的实现示例代码
Sep 10 Javascript
vue父子组件通信的高级用法示例
Aug 29 Javascript
javascript实现商品图片放大镜
Nov 28 Javascript
微信小程序如何通过用户授权获取手机号(getPhoneNumber)
Jan 21 Javascript
JavaScript中ES6规范中let和const的用法和区别
Aug 06 Javascript
JavaScript this关键字的深入详解
Jan 14 Javascript
es6数组的flat(),flatMap()函数用法实例分析
Apr 18 #Javascript
es6函数中的作用域实例分析
Apr 18 #Javascript
es6函数之rest参数用法实例分析
Apr 18 #Javascript
vue实现短信验证码输入框
Apr 17 #Javascript
JS监听组合按键思路及实现过程
Apr 17 #Javascript
javascript canvas检测小球碰撞
Apr 17 #Javascript
Vue实现浏览器打印功能的代码
Apr 17 #Javascript
You might like
Apache2 httpd.conf 中文版
2006/11/17 PHP
PHP+.htaccess实现全站静态HTML文件GZIP压缩传输(一)
2007/02/15 PHP
PHP企业级应用之常见缓存技术篇
2011/01/27 PHP
php动态生成函数示例
2014/03/21 PHP
CI(CodeIgniter)框架介绍
2014/06/09 PHP
PHP实现简单汉字验证码
2015/07/28 PHP
php实现批量删除挂马文件及批量替换页面内容完整实例
2016/07/08 PHP
PHP中SESSION过期设置
2021/03/09 PHP
javascript globalStorage类代码
2009/06/04 Javascript
jquery imgareaselect 使用利用js与程序结合实现图片剪切
2009/07/30 Javascript
JS 遮照层实现代码
2010/03/31 Javascript
基于jQuery的可用于选项卡及幻灯的切换插件
2011/03/28 Javascript
关于javascript function对象那些迷惑分析
2011/10/24 Javascript
JavaScript极简入门教程(二):对象和函数
2014/10/25 Javascript
js中日期的加减法
2015/05/06 Javascript
用JS动态改变表单form里的action值属性的两种方法
2016/05/25 Javascript
原生js轮播特效
2017/05/18 Javascript
Ionic + Angular.js实现图片轮播的方法示例
2017/05/21 Javascript
javascript基础进阶_深入剖析执行环境及作用域链
2017/09/05 Javascript
jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法
2017/10/20 jQuery
基于Require.js使用方法(总结)
2017/10/26 Javascript
JavaScript 判断iPhone X Series机型的方法
2019/01/28 Javascript
JS基于对象的链表实现与使用方法示例
2019/01/31 Javascript
Vue指令之 v-cloak、v-text、v-html实例详解
2019/08/08 Javascript
对Python进行数据分析_关于Package的安装问题
2017/05/22 Python
Python使用pylab库实现绘制直方图功能示例
2018/06/01 Python
基于DataFrame改变列类型的方法
2018/07/25 Python
使用Python计算玩彩票赢钱概率
2019/06/26 Python
pygame实现俄罗斯方块游戏(基础篇1)
2019/10/29 Python
Python 复平面绘图实例
2019/11/21 Python
CSS3 mask 遮罩的具体使用方法
2017/11/03 HTML / CSS
办理暂住证介绍信
2014/01/11 职场文书
贯彻学习两会心得体会范文
2014/03/17 职场文书
幼儿园中班开学寄语
2014/04/03 职场文书
幼儿园国庆节活动总结
2015/03/23 职场文书
React + Threejs + Swiper 实现全景图效果的完整代码
2021/06/28 Javascript