放弃for循环吧
前言
for(var i=0;i<array.length;i++){}这个可以是初学者必学的知识,也是JS中必不可少的功能,但如果对性能要求较高的小伙伴有了解过就会发现,for循环性能不高且代码冗余,而且如果使用双重for循环,浏览器页面奔溃的几率也会大大的提高;于是本篇文章会讲解替代for循环的方法,如果有更好的方法的小伙伴,也欢迎留言,大家一起讨论成长。
1. for of
for of类似java中的加强for,性能优于普通的for循环,直接可以取到值,更重要的一点就是,相较于forEach(),for of是可以使用continue和break的!
const array = ['Tom','Jerry','Rechard'];
for(let val of array){
if(val === 'Jerry') break;
console.log(val);//Tom
}
2.filter()
filter()可以用来创建一个新数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。
注意:1.filter不会改变原素组,返回一个新数组; 2.filter不会对空数组进行检测,效率优于for循环;
const array = [34, 65, 87, 48, 99];
// filter() 方法
const arrNew = array.filter(num => {
return num >= 66;
});
console.log(arrNew); // [ 87, 99 ]
3.find()
find()就是在数组中找打符合条件的一个元素,找到之后就停止循环,如果没有符合条件的元素就返回undefined.
注意:1.find不会改变原数组,只是单独返回某个元素;2.find不会对空数组进行检测,效率优于for循环;
const array = [34, 65, 87, 48, 99];
// find() 方法
const arrNew = array.find(num => {
return num >= 66;
});
console.log(arrNew); //
4.map()--划重点!
map()数组中的元素为原始数组元素调用函数处理后的值,即新数组里面的值都是被转化为自己想要的类型。
注意:1.map不会改变原数组;2.map不会对空数组进行检测;
const array = [1, 3, 4, 5];
const res = array.map((num)=>{
return num * num;
})
console.log(res) // [ 1, 9, 16, 25 ]
5.forEach()
forEach()效率也是高于普通的for循环,但是能用for of的情况下优先用for of,这个forEach一般也是不推荐使用,性能这一块和for of相差无几。
const array = [1, 2, 3, 4]
array.forEach(val =>{
console.log(val)
}) //
总结
以上五个循环各具特色,小伙伴们可以根据实际业务场景来使用不同的功能,希望能对大家有帮助 ^_^。
放弃for循环吧的更多相关文章
- Java从入门到放弃——03.循环和判断
本文目标 选择结构:if,switch 循环结构:for , foreach ,while,do while 跳出语句:break,continue 1.选择结构 if: if(判断语句){ } s ...
- 避免for循环
http://www.360doc.com/content/10/0610/22/1217721_32411251.shtml 避免使用for循环: 在Matlab中,for循环运算效率非常低,因为M ...
- php循环跳出
PHP中的循环结构大致有for循环,while循环,do{} while 循环以及foreach循环几种,不管哪种循环中,在PHP中跳出循环大致有这么几种方式: 代码: <?php $i = 1 ...
- python第二课--分支结构与循环结构
if语句---分支结构 在Python中,要构造分支结构可以使用if.elif和else关键字.所谓关键字就是有特殊含义的单词,像if和else就是专门用于构造分支结构的关键字,很显然你不能够使用它作 ...
- python分支和循环结构
本文收录在Python从入门到精通系列文章系列 1. 分支结构 1.1 应用场景 迄今为止,我们写的Python代码都是一条一条语句顺序执行,这种代码结构通常称之为顺序结构.然而仅有顺序结构并不能解决 ...
- PYTHON 100days学习笔记004:循环结构
目录 Day04 - 循环结构 1. 循环结构的应用场景 2.for-in循环 3. while循环 4. 练习 4.1 输入一个数判断是不是素数. 4.2 输入两个正整数,计算最大公约数和最小公倍数 ...
- javascript 笔记!
1.通过javascript向文档中输出文本 document是javascript的内置对象,代表浏览器的文档部分 document.write("Hello Javascript&quo ...
- Android 线程通讯类Handler
handler是线程通讯工具类.用于传递消息.它有两个队列: 1.消息队列 2.线程队列 消息队列使用sendMessage和HandleMessage的组合来发送和处理消息. 线程队列类似一段代码, ...
- JAVA第3,4课(内容合并)
JAVA 第三课 代码执行顺序
随机推荐
- Java实现 蓝桥杯 算法提高 计算行列式
试题 算法提高 计算行列式 资源限制 时间限制:1.0s 内存限制:256.0MB 问题描述 //据说很多人的题目会有一大堆废话,本傻×就不在这里废话了. 给定一个N×N的矩阵A,求|A|. 输入格式 ...
- Java实现 蓝桥杯 算法提高金属采集
问题描述 人类在火星上发现了一种新的金属!这些金属分布在一些奇怪的地方,不妨叫它节点好了.一些节点之间有道路相连,所有的节点和道路形成了一棵树.一共有 n 个节点,这些节点被编号为 1~n .人类将 ...
- vue的第一个commit分析
为什么写这篇vue的分析文章? 对于天资愚钝的前端(我)来说,阅读源码是件不容易的事情,毕竟有时候看源码分析的文章都看不懂.每次看到大佬们用了1-2年的vue就能掌握原理,甚至精通源码,再看看自己用了 ...
- 在PyQt5中显示matplotlib绘制的图形
import sys from PyQt5.QtCore import Qt from PyQt5.QtWidgets import * from plot_pyqt import PlotCanva ...
- vue甘特图gantt
vue做甘特图,先大致介绍下核心功能: (1)横轴.纵轴拖拽: (2)自定义监听点击事件(双击.右键等)(3)任务之间显示父子层级关系:(4)左侧列表信息,右侧时间轴表示任务:(5)每个任务可以订制样 ...
- 基于session对象实现简单的购物车应用
大部分购物网站都会实现购物车的功能,基于session对象的购物车应用可以实现一个用户会话有效期内,用户所选多个商品的存储. 为了实现这样的功能需要编写三个JSP页面,分别是login.jsp.mai ...
- CISCN 2019-ikun
0x01 进去网址,页面如下: 刚开始有个登陆和注册的按钮,上图是我已经注册后登陆成功后的页面,我们发现在图的左下角给了一个关键的提示,购买LV6,通过寻找我们发现页面数很多,大概500页,一个一个找 ...
- Spark GraphX从入门到实战
第1章 Spark GraphX 概述 1.1 什么是 Spark GraphX Spark GraphX 是一个分布式图处理框架,它是基于 Spark 平台提供对图计算和图挖掘简洁易用的而丰 ...
- windbg分析一次大查询导致的内存暴涨
项目上反馈了一个问题,就是在生产环境上,用户正常使用的过程中,出现了服务器内存突然暴涨,客户有点慌,想找下原因. 讲道理,内存如果是缓慢上涨一直不释放的话,应该是存在内存泄漏的,这种排查起来比较困难, ...
- MongoDB——基本使用及集群搭建
文章目录 什么是MongoDb? 基本概念 与关系型数据库的比较 Mongo的高效性 文件存储 基本使用 启动/连接服务 基础操作命令 高可用集群搭建 概念 环境准备 实践 应用场景 总结 什么是Mo ...