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 学习笔记 防止发生命名冲突
Jul 30 Javascript
JS 自定义带默认值的函数
Jul 21 Javascript
jquery入门—编写一个导航条(可伸缩)
Jan 07 Javascript
javascript制作的网页侧边弹出框思路及实现代码
May 21 Javascript
举例讲解JavaScript substring()的使用方法
Nov 09 Javascript
vue移动端裁剪图片结合插件Cropper的使用实例代码
Jul 10 Javascript
vue2.0项目中使用Ueditor富文本编辑器示例代码
Aug 14 Javascript
jQuery选择器中的特殊符号处理方法
Sep 08 jQuery
Vue不能检测到Object/Array更新的情况的解决
Jun 26 Javascript
vue中使用better-scroll实现滑动效果及注意事项
Nov 15 Javascript
vue-cli项目使用mock数据的方法(借助express)
Apr 15 Javascript
JS实现手写 forEach算法示例
Apr 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
DC宇宙的第一个英雄,堪称动漫史鼻祖,如今成为美国文化的象征
2020/04/09 欧美动漫
用PHP调用数据库的存贮过程
2006/10/09 PHP
php入门学习知识点一 PHP与MYSql连接与查询
2011/07/14 PHP
php学习之function的用法
2012/07/14 PHP
js解析与序列化json数据(二)序列化探讨
2013/02/01 Javascript
JavaScript编写Chrome扩展实现与浏览器的交互及时间通知
2016/05/16 Javascript
基于jQuery实现点击列表加载更多效果
2016/05/31 Javascript
ionic由于使用了header和subheader导致被遮挡的问题的两种解决方法
2016/09/22 Javascript
浅谈vue的踩坑路
2017/08/31 Javascript
浅谈使用React.setState需要注意的三点
2017/12/18 Javascript
Vue循环组件加validate多表单验证的实例
2018/09/18 Javascript
关于vue v-for循环解决img标签的src动态绑定问题
2018/09/18 Javascript
node获取客户端ip功能简单示例
2019/08/24 Javascript
Vue父子传递实例讲解
2020/02/14 Javascript
JS制作简易计算器的实例代码
2020/07/04 Javascript
python判断端口是否打开的实现代码
2013/02/10 Python
Django框架中render_to_response()函数的使用方法
2015/07/16 Python
深入理解python中的闭包和装饰器
2016/06/12 Python
Python中的十大图像处理工具(小结)
2019/06/10 Python
python 设置输出图像的像素大小方法
2019/07/04 Python
详解python中的数据类型和控制流
2019/08/08 Python
Python高级特性之闭包与装饰器实例详解
2019/11/19 Python
html5中svg canvas和图片之间相互转化思路代码
2014/01/24 HTML / CSS
军训自我鉴定
2013/12/14 职场文书
后备干部培训方案
2014/05/22 职场文书
董事长助理工作职责
2014/06/08 职场文书
公司股东出资证明书
2014/11/01 职场文书
2015年评职称工作总结范文
2015/04/20 职场文书
关于国庆节的广播稿
2015/08/19 职场文书
如何撰写促销方案?
2019/07/05 职场文书
2019年度政务公开考核工作总结模板
2019/11/11 职场文书
深入理解margin塌陷和margin合并的解决方案
2021/06/26 HTML / CSS
总结Java对象被序列化的两种方法
2021/06/30 Java/Android
python字典进行运算原理及实例分享
2021/08/02 Python
JVM钩子函数的使用场景详解
2021/08/23 Java/Android
MySQL中一条SQL查询语句是如何执行的
2022/04/08 MySQL