写点什么

小白必看的,JS 中循环语句大集合

发布于: 2021 年 06 月 09 日

​​​​摘要:JavaScript 中,一共给开发者提供了一下几种循环语句,分别是 while 循环,do…while 循环,for 循环,for Each,for…in 循环和 for…of 循环。


本文分享自华为云社区《JS中循环语句大集合丨【WEB前端大作战】》,原文作者:hwJw19 。


JavaScript 中,一共给开发者提供了一下几种循环语句,分别是 while 循环,do…while 循环,for 循环,for Each,for…in 循环和 for…of 循环。


下面我们就通过本文来仔细分辨一下,各个循环的使用差异。

while 循环


语法:


while (expr){	statement}
复制代码


​expr 为条件表达式,当 expr 为真时,执行 statement 语句,执行结束后,再次进入下一轮循环,直到条件表达式为假时,跳出循环。



代码示例:


var n = 1;  //声明并初始化循环变量while(n <= 100){  //循环条件    n++;  //递增循环变量    if (n % 2 == 0) document.write(n + "");   //执行循环操作}
复制代码

do…while 循环


语法:


do{	statement} while(expr)
复制代码


​do…while 循环与 while 循环很相似,区别在于,while 循环是先判断再执行,而 do…while 循环会先执行一次语句,然后再开始判断循环。不论条件为真或者是假,都会执行一次。



代码示例:


var text = "" var i = 0; do { text += "<br>数字为 " + i; i++; } while (i < 5); document.getElementById("demo").innerHTML = text;
复制代码

for 循环


语法:


for (expr 1; expr 2; expr 3){    statement }
复制代码


​for 循环想必也是大家比较熟悉的一种循环方式了,for 循环主要用户循环执行一定次数的代码块,小括号中,是 for 循环的条件,花括号中,是循环条件为 true 时所需要执行的语句。缺点是写法比较麻烦。



示例代码:


for (var i=0; i<5; i++) { x=x + "该数字为 " + i + "<br>"; }
复制代码

forEach 循环


语法:


array.forEach(function(currentValue, index, arr), thisValue)
复制代码


​由于 for 循环的写法比较繁琐,因此数组提供了内置的 forEach 方法,语法中的参数 currentValue 是必填的,其他参数选填。forEach 语句的问题在于,无法中途跳出 forEach 循环,break 命令或 return 命令都不能奏效。


代码示例:


var arr = [1, 2, 3, 4, 5];arr.forEach(function (item) {    console.log(item);});
复制代码

for…in 循环


语法:


for (var in object) {statement } 
复制代码


​for…in 循环主要用于循环遍历对象,可以获取对象的键名,但是 for…in 并不适合遍历数组,主要有如下原因:


1.   数组的键名是数字,但是..in 循环是以字符串作为键名“0”、“1”、“2”等等。

2.   ..in 循环不仅遍历数字键名,还会遍历手动添加的其他键,甚至包括原型链上的键。

3.   某些情况下,..in 循环会以任意顺序遍历键名。


代码示例:


var person = {fname:"John", lname:"Doe", age:32};  var text = "";var x;for (x in person) {    text += person[x] + " ";}
复制代码

for...of 循环


语法:


for (variable of iterable) { //要执行的语句 }
复制代码


​for...of 循环,是可以遍历所有数据结构的统一的方法,它可以使用的范围包括数组、Set 和 Map 结构、某些类似数组的对象(比如 arguments 对象、DOM NodeList 对象)、后文的 Generator 对象,以及字符串。读取的是遍历对象的键值。for...of 循环的优点:


1.   有着同 for...in 一样的简洁语法,但是没有 for...in 那些缺点。

2.   不同于 forEach 方法,它可以与 break、continue 和 return 配合使用。

3.   提供了遍历所有数据结构的统一操作接口。


代码示例:


const iterable = ['mini', 'mani', 'mo']; for (const value of iterable) {  console.log(value);}
复制代码


​关于 JS 循环语法的相关内容,就简单到这里了,欢迎大家沟通交流,批评指正。


点击关注,第一时间了解华为云新鲜技术~

发布于: 2021 年 06 月 09 日阅读数: 10
用户头像

提供全面深入的云计算技术干货 2020.07.14 加入

华为云开发者社区,提供全面深入的云计算前景分析、丰富的技术干货、程序样例,分享华为云前沿资讯动态,方便开发者快速成长与发展,欢迎提问、互动,多方位了解云计算! 传送门:https://bbs.huaweicloud.com/

评论

发布
暂无评论
小白必看的,JS中循环语句大集合