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 相关文章推荐
两个JavaScript jsFiddle JSBin在线调试器
Mar 14 Javascript
JQuery 插件制作实践 xMarquee插件V1.0
Apr 02 Javascript
JavaScript去掉数组中的重复元素
Jan 13 Javascript
原生js实现跨浏览器获取鼠标按键的值
Apr 08 Javascript
如何使用Javascript正则表达式来格式化XML内容
Jul 04 Javascript
jquery使用each方法遍历json格式数据实例
May 18 Javascript
使用jquery提交form表单并自定义action的方法
May 25 Javascript
vue数据双向绑定原理解析(get & set)
Mar 08 Javascript
angular内置provider之$compileProvider详解
Sep 27 Javascript
JavaScript前端实现压缩图片功能
Mar 06 Javascript
vue.js实现双击放大预览功能
Jun 23 Javascript
Vue组件通信$attrs、$listeners实现原理解析
Sep 03 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
dedecms模板标签代码官方参考
2007/03/17 PHP
PHP中MVC模式的模板引擎开发经验分享
2011/03/23 PHP
yii实现级联下拉菜单的方法
2014/07/31 PHP
thinkPHP实现表单自动验证
2014/12/24 PHP
PHP实现生成唯一会员卡号
2015/08/24 PHP
Yii2中使用join、joinwith多表关联查询
2016/06/30 PHP
PHP的PDO大对象(LOBs)
2019/01/27 PHP
laravel 解决Validator使用中出现的问题
2019/10/25 PHP
jquery mobile实现拨打电话功能的几种方法
2013/08/05 Javascript
Node.js插件的正确编写方式
2014/08/03 Javascript
使用JQ来编写最基本的淡入淡出效果附演示动画
2014/10/31 Javascript
javascript实现捕捉键盘上按下的键
2015/05/05 Javascript
详解JavaScript的AngularJS框架中的作用域与数据绑定
2016/03/04 Javascript
Javascript的无new构建实例详解
2016/05/15 Javascript
js判断某个字符出现的次数的简单实例
2016/06/03 Javascript
Bootstrap 源代码分析(未完待续)
2016/08/17 Javascript
BootStrap 实现各种样式的进度条效果
2016/12/07 Javascript
原生js实现中奖信息无间隙滚动效果
2017/01/18 Javascript
JavaScript中this的用法及this在不同应用场景的作用解析
2017/04/13 Javascript
angular或者js怎么确定选中ul中的哪几个li
2017/08/16 Javascript
vue中v-for加载本地静态图片方法
2018/03/03 Javascript
微信小程序实现圆形进度条动画
2020/11/18 Javascript
微信小程序实现组件顶端固定或底端固定效果(不随滚动而滚动)
2020/04/09 Javascript
python批量同步web服务器代码核心程序
2014/09/01 Python
Python数据库的连接实现方法与注意事项
2016/02/27 Python
python读取二进制mnist实例详解
2017/05/31 Python
Python 生成VOC格式的标签实例
2020/03/10 Python
详解查看Python解释器路径的两种方式
2020/10/15 Python
使用CSS Grid布局实现网格的流动
2014/12/30 HTML / CSS
Linux内核产生并发的原因
2012/07/13 面试题
公司薪酬管理制度
2014/01/31 职场文书
大型主题婚礼活动策划方案
2014/09/15 职场文书
会议新闻稿
2015/07/17 职场文书
热爱劳动主题班会
2015/08/14 职场文书
springmvc直接不经过controller访问WEB-INF中的页面问题
2022/02/24 Java/Android
Python字符串的转义字符
2022/04/07 Python