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

35次阅读

共计 1910 个字符,预计需要花费 5 分钟才能阅读完成。

【JavaScript 实用技巧(一)】循环遍历与跳出循环遍历

博客阐明

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

阐明

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

一想到想到循环的跳出,立马就会想到三个要害:breakreturncontinue,在业务中也会须要在遍历的时候退出循环。

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 循环

跳出循环

下面提到跳出循环时想到的三个关键词:breakreturncontinue,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

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

正文完
 0