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 相关文章推荐
基于Jquery的回车成tab焦点切换效果代码(Enter To Tab )
Nov 14 Javascript
js 函数的副作用分析
Aug 23 Javascript
关于js遍历表格的实例
Jul 10 Javascript
js类式继承的具体实现方法
Dec 31 Javascript
JavaScript中提前声明变量或函数例子
Nov 12 Javascript
详解JavaScript的Polymer框架中的通知交互
Jul 29 Javascript
js格式化输入框内金额、银行卡号
Feb 01 Javascript
js style.display=block显示布局错乱问题的解决方法
Sep 21 Javascript
JS+CSS3实现的简易钟表效果示例
Apr 13 Javascript
使用layui的layer组件做弹出层的例子
Sep 27 Javascript
JavaScript仿京东秒杀倒计时
Mar 17 Javascript
JS如何监听div的resize事件详解
Dec 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
php下将多个数组合并成一个数组的方法与实例代码
2011/02/03 PHP
php获取中文拼音首字母类和函数分享
2014/04/24 PHP
php实现的Timer页面运行时间监测类
2014/09/24 PHP
PHP贪婪算法解决0-1背包问题实例分析
2015/03/23 PHP
实例讲解YII2中多表关联的使用方法
2017/07/21 PHP
Laravel 5.5 异常处理 & 错误日志的解决
2019/10/17 PHP
List Installed Software Features
2007/06/11 Javascript
Fixie.js 自动填充内容的插件
2012/06/28 Javascript
Javascript中克隆一个数组的实现代码
2013/12/06 Javascript
extjs 分页使用jsp传递数据示例
2014/07/29 Javascript
node.js中RPC(远程过程调用)的实现原理介绍
2014/12/05 Javascript
JavaScript仿淘宝页面图片滚动加载及刷新回顶部的方法解析
2016/05/24 Javascript
Summernote实现图片上传功能的简单方法
2016/07/11 Javascript
学习Node.js模块机制
2016/10/17 Javascript
8 行 Node.js 代码实现代理服务器
2016/12/05 Javascript
Bootstrap风格的WPF样式
2016/12/07 Javascript
JsChart组件使用详解
2018/03/04 Javascript
vue组件中的样式属性scoped实例详解
2018/10/30 Javascript
微信小程序对图片进行canvas压缩的方法示例详解
2020/11/12 Javascript
基于element-ui封装表单金额输入框的方法示例
2021/01/06 Javascript
详解在Python程序中使用Cookie的教程
2015/04/30 Python
详解常用查找数据结构及算法(Python实现)
2016/12/09 Python
python先序遍历二叉树问题
2017/11/10 Python
python接口自动化(十六)--参数关联接口后传(详解)
2019/04/16 Python
python使用KNN算法识别手写数字
2019/04/25 Python
Python 保持登录状态进行接口测试的方法示例
2019/08/06 Python
java关于string最常出现的面试题整理
2021/01/18 Python
使用CSS实现阅读进度条
2017/02/27 HTML / CSS
Emporio Armani腕表天猫官方旗舰店:乔治·阿玛尼为年轻人设计的副线品牌
2017/07/02 全球购物
印度手工编织服装和家居用品商店:Fabindi
2019/10/07 全球购物
高校毕业生自我鉴定
2013/10/27 职场文书
教育专业自荐书范文
2013/12/17 职场文书
师范生见习报告
2014/10/31 职场文书
2014年人事工作总结范文
2014/11/19 职场文书
2015年社区文体活动总结
2015/03/25 职场文书
Pandas搭配lambda组合使用详解
2022/01/22 Python