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 相关文章推荐
firefox下对ajax的onreadystatechange的支持情况分析
Dec 14 Javascript
Js数组的操作push,pop,shift,unshift等方法详细介绍
Dec 28 Javascript
Jquery数字上下滚动动态切换插件
Aug 08 Javascript
基于JQuery和CSS3实现仿Apple TV海报背景视觉差特效源码分享
Sep 21 Javascript
vue,angular,avalon这三种MVVM框架优缺点
Apr 27 Javascript
Bootstrap学习系列之使用 Bootstrap Typeahead 组件实现百度下拉效果
Jul 07 Javascript
jQuery学习笔记——jqGrid的使用记录(实现分页、搜索功能)
Nov 09 Javascript
Vue子组件向父组件通信与父组件调用子组件中的方法
Jun 22 Javascript
jQuery实现的简单手风琴效果示例
Aug 29 jQuery
Vuex 使用 v-model 配合 state的方法
Nov 13 Javascript
webpack的pitching loader详解
Sep 23 Javascript
jQuery实现简单日历效果
Jul 05 jQuery
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你的验证码安全码?
2007/01/02 PHP
修改WordPress中文章编辑器的样式的方法详解
2015/12/15 PHP
yii2 resetful 授权验证详解
2017/05/18 PHP
javascript 数组的方法集合
2008/06/05 Javascript
javascript的onchange事件与jQuery的change()方法比较
2009/09/28 Javascript
精通Javascript系列之Javascript基础篇
2011/06/07 Javascript
左右悬浮可分组的网站QQ在线客服代码(可谓经典)
2012/12/21 Javascript
jQuery scroll事件实现监控滚动条分页示例
2014/04/04 Javascript
JavaScript字符串对象fromCharCode方法入门实例(用于把Unicode值转换为字符串)
2014/10/17 Javascript
详解Html a标签中href和onclick用法、区别、优先级别
2017/01/16 Javascript
javascript定时器取消定时器及优化方法
2017/07/08 Javascript
AngularJS 控制器 controller的详解
2017/10/17 Javascript
解决npm管理员身份install时出现权限的问题
2018/03/16 Javascript
JavaScript栈和队列相关操作与实现方法详解
2018/12/07 Javascript
Vue组件教程之Toast(Vue.extend 方式)详解
2019/01/27 Javascript
利用vue重构有赞商城的思路以及总结整理
2019/02/21 Javascript
如何利用JavaScript编写更好的条件语句详解
2020/08/10 Javascript
如何通过JS实现日历简单算法
2020/10/14 Javascript
python网络爬虫 Scrapy中selenium用法详解
2019/09/28 Python
opencv python如何实现图像二值化
2020/02/03 Python
Python数据正态性检验实现过程
2020/04/18 Python
Python环境使用OpenCV检测人脸实现教程
2020/10/19 Python
详解HTML5.2版本带来的修改
2020/05/06 HTML / CSS
Luxplus丹麦:香水和个人护理折扣
2018/04/23 全球购物
Converse匡威法国官网:美国著名帆布鞋品牌
2018/12/05 全球购物
The Kooples美国官方网站:为情侣提供的法国当代时尚品牌
2019/01/03 全球购物
Koral官方网站:女性时尚运动服
2019/04/10 全球购物
Java里面StringBuilder和StringBuffer有什么区别
2016/06/06 面试题
了解AppleShare protocol(AppleShare协议)吗
2015/08/28 面试题
大学生实习期自我评价范文
2013/10/03 职场文书
飞机制造技术专业求职信
2014/07/27 职场文书
会议开幕词
2015/01/28 职场文书
2015年元宵节活动总结
2015/02/06 职场文书
试用期旷工辞退通知书
2015/04/17 职场文书
预备党员的思想汇报,你真的会写吗?
2019/06/28 职场文书
超详细教你怎么升级Mysql的版本
2021/05/19 MySQL