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对JSON数据排序的3个例子
Apr 12 Javascript
JavaScript字符串常用的方法
Mar 10 Javascript
AngularJS实现与Java Web服务器交互操作示例【附demo源码下载】
Nov 02 Javascript
javascript判断firebug是否开启的方法
Nov 23 Javascript
JS实现全屏的四种写法
Dec 30 Javascript
详解微信小程序设置底部导航栏目方法
Jun 29 Javascript
vue js秒转天数小时分钟秒的实例代码
Aug 08 Javascript
JavaScript字符串处理常见操作方法小结
Nov 15 Javascript
jquery实现图片无缝滚动 蒙版遮蔽效果
Jan 11 jQuery
详解node和ES6的模块导出与导入
Feb 19 Javascript
vue项目中自定义video视频控制条的实现代码
Apr 26 Javascript
JS中的变量作用域(console版)
Jul 18 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
第一节--面向对象编程
2006/11/16 PHP
Yii实现微信公众号场景二维码的方法实例
2020/08/30 PHP
JavaScript语句可以不以;结尾的烦恼
2007/03/08 Javascript
JSON 教程 json入门学习笔记
2020/09/22 Javascript
一些老手都不一定知道的JavaScript技巧
2014/05/06 Javascript
JavaScript避免内存泄露及内存管理技巧
2014/09/05 Javascript
JavaScript中的冒泡排序法
2016/08/03 Javascript
webpack配置文件和常用配置项介绍
2017/04/28 Javascript
node.js通过axios实现网络请求的方法
2018/03/05 Javascript
详解webpack打包时排除其中一个css、js文件或单独打包一个css、js文件(两种方法)
2018/10/26 Javascript
jQuery事件blur()方法的使用实例讲解
2019/03/30 jQuery
8 个有用的JS技巧(推荐)
2019/07/03 Javascript
vue3修改link标签默认icon无效问题详解
2019/10/09 Javascript
微信小程序返回上一页传参并刷新过程解析
2019/12/13 Javascript
vue+AI智能机器人回复功能实现
2020/07/16 Javascript
vue.js实现点击图标放大离开时缩小的代码
2021/01/27 Vue.js
使用Python编写简单的端口扫描器的实例分享
2015/12/18 Python
Python实现接受任意个数参数的函数方法
2018/04/21 Python
利用python对Excel中的特定数据提取并写入新表的方法
2018/06/14 Python
python numpy实现文件存取的示例代码
2019/05/26 Python
详解程序意外中断自动重启shell脚本(以Python为例)
2019/07/26 Python
Python统计时间内的并发数代码实例
2019/12/28 Python
解决pycharm同一目录下无法import其他文件
2020/02/12 Python
Python使用sqlite3模块内置数据库
2020/05/07 Python
pyecharts调整图例与各板块的位置间距实例
2020/05/16 Python
CSS3提交意见输入框样式代码
2014/10/30 HTML / CSS
介绍一下linux的文件系统
2015/10/06 面试题
廉政教育心得体会
2014/01/01 职场文书
护士进修自我鉴定
2014/02/07 职场文书
创先争优承诺书
2015/01/20 职场文书
公司保洁员岗位职责
2015/02/13 职场文书
介绍信格式样本
2015/05/05 职场文书
初中语文教学随笔
2015/08/15 职场文书
nginx里的rewrite跳转的实现
2021/03/31 Servers
Redis实现订单自动过期功能的示例代码
2021/05/08 Redis
使用Spring处理x-www-form-urlencoded方式
2021/11/02 Java/Android