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 继承机制实例
Aug 12 Javascript
通过继承IHttpHandle实现JS插件的组织与管理
Jul 13 Javascript
基于JavaScript实现动态创建表格和增加表格行数
Dec 20 Javascript
Vue.js 表单校验插件
Aug 14 Javascript
Javascript中arguments对象的详解与使用方法
Oct 04 Javascript
解析ajaxFileUpload 异步上传文件简单使用
Dec 30 Javascript
js中创建对象的几种方式
Feb 05 Javascript
jquery实现回车键触发事件(实例讲解)
Nov 21 jQuery
Vue组件的使用教程详解
Jan 05 Javascript
一个简单的node.js界面实现方法
Jun 01 Javascript
jquery实现烟花效果(面向对象)
Mar 10 jQuery
浅析vue cli3 封装Svgicon组件正确姿势(推荐)
Apr 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
PHP __autoload函数(自动载入类文件)的使用方法
2012/02/04 PHP
php的mkdir()函数创建文件夹比较安全的权限设置方法
2014/07/28 PHP
PHP封装分页函数实现文本分页和数字分页
2014/10/23 PHP
php根据日期显示所在星座的方法
2015/07/13 PHP
PHP使用ajax的post方式下载excel文件简单示例
2019/08/06 PHP
Google Map API更新实现用户自定义标注坐标
2009/07/29 Javascript
js弹出层包含flash 不能关闭隐藏的2种处理方法
2013/06/17 Javascript
JS验证邮箱格式是否正确的代码
2013/12/05 Javascript
json属性名为什么要双引号(个人猜测)
2014/07/31 Javascript
Juery解决tablesorter中文排序和字符范围的方法
2015/05/06 Javascript
分享五个有用的jquery小技巧
2015/10/08 Javascript
jquery点击改变class并toggle的实现代码
2016/05/15 Javascript
js实现文字超出部分用省略号代替实例代码
2016/09/01 Javascript
微信小程序的动画效果详解
2017/01/18 Javascript
node简单实现一个更改头像功能的示例
2017/12/29 Javascript
vue+element创建动态的form表单及动态生成表格的行和列
2019/05/20 Javascript
vue 实现input表单元素的disabled示例
2019/10/28 Javascript
[43:48]Ti4正赛第一天 VG vs NEWBEE 2
2014/07/19 DOTA
Python生成密码库功能示例
2017/05/23 Python
Python+树莓派+YOLO打造一款人工智能照相机
2018/01/02 Python
python函数式编程学习之yield表达式形式详解
2018/03/25 Python
Python获取昨天、今天、明天开始、结束时间戳的方法
2018/06/01 Python
Win10+GPU版Pytorch1.1安装的安装步骤
2019/09/27 Python
python如何实现不可变字典inmutabledict
2020/01/08 Python
python matplotlib工具栏源码探析二之添加、删除内置工具项的案例
2021/02/25 Python
HTML5未来发展趋势
2016/02/01 HTML / CSS
马来西亚网上购物:Youbeli
2018/03/30 全球购物
六一儿童节活动策划方案
2014/01/27 职场文书
给老师的一封建议书
2014/03/13 职场文书
李敖北大演讲稿
2014/05/24 职场文书
战友聚会策划方案
2014/06/13 职场文书
班级标语大全
2014/06/21 职场文书
党的群众路线查摆剖析材料
2014/10/10 职场文书
高中教师个人工作总结
2015/02/10 职场文书
实例讲解Python中sys.argv[]的用法
2021/06/03 Python
一文搞懂MySQL索引页结构
2022/02/28 MySQL