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 13 Javascript
简单实用的反馈表单无刷新提交带验证
Nov 15 Javascript
jquery跨域请求示例分享(jquery发送ajax请求)
Mar 25 Javascript
jQuery多级弹出菜单插件ZoneMenu
Dec 18 Javascript
jQuery中outerWidth()方法用法实例
Jan 19 Javascript
JavaScript操作cookie类实例
Mar 31 Javascript
AngularJS表单验证功能
Oct 19 Javascript
微信小程序支付及退款流程详解
Nov 30 Javascript
从零开始实现Vue简单的Toast插件
Dec 03 Javascript
ES2020 已定稿,真实场景案例分析
May 25 Javascript
Vue自定义组件双向绑定实现原理及方法详解
Sep 03 Javascript
JS实现页面侧边栏效果探究
Jan 08 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
用Zend Encode编写开发PHP程序
2006/10/09 PHP
解析PHP中DIRECTORY_SEPARATOR,PATH_SEPARATOR两个常量的作用
2013/06/21 PHP
Laravel中Trait的用法实例详解
2016/03/16 PHP
thinkPHP线上自动加载异常与修复方法实例分析
2016/12/01 PHP
php微信开发之关注事件
2018/06/14 PHP
PHP笛卡尔积实现算法示例
2018/07/30 PHP
PHP单元测试配置与使用方法详解
2019/12/27 PHP
javascript 终止函数执行操作
2014/02/14 Javascript
javascript实现淡蓝色的鼠标拖动选择框实例
2015/05/09 Javascript
详解JavaScript中的forEach()方法的使用
2015/06/08 Javascript
javascript实现列表滚动的方法
2015/07/30 Javascript
JavaScript File API实现文件上传预览
2016/02/02 Javascript
深入理解JS addLoadEvent函数
2016/05/20 Javascript
微信小程序开发之录音机 音频播放 动画实例 (真机可用)
2016/12/08 Javascript
js实现打地鼠小游戏
2017/02/13 Javascript
基于HTML5+JS实现本地图片裁剪并上传功能
2017/03/24 Javascript
ES6学习教程之模板字符串详解
2017/10/09 Javascript
vue判断input输入内容全是空格的方法
2018/03/02 Javascript
vue.js的vue-cli脚手架中使用百度地图API的实例
2019/01/21 Javascript
vue 解决IOS10低版本白屏的问题
2020/11/17 Javascript
对web.py设置favicon.ico的方法详解
2018/12/04 Python
Python的Lambda函数用法详解
2019/09/03 Python
python、Matlab求定积分的实现
2019/11/20 Python
Python序列化pickle模块使用详解
2020/03/05 Python
Keras自定义IOU方式
2020/06/10 Python
Django vue前后端分离整合过程解析
2020/11/20 Python
HTML5拖拽功能实现的拼图游戏
2018/07/31 HTML / CSS
在html页面中取得session中的值的方法
2020/08/11 HTML / CSS
TUMI澳大利亚网站:美国旅行箱包品牌
2017/03/27 全球购物
麦当劳印度网上订餐:McDelivery
2020/03/16 全球购物
物业经理自我鉴定
2014/03/03 职场文书
检察院院长群众路线教育实践活动个人整改措施
2014/10/04 职场文书
英语辞职信范文
2015/02/28 职场文书
2016年度继续教育学习心得体会
2016/01/19 职场文书
2016年教师党员承诺书范文
2016/03/24 职场文书
如何使用Python提取Chrome浏览器保存的密码
2021/06/09 Python