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文件 document.createElement
Oct 14 Javascript
jquery创建div 实现代码
Apr 27 Javascript
jqueyr判断checkbox组的选中(示例代码)
Nov 08 Javascript
JQuery判断HTML元素是否存在的两种解决方法
Dec 26 Javascript
利用jQuary实现文字浮动提示效果示例代码
Dec 26 Javascript
jQuery简单实现banner图片切换
Jan 02 Javascript
jQuery实现的导航条切换可显示隐藏
Oct 22 Javascript
jQuery中DOM操作实例分析
Jan 23 Javascript
EasyUI创建对话框的两种方式
Aug 23 Javascript
Vuejs中使用markdown服务器端渲染的示例
Nov 22 Javascript
基于Vue渲染与插件的加载顺序的问题详解
Mar 05 Javascript
如何使用three.js 制作一个三维的推箱子游戏
Jul 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
Zend Framework框架中实现Ajax的方法示例
2017/06/27 PHP
基于jquery的划词搜索实现(备忘)
2010/09/14 Javascript
说说JSON和JSONP 也许你会豁然开朗
2012/09/02 Javascript
javascript加号"+"的二义性说明
2013/03/04 Javascript
jQuery多级弹出菜单插件ZoneMenu
2014/12/18 Javascript
第一章之初识Bootstrap
2016/04/25 Javascript
jQuery基础知识点总结(DOM操作)
2016/06/01 Javascript
JavaScript6 let 新语法优势介绍
2016/07/15 Javascript
微信js-sdk预览图片接口及从拍照或手机相册中选图接口用法示例
2016/10/13 Javascript
javascript中的后退和刷新实现方法
2016/11/10 Javascript
微信小程序之ES6与事项助手的功能实现
2016/11/30 Javascript
JavaScript中localStorage对象存储方式实例分析
2017/01/12 Javascript
JS中的事件委托实例浅析
2018/03/22 Javascript
vue移动端微信授权登录插件封装的实例
2018/08/28 Javascript
javascript设计模式 ? 建造者模式原理与应用实例分析
2020/04/10 Javascript
Openlayers实现图形绘制
2020/09/28 Javascript
[02:07]TI9显影之尘系列 - Vici Gaming
2019/08/20 DOTA
使用Python脚本将绝对url替换为相对url的教程
2015/04/24 Python
剖析Django中模版标签的解析与参数传递
2015/07/21 Python
Python 实现文件的全备份和差异备份详解
2016/12/27 Python
python提取图像的名字*.jpg到txt文本的方法
2018/05/10 Python
Python选择网卡发包及接收数据包
2019/04/04 Python
Python Django view 两种return的实现方式
2020/03/16 Python
Python matplotlib可视化实例解析
2020/06/01 Python
Python爬取酷狗MP3音频的步骤
2021/02/26 Python
移动端html5判断是否滚动到底部并且下拉加载
2019/11/19 HTML / CSS
微软日本官方网站:Microsoft日本
2017/11/26 全球购物
次世代生活态度:Hypebeast
2018/07/05 全球购物
狗狗玩具、零食和咀嚼物的月度送货服务:Super Chewer
2018/08/22 全球购物
电大物流学生的自我评价
2013/10/25 职场文书
中学生期末评语
2014/02/03 职场文书
《高尔基和他的儿子》教学反思
2014/04/09 职场文书
班子四风对照检查材料
2014/08/21 职场文书
村道德模范事迹材料
2014/08/28 职场文书
考试后的感想
2015/08/07 职场文书
MySQL 字符集 character
2022/05/04 MySQL