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 相关文章推荐
jQuery getJSON 处理json数据的代码
Jul 26 Javascript
jquery聚焦文本框与扩展文本框聚焦方法
Oct 12 Javascript
jquery select动态加载选择(兼容各种浏览器)
Feb 01 Javascript
JavaScript获取某年某月的最后一天附截图
Jun 23 Javascript
js控制鼠标事件移动及移出效果显示
Oct 19 Javascript
分享28款免费实用的 JQuery 图片和内容滑块插件
Dec 15 Javascript
解读Bootstrap v4 sass设计
May 29 Javascript
javascript淘宝主图放大镜功能
Oct 20 Javascript
简单模拟node.js中require的加载机制
Oct 27 Javascript
基于vue实现一个神奇的动态按钮效果
May 15 Javascript
JS正则表达式验证端口范围(0-65535)
Jan 06 Javascript
Vue脚手架编写试卷页面功能
Mar 17 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
用PHP实现多服务器共享SESSION数据的方法
2007/03/16 PHP
php实现用户在线时间统计详解
2011/10/08 PHP
php实现图片转换成ASCII码的方法
2015/04/03 PHP
PHP微信开发之文本自动回复
2016/06/23 PHP
ThinkPHP中session函数详解
2016/09/14 PHP
php框架CodeIgniter主从数据库配置方法分析
2018/05/25 PHP
javascript的对话框详解与参数
2007/03/08 Javascript
js限制textarea每行输入字符串长度的代码
2012/10/31 Javascript
JS取文本框中最小值的简单实例
2013/11/29 Javascript
简单了解JavaScript操作XPath的一些基本方法
2016/06/03 Javascript
jQuery购物网页经典制作案例
2016/08/19 Javascript
JS实现页面载入时随机显示图片效果
2016/09/07 Javascript
JavaScript优化以及前段开发小技巧
2017/02/02 Javascript
js图片加载效果实例代码(延迟加载+瀑布流加载)
2017/05/12 Javascript
Vue.js用法详解
2017/11/13 Javascript
jQuery实现的模仿雨滴下落动画效果
2018/12/11 jQuery
React冒泡和阻止冒泡的应用详解
2020/08/18 Javascript
用Javascript实现发送短信验证码间隔功能
2021/02/08 Javascript
举例介绍Python中的25个隐藏特性
2015/03/30 Python
Python3.5局部变量与全局变量作用域实例分析
2019/04/30 Python
django基础学习之send_mail功能
2019/08/07 Python
python多进程间通信代码实例
2019/09/30 Python
python3 实现调用串口功能
2019/12/26 Python
Python关于反射的实例代码分享
2020/02/20 Python
使用python求解二次规划的问题
2020/02/29 Python
PyTorch-GPU加速实例
2020/06/23 Python
Python钉钉报警及Zabbix集成钉钉报警的示例代码
2020/08/17 Python
css3实现针线缝合效果(图解步骤)
2013/02/04 HTML / CSS
HTML利用九宫格原理进行网页布局
2020/03/13 HTML / CSS
Kate Spade美国官网:纽约新兴时尚品牌,以包包闻名于世
2017/11/09 全球购物
Feelunique美国:欧洲大型的在线美妆零售电商
2018/11/04 全球购物
优秀学生干部个人的自我评价
2013/10/04 职场文书
专题组织生活会发言材料
2014/10/17 职场文书
工作收入证明模板
2015/06/12 职场文书
青年联谊会致辞
2015/07/31 职场文书
MySql 缓存查询原理与缓存监控和索引监控介绍
2021/07/02 MySQL