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 相关文章推荐
prototype 学习笔记整理
Jul 17 Javascript
超级24小时弹窗代码 24小时退出弹窗代码 100%弹窗代码(IE only)
Jun 11 Javascript
用js调用迅雷下载代码的二种方法
Apr 15 Javascript
javascript中的事件代理初探
Mar 08 Javascript
JS 新增Cookie 取cookie值 删除cookie 举例详解
Oct 10 Javascript
jQuery检测输入的字符串包含的中英文的数量
Apr 17 Javascript
对Angular.js Controller如何进行单元测试
Oct 25 Javascript
理解javascript async的用法
Aug 22 Javascript
JS/jQuery实现DIV延时几秒后消失或显示的方法
Feb 12 jQuery
jQuery实现鼠标移入移出事件切换功能示例
Sep 06 jQuery
基于Vue sessionStorage实现保留搜索框搜索内容
Jun 01 Javascript
JavaScript 防抖和节流遇见的奇怪问题及解决
Nov 20 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
解析php多线程下载远程多个文件
2013/06/25 PHP
php中使用array_filter()函数过滤空数组的实现代码
2014/08/19 PHP
php实现可逆加密的方法
2015/08/11 PHP
php操作路径的经典方法(必看篇)
2016/10/04 PHP
Laravel 实现添加多语言提示信息
2019/10/25 PHP
Gambit vs CL BO3 第三场 2.13
2021/03/10 DOTA
Jquery写一个鼠标拖动效果实现原理与代码
2012/12/24 Javascript
iframe异步加载实现点击左边菜单加载右边内容实例讲解
2013/03/04 Javascript
jquery中focus()函数实现当对象获得焦点后自动把光标移到内容最后
2013/09/29 Javascript
基于jquery自定义的漂亮单选按钮RadioButton
2013/11/19 Javascript
js 实现浏览历史记录示例
2014/04/20 Javascript
JavaScript中number转换成string介绍
2014/12/31 Javascript
NodeJS使用jQuery选择器操作DOM
2015/02/13 NodeJs
jQuery实现的个性化返回底部与返回顶部特效代码
2015/10/30 Javascript
基于Jquery代码实现手风琴菜单
2015/11/19 Javascript
Jquery1.9.1源码分析系列(六)延时对象应用之jQuery.ready
2015/11/24 Javascript
javaScript语法总结
2016/11/25 Javascript
angular 实时监听input框value值的变化触发函数方法
2018/08/31 Javascript
深入理解基于vue-cli的webpack打包优化实践及探索
2019/10/14 Javascript
Vue 实现登录界面验证码功能
2020/01/03 Javascript
javascript设计模式 ? 适配器模式原理与应用实例分析
2020/04/13 Javascript
微信小程序自定义支持图片的弹窗
2020/12/21 Javascript
Python2.x利用commands模块执行Linux shell命令
2016/03/11 Python
一个基于flask的web应用诞生 组织结构调整(7)
2017/04/11 Python
详解Python中 sys.argv[]的用法简明解释
2017/12/20 Python
详解pandas DataFrame的查询方法(loc,iloc,at,iat,ix的用法和区别)
2019/08/02 Python
Python3 无重复字符的最长子串的实现
2019/10/08 Python
python写一个随机点名软件的实例
2019/11/28 Python
Python Serial串口基本操作(收发数据)
2020/11/06 Python
python 实现有道翻译功能
2021/02/26 Python
学校评语大全
2014/05/06 职场文书
代领学位证书毕业证书委托书
2014/09/30 职场文书
教师个人事迹材料
2014/12/17 职场文书
2016年大学生党员公开承诺书
2016/03/24 职场文书
Java spring定时任务详解
2021/10/05 Java/Android
解决WINDOWS电脑开机后桌面没有任何图标
2022/04/09 数码科技