关于前端:JavaScript实用技巧一循环遍历与跳出循环遍历

【JavaScript实用技巧（一）】循环遍历与跳出循环遍历

博客阐明

文章所波及的材料来自互联网整顿和集体总结，意在于集体学习和教训汇总，如有什么中央侵权，请分割自己删除，谢谢！

阐明

一想到想到循环，顺其自然就想到了for，while就在这里先不讲（因为自身它就有循环退出的条件），但其实Js的循环不止这个for，这里来具体讲讲Js的几品种for循环。

一想到想到循环的跳出，立马就会想到三个要害：break、return、continue，在业务中也会须要在遍历的时候退出循环。

for类循环遍历数组

1、for循环

const arr = [1, 2, 3, 4, 5, 6]
for (let i = 0; i < arr.length; i++) {
    console.log(i)
}

这是最简略的一种，也是应用的频率最高的一种，性能绝对其余的要好，所以看见他人源码底层用这个千万别xxx，三思而行！

不过这里有一个细节能够优化，将长度作为长期变量存起来，不用每次计算，在数据量大的时候晋升较为显著。

const arr = [1, 2, 3, 4, 5, 6]
for (let i = 0, len = arr.length; i < len; i++) {
    console.log(i)
}

2、for…in循环

const arr = [1, 2, 3, 4, 5, 6]
for (let i in arr) {
    console.log(i)
}

在数组上利用for…in循环，不仅仅会蕴含所有数值索引，还会蕴含所有可枚举属性。所以个别用于对象的遍历上。且这个形式的循环遍历的效率最低

3、forEach循环

const arr = [1, 2, 3, 4, 5, 6]
arr.forEach((item, index) => {
    console.log(item)
})

forEach是数组自带的，应用的频率比拟高，然而性能比for要低一些

因为forEach是数组自带的，所以在其余相似数组类型下须要做个变动，它的性能比forEach弱一些

const arr = [1, 2, 3, 4, 5, 6]
Array.prototype.forEach.call(arr, (item) => {
    console.log(item)
})

4、map遍历

const arr = [1, 2, 3, 4, 5, 6]
arr.map((item) => {
    console.log(item)
})

map的形式用的原来越多，应用非常不便和优雅，然而效率比拟低（绝对于forEach）

5、for…of遍历

const arr = [1, 2, 3, 4, 5, 6]
for (let i of arr) {
    console.log(i)
}

for…of是es6的新语法，性能比for…in好一些，然而比不上一般for循环

跳出循环

下面提到跳出循环时想到的三个关键词：break、return、continue，for和for…in可能响应这三个关键词，然而forEach不行。先讲一下这个三个关键词吧

for循环跳出循环

• break：break语句会使运行的程序立即退出蕴含在最内层的循环或者退出一个switch语句。
• continue：continue语句和break语句类似。所不同的是，它不是退出一个循环，而是开始循环的一次新迭代。continue语句只能用在while语句、do/while语句、for语句、或者for/in语句的循环体内, 在其余中央应用都会引起谬误。
• return：return语句就是用于指定函数返回的值。return语句只能呈现在函数体内，呈现在代码中的其余任何中央造成语法错误。

const arr = [1, 2, 3, 4, 5, 6]
for (let i = 0; i < arr.length; i++) {
    console.log(i)
    if (i === 2) {
        return;
        // breack;
    }
}

forEach跳出循环

在forEach中不响应这个跳出循环的语句，所以它不行，但肯定要让它行，行不行？行！

有一个骚操作，间接来个抛错，我不终止，我抛错！

try {
  const arr = [1, 2, 3, 4, 5, 6]
  // 执行到第4次，完结循环
  arr.forEach(function(item,index){
    if (item === 4) {
       throw new Error("EndIterative");
    }
    console.log(item);// 1,2,3
  });
} catch(e) {
   if(e.message!="EndIterative") throw e;
};
// 上面的代码不影响继续执行
console.log(10);

然而这种形式不举荐，咱没必要，间接用for循环就好，速度又快

感激

万能的网络

以及勤奋的本人，集体博客，GitHub测试，GitHub

公众号-归子莫，小程序-小归博客