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 相关文章推荐
ECMAScript 基础知识
Jun 29 Javascript
jQuery 各种浏览器下获得日期区别
Dec 22 Javascript
js操作css属性实现div层展开关闭效果的方法
May 11 Javascript
jquery插件uploadify实现带进度条的文件批量上传
Dec 13 Javascript
AngularJs bootstrap搭载前台框架——js控制部分
Sep 01 Javascript
Bootstrap popover用法详解
Dec 22 Javascript
Bootstrap框架安装使用详解
Jan 21 Javascript
jQuery插件FusionCharts绘制的2D条状图效果【附demo源码】
May 13 jQuery
详解CommonJS和ES6模块循环加载处理的区别
Dec 26 Javascript
js核心基础之闭包的应用实例分析
May 11 Javascript
JS实现炫酷雪花飘落效果
Aug 19 Javascript
微信小程序将页面按钮悬浮固定在底部的实现代码
Oct 29 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
PHP6 mysql连接方式说明
2009/02/09 PHP
php采用file_get_contents代替使用curl实例
2014/11/07 PHP
php操作redis数据库常见方法实例总结
2020/02/20 PHP
jquery 1.3.2 IE8中的一点点的小问题解决方法
2009/07/10 Javascript
jquery的extend和fn.extend的使用说明
2011/01/09 Javascript
ajax 同步请求和异步请求的差异分析
2011/07/04 Javascript
在Ubuntu上安装最新版本的Node.js
2014/07/14 Javascript
jQuery实现当前页面标签高亮显示的方法
2015/03/10 Javascript
删除javascript所创建子节点的方法
2015/05/21 Javascript
JavaScript模拟鼠标右键菜单效果
2020/12/08 Javascript
使用JS批量选中功能实现更改数据库中的status状态值(批量展示)
2016/11/22 Javascript
利用javascript实现的三种图片放大镜效果实例(附源码)
2017/01/23 Javascript
Bootstrap3多级下拉菜单
2017/02/24 Javascript
详解vue2.0组件通信各种情况总结与实例分析
2017/03/22 Javascript
Vuex之理解Store的用法
2017/04/19 Javascript
linux系统使用python获取cpu信息脚本分享
2014/01/15 Python
python多线程socket编程之多客户端接入
2017/09/12 Python
python中字符串变二维数组的实例讲解
2018/04/03 Python
Python使用Selenium模块实现模拟浏览器抓取淘宝商品美食信息功能示例
2018/07/18 Python
django 将model转换为字典的方法示例
2018/10/16 Python
Python3.5文件读与写操作经典实例详解
2019/05/01 Python
对python中url参数编码与解码的实例详解
2019/07/25 Python
python 基于dlib库的人脸检测的实现
2019/11/08 Python
Python列表去重复项的N种方法(实例代码)
2020/05/12 Python
Python ADF 单位根检验 如何查看结果的实现
2020/06/03 Python
Beauty Expert美国/加拿大:购买奢侈美容产品
2018/12/05 全球购物
Dogeared官网:在美国手工制作的珠宝
2019/08/24 全球购物
成都思必达公司C#程序员招聘面试题
2013/06/26 面试题
《梅花魂》教学反思
2014/04/30 职场文书
大气污染防治方案
2014/05/19 职场文书
工作会议方案
2014/05/21 职场文书
学校感恩节活动策划方案
2014/10/06 职场文书
2015年防汛工作总结
2015/05/15 职场文书
爱国主义影片观后感
2015/06/18 职场文书
校运会加油稿大全
2015/07/22 职场文书
PHP实现两种排课方式
2021/06/26 PHP