ES6使用 Array.includes 处理多重条件用法实例分析


Posted in Javascript onMarch 02, 2020

本文实例讲述了ES6使用 Array.includes 处理多重条件用法。分享给大家供大家参考,具体如下:

includes   [ɪnk'lu:dz]  包含,包括

includes() 方法用来判断一个数组是否包含一个指定的值,如果是返回 true,否则false。

举个例子:

// 条件语句
function test(fruit) {
 if (fruit == 'apple' || fruit == 'strawberry') {
 console.log('red');
 }
}

乍一看,这么写似乎没什么大问题。然而,如果我们想要匹配更多的红色水果呢,我们是不是得用更多的 || 来扩展这条语句?

我们可以使用 Array.includes(Array.includes) 重写以上条件句。

function test(fruit) {
 // 把条件提取到数组中
 const redFruits = ['apple', 'strawberry', 'cherry', 'cranberries'];
 if (redFruits.includes(fruit)) {
 console.log('red');
 }
}

我们把红色的水果(条件)都提取到一个数组中,这使得我们的代码看起来更加优雅,整洁。

ES6使用 Array.includes 处理多重条件用法实例分析

fromIndex 大于等于数组长度

如果fromIndex 大于等于数组长度 ,则返回 false 。该数组不会被搜索:

var arr = ['a', 'b', 'c'];
arr.includes('c', 3);  //false
arr.includes('c', 100); // false

计算出的索引小于 0

如果 fromIndex 为负值,计算出的索引将作为开始搜索searchElement的位置。如果计算出的索引小于 0,则整个数组都会被搜索。

// 数组长度是3
// fromIndex 是 -100
// computed index 是 3 + (-100) = -97
 
var arr = ['a', 'b', 'c'];
arr.includes('a', -100); // true
arr.includes('b', -100); // true
arr.includes('c', -100); // true

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容可查看本站专题:《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
抽出www.templatemonster.com的鼠标悬停加载大图模板的代码
Jul 11 Javascript
javascript Keycode对照表
Oct 24 Javascript
fancybox modal的完美解决(右上的X)
Oct 30 Javascript
javascript陷阱 一不小心你就中招了(字符运算)
Nov 10 Javascript
关于angularJs指令的Scope(作用域)介绍
Oct 25 Javascript
开源免费天气预报接口API及全国所有地区代码(国家气象局提供)
Dec 26 Javascript
Angular CLI 安装和使用教程
Sep 13 Javascript
Angular搜索场景中使用rxjs的操作符处理思路
May 30 Javascript
JavaScript引用类型Array实例分析
Jul 24 Javascript
详解离线安装npm包的几种方法
Nov 25 Javascript
解决vue 界面在苹果手机上滑动点击事件等卡顿问题
Nov 27 Javascript
浅谈js数组splice删除某个元素爬坑
Oct 14 Javascript
JS造成内存泄漏的几种情况实例分析
Mar 02 #Javascript
JavaScript HTML DOM 元素 (节点)新增,编辑,删除操作实例分析
Mar 02 #Javascript
JavaScript中break、continue和return的用法区别实例分析
Mar 02 #Javascript
Vue Router的手写实现方法实现
Mar 02 #Javascript
ES6中Set和Map用法实例详解
Mar 02 #Javascript
Vue父组件向子组件传值以及data和props的区别详解
Mar 02 #Javascript
js中addEventListener()与removeEventListener()用法案例分析
Mar 02 #Javascript
You might like
东芝TOSHIBA RP-F11电路分析
2021/03/02 无线电
ZF等常用php框架中存在的问题
2008/01/10 PHP
php网站来路获取代码(针对搜索引擎)
2010/06/08 PHP
几个有用的php字符串过滤,转换函数代码
2012/05/01 PHP
Destoon实现多表查询示例
2014/08/21 PHP
PHP递归创建多级目录
2015/11/05 PHP
php7连接MySQL实现简易查询程序的方法
2020/10/13 PHP
JS代码同步文本框内容的实例方法
2013/07/12 Javascript
含有CKEditor的表单如何提交
2014/01/09 Javascript
js识别不同浏览器基于userAgent做判断
2014/07/29 Javascript
js动态切换图片的方法
2015/01/20 Javascript
使用HTML5+Boostrap打造简单的音乐播放器
2016/08/05 Javascript
Bootstarp基本模版学习教程
2017/02/01 Javascript
JS实现的JSON数组去重算法示例
2018/04/11 Javascript
vue-router中scrollBehavior的巧妙用法
2018/07/09 Javascript
通过npm或yarn自动生成vue组件的方法示例
2019/02/12 Javascript
跟混乱的页面弹窗说再见
2019/04/11 Javascript
Vue动态修改网页标题的方法及遇到问题
2019/06/09 Javascript
Layui 数据表格批量删除和多条件搜索的实例
2019/09/04 Javascript
javascript实现倒计时关闭广告
2021/02/09 Javascript
Python编写屏幕截图程序方法
2015/02/18 Python
对python-3-print重定向输出的几种方法总结
2018/05/11 Python
解决PyCharm import torch包失败的问题
2018/10/13 Python
使用python的pandas为你的股票绘制趋势图
2019/06/26 Python
详解用python生成随机数的几种方法
2019/08/04 Python
python类的实例化问题解决
2019/08/31 Python
python定义类的简单用法
2020/07/24 Python
python3跳出一个循环的实例操作
2020/08/18 Python
Belstaff英国官方在线商店:Belstaff.co.uk
2021/02/09 全球购物
瑞典最大的儿童用品网上商店:pinkorblue.se
2021/03/09 全球购物
机械系毕业生求职信
2014/05/28 职场文书
纪律教育学习月活动总结
2014/08/27 职场文书
2015年教师新年寄语
2014/12/08 职场文书
评先进个人材料
2014/12/29 职场文书
Python爬虫之爬取哔哩哔哩热门视频排行榜
2021/04/28 Python
Node.js实现爬取网站图片的示例代码
2022/04/04 NodeJs