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中匿名函数,函数直接量和闭包
May 08 Javascript
简介JavaScript中的getUTCFullYear()方法的使用
Jun 10 Javascript
微信JS-SDK坐标位置如何转换为百度地图坐标
Jul 04 Javascript
Javascript动画效果(4)
Oct 11 Javascript
Javascript数组中push方法用法分析
Oct 31 Javascript
JavaScript 深层克隆对象详解及实例
Nov 03 Javascript
JavaScript Uploadify文件上传实例
Feb 28 Javascript
vue.js学习之UI组件开发教程
Jul 03 Javascript
JS简单生成由字母数字组合随机字符串示例
May 25 Javascript
java实现单链表增删改查的实例代码详解
Aug 30 Javascript
原生JS与CSS实现软件卸载对话框功能
Dec 05 Javascript
React Native登录之指纹登录篇的示例代码
Nov 03 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
如何分别全角和半角以避免乱码
2006/10/09 PHP
PHP+XML 制作简单的留言本 图文教程
2009/11/02 PHP
基于PHP的cURL快速入门教程 (小偷采集程序)
2011/06/02 PHP
PHP 命令行工具 shell_exec, exec, passthru, system详细使用介绍
2011/09/11 PHP
关于PHP二进制流 逐bit的低位在前算法(详解)
2013/06/13 PHP
PHP登录(ajax提交数据和后台校验)实例分享
2016/12/29 PHP
javascript对中文按照拼音排序代码
2014/08/20 Javascript
js仿土豆网带缩略图的焦点图片切换效果实现方法
2015/02/23 Javascript
jquery实现的用户注册表单提示操作效果代码分享
2015/08/28 Javascript
Vuejs第十篇之vuejs父子组件通信
2016/09/06 Javascript
基于bootstrap风格的弹框插件
2016/12/28 Javascript
使用Angular缓存父页面数据的方法
2017/01/03 Javascript
vue元素实现动画过渡效果
2017/07/01 Javascript
vue的安装及element组件的安装方法
2018/03/09 Javascript
使用Angular CLI生成路由的方法
2018/03/24 Javascript
Vue框架下引入ActiveX控件的问题解决
2019/03/25 Javascript
Vue.js@2.6.10更新内置错误处机制Fundebug同步支持相应错误监控
2019/05/13 Javascript
[03:17]史诗级大片应援2018DOTA2国际邀请赛 致敬每一位坚守遗迹的勇士
2018/07/20 DOTA
python基于BeautifulSoup实现抓取网页指定内容的方法
2015/07/09 Python
Python argv用法详解
2016/01/08 Python
python利用高阶函数实现剪枝函数
2018/03/20 Python
Python基于datetime或time模块分别获取当前时间戳的方法实例
2019/02/19 Python
python实现函数极小值
2019/07/10 Python
Flask框架中request、请求钩子、上下文用法分析
2019/07/23 Python
Python class的继承方法代码实例
2020/02/14 Python
Python 添加文件注释和函数注释操作
2020/08/09 Python
英国最大的在线亚洲杂货店:Red Rickshaw
2020/03/22 全球购物
怎样比较两个类型为String的字符串
2016/08/17 面试题
Java如何读取CLOB字段
2013/10/10 面试题
理工学院学生自我鉴定
2014/02/23 职场文书
阅兵口号
2014/06/19 职场文书
本科应届生求职信
2014/08/05 职场文书
“向国旗敬礼”活动策划方案(4篇)
2014/09/27 职场文书
2016年班主任新年寄语
2015/08/18 职场文书
Python内置包对JSON文件数据进行编码和解码
2022/04/12 Python
python绘制云雨图raincloud plot
2022/08/05 Python