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实用基础超详细介绍
Apr 11 Javascript
JavaScript获取图片真实大小代码实例
Sep 24 Javascript
Javascript中封装window.open解决不兼容问题
Sep 28 Javascript
从数据库读取数据后将其输出成html标签的三种方法
Oct 13 Javascript
28个常用JavaScript方法集锦
Jan 14 Javascript
关于js里的this关键字的理解
Aug 17 Javascript
JavaScript保留关键字汇总
Dec 01 Javascript
关于动态执行代码(js的Eval)实例详解
Aug 15 Javascript
如何利用模板将HTML从JavaScript中抽离
Oct 08 Javascript
JavaScript实现的冒泡排序法及统计相邻数交换次数示例
Apr 26 Javascript
JavaScript引用类型RegExp基本用法详解
Aug 09 Javascript
详解vuex中action何时完成以及如何正确调用dispatch的思考
Jan 21 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开发时容易忘记的一些技术细节
2016/02/03 PHP
关于html+ashx开发中几个问题的解决方法
2011/07/18 Javascript
JS匀速运动演示示例代码
2013/11/26 Javascript
js对字符的验证方法汇总
2015/02/04 Javascript
jQuery制作效果超棒的手风琴折叠菜单
2015/04/03 Javascript
coffeescript使用的方式汇总
2015/08/05 Javascript
JavaScript实现图片滑动切换的代码示例分享
2016/03/06 Javascript
JS组件Bootstrap实现弹出框效果代码
2016/04/26 Javascript
js实现漫天星星效果
2017/01/19 Javascript
JavaScript中从setTimeout与setInterval到AJAX异步
2017/02/13 Javascript
JavaScript 完成注册页面表单校验的实例
2017/08/19 Javascript
React Native react-navigation 导航使用详解
2017/12/01 Javascript
使用Vue完成一个简单的todolist的方法
2017/12/01 Javascript
浅谈vue-router 路由传参的方法
2017/12/27 Javascript
webpack4 处理SCSS的方法示例
2018/09/03 Javascript
JavaScript中构造函数与原型链之间的关系详解
2019/02/25 Javascript
详解JavaScript 作用域
2020/07/14 Javascript
JS实现斐波那契数列的五种方式(小结)
2020/09/09 Javascript
详解vue-cli项目在IE浏览器打开报错解决方法
2020/12/10 Vue.js
35个Python编程小技巧
2014/04/01 Python
python简单实现计算过期时间的方法
2015/06/09 Python
Python使用tablib生成excel文件的简单实现方法
2016/03/16 Python
快速入手Python字符编码
2016/08/03 Python
Python处理JSON数据并生成条形图
2016/08/05 Python
Python字符串的修改方法实例
2019/12/19 Python
任意一块网页内容实现“活”的背景(目前火狐浏览器专有)
2014/05/07 HTML / CSS
浅谈CSS3 box-sizing 属性 有趣的盒模型
2019/04/02 HTML / CSS
canvas绘制视频封面的方法
2018/02/05 HTML / CSS
Europcar西班牙:全球汽车租赁领域的领导者
2018/09/17 全球购物
学习十八大报告感言
2014/02/04 职场文书
党校培训自我鉴定范文
2014/04/10 职场文书
计算机相关专业自荐信
2014/07/02 职场文书
联村联户简报
2015/07/21 职场文书
一波干货,会议主持词开场白范文
2019/05/06 职场文书
使用php的mail()函数实现发送邮件功能
2021/06/03 PHP
MySQL表类型 存储引擎 的选择
2021/11/11 MySQL