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 相关文章推荐
JavaScript和ActionScript的交互实现代码
Aug 01 Javascript
JavaScript中Math对象方法使用概述
Jan 02 Javascript
js实现日历可获得指定日期周数及星期几示例分享(js获取星期几)
Mar 14 Javascript
JQuery设置获取下拉菜单某个选项的值(比较全)
Aug 05 Javascript
Google 地图事件实例讲解
Aug 06 Javascript
ES6所改良的javascript“缺陷”问题
Aug 23 Javascript
浅谈jQuery双事件多重加载的问题
Oct 05 Javascript
javascript 判断是否是微信浏览器的方法
Oct 09 Javascript
谈谈Vue.js——vue-resource全攻略
Jan 16 Javascript
详解Vue2.X的路由管理记录之 钩子函数(切割流水线)
May 02 Javascript
layui 优化button按钮和弹出框的方法
Aug 15 Javascript
前端监听websocket消息并实时弹出(实例代码)
Nov 27 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
DC最新动画电影:《战争之子》为何内容偏激,毁了一个不错的漫画
2020/04/09 欧美动漫
PHP面向对象学习笔记之一 基础概念
2012/10/06 PHP
jQuery 性能优化指南(2)
2009/05/21 Javascript
jQuery hover 延时器实现代码
2011/03/12 Javascript
给超链接添加特效鼠标移动展示提示信息且随鼠标移动
2013/10/17 Javascript
浅谈Javascript中的Function与Object
2015/01/26 Javascript
GitHub上一些实用的JavaScript的文件压缩解压缩库推荐
2016/03/13 Javascript
angularjs实现首页轮播图效果
2017/04/14 Javascript
JS实现登录页密码的显示和隐藏功能
2017/12/06 Javascript
图片懒加载imgLazyLoading.js使用详解
2020/09/15 Javascript
深入理解requireJS-实现一个简单的模块加载器
2018/01/15 Javascript
详解webpack打包nodejs项目(前端代码)
2018/09/19 NodeJs
Vue.js 中的 v-model 指令及绑定表单元素的方法
2018/12/03 Javascript
使用ESLint禁止项目导入特定模块的方法步骤
2019/03/04 Javascript
mui js控制开关状态、修改switch开关的值方法
2019/09/03 Javascript
如何实现一个简易版的vuex持久化工具
2019/09/11 Javascript
D3.js 实现带伸缩时间轴拓扑图的示例代码
2020/01/20 Javascript
[01:01:52]DOTA2-DPC中国联赛定级赛 SAG vs iG BO3第二场 1月9日
2021/03/11 DOTA
爬山算法简介和Python实现实例
2014/04/26 Python
Python实现查找匹配项作处理后再替换回去的方法
2017/06/10 Python
python中利用队列asyncio.Queue进行通讯详解
2017/09/10 Python
python监控文件并且发送告警邮件
2018/06/21 Python
python 找出list中最大或者最小几个数的索引方法
2018/10/30 Python
python selenium xpath定位操作
2020/09/01 Python
python自动化办公操作PPT的实现
2021/02/05 Python
html2canvas截图空白问题的解决
2020/03/24 HTML / CSS
eBay比利时购物网站:eBay.be
2019/08/09 全球购物
给同学的道歉信
2014/01/16 职场文书
文明寄语大全
2014/04/11 职场文书
团结演讲稿范文
2014/05/23 职场文书
学生自我鉴定格式及范文
2014/09/16 职场文书
法定代表人授权委托书范本
2014/10/07 职场文书
2015年高一班主任工作总结
2015/05/13 职场文书
2016年优秀少先队员事迹材料
2016/02/26 职场文书
go语言求任意类型切片的长度操作
2021/04/26 Golang
Python中的min及返回最小值索引的操作
2021/05/10 Python