前言

  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循环吧的更多相关文章

  1. Java从入门到放弃——03.循环和判断

    本文目标 选择结构:if,switch 循环结构:for , foreach ,while,do while 跳出语句:break,continue 1.选择结构 if: if(判断语句){  } s ...

  2. 避免for循环

    http://www.360doc.com/content/10/0610/22/1217721_32411251.shtml 避免使用for循环: 在Matlab中,for循环运算效率非常低,因为M ...

  3. php循环跳出

    PHP中的循环结构大致有for循环,while循环,do{} while 循环以及foreach循环几种,不管哪种循环中,在PHP中跳出循环大致有这么几种方式: 代码: <?php $i = 1 ...

  4. python第二课--分支结构与循环结构

    if语句---分支结构 在Python中,要构造分支结构可以使用if.elif和else关键字.所谓关键字就是有特殊含义的单词,像if和else就是专门用于构造分支结构的关键字,很显然你不能够使用它作 ...

  5. python分支和循环结构

    本文收录在Python从入门到精通系列文章系列 1. 分支结构 1.1 应用场景 迄今为止,我们写的Python代码都是一条一条语句顺序执行,这种代码结构通常称之为顺序结构.然而仅有顺序结构并不能解决 ...

  6. PYTHON 100days学习笔记004:循环结构

    目录 Day04 - 循环结构 1. 循环结构的应用场景 2.for-in循环 3. while循环 4. 练习 4.1 输入一个数判断是不是素数. 4.2 输入两个正整数,计算最大公约数和最小公倍数 ...

  7. javascript 笔记!

    1.通过javascript向文档中输出文本 document是javascript的内置对象,代表浏览器的文档部分 document.write("Hello Javascript&quo ...

  8. Android 线程通讯类Handler

    handler是线程通讯工具类.用于传递消息.它有两个队列: 1.消息队列 2.线程队列 消息队列使用sendMessage和HandleMessage的组合来发送和处理消息. 线程队列类似一段代码, ...

  9. JAVA第3,4课(内容合并)

    JAVA  第三课 代码执行顺序

随机推荐

  1. Java实现 洛谷 P1000 超级玛丽游戏

    public class Main { public static void main(String[] args){ System.out.println(" ********" ...

  2. java实现第六届蓝桥杯奇妙的数字

    奇妙的数字 奇妙的数字 小明发现了一个奇妙的数字.它的平方和立方正好把0~9的10个数字每个用且只用了一次. 你能猜出这个数字是多少吗? 请填写该数字,不要填写任何多余的内容. 结果:69 impor ...

  3. PAT 科学计数法

    科学计数法是科学家用来表示很大或很小的数字的一种方便的方法,其满足正则表达式 [+-][1-9].[0-9]+E[+-][0-9]+,即数字的整数部分只有 1 位,小数部分至少有 1 位,该数字及其指 ...

  4. http1.0 、http1.1和http2.0的区别

    一.HTTP1.0 HTTP 1.1主要区别       1.1 长链接             HTTP 1.0需要使用keep-alive参数来告知服务器端要建立一个长连接,而HTTP1.1默认支 ...

  5. Fiddler13模拟弱网络环境测试

    前言现在的Android软件,基本上都会有网络请求,有些APP需要频繁的传输数据时对于网络请求的稳定性和在特殊网络条件下的兼容性有要求,但是我们在测试的时候又很难模拟那种弱网络差网络的情况,今天就给大 ...

  6. Cypress系列(14)- 环境变量详解

    如果想从头学起Cypress,可以看下面的系列文章哦 https://www.cnblogs.com/poloyy/category/1768839.html 前言 环境变量,其实就是根据环境的变化, ...

  7. Python大神编程常用4大工具,你用过几个?

    摘要:Python是一种跨平台的编程语言,能够在所有主要的操作系统上,运行你编写的任何Python程序.今天介绍几款常见的工具:Python自带的解释器.文本编辑器(Geany.Sublime Tex ...

  8. delphi 控件查询

    //老古董,以前这些东西太多了,收藏的没过来,只好粘贴至此,当然不是本人整理的. delphi 控件查询:http://www.torry.net/ http://www.jrsoftware.org ...

  9. 震惊!ConcurrentHashMap里面也有死循环,作者留下的“彩蛋”了解一下?

    JDK BUG 这篇文章,聊一下我最近才知道的一个关于 JDK 8 的 BUG 吧. 首先说一下我是怎么发现这个 BUG 的呢? 大家都知道我对 Dubbo 有一定的关注,前段时间 Dubbo 2.7 ...

  10. SQL去掉重复数据

    SELECT vc_your_email,vc_our_ref_or_code INTO #tmp FROM( SELECT vc_your_email,vc_our_ref_or_code,ROW_ ...