当前位置: 首页 > news >正文

JavaScript 的 for 循环应该如何学习?

JS for 循环语法

JS for 循环适合在已知循环次数时使用,语法格式如下:

for(initialization; condition; increment) {// 要执行的代码
}

for 循环中包含三个可选的表达式 initialization、condition 和 increment,其中:

  • initialization:为一个表达式或者变量声明,我们通常将该步骤称为“初始化计数器变量”,在循环过程中只会执行一次;
  • condition:为一个条件表达式,与 while 循环中的条件表达式功能相同,通常用来与计数器的值进行比较,以确定是否进行循环,通过该表达式可以设置循环的次数;
  • increment:为一个表达式,用来在每次循环结束后更新(递增或递减)计数器的值。

示例代码如下:

for (var i = 1; i <= 10; i++) {document.write(i + " ");
}

运行结果:

1 2 3 4 5 6 7 8 9 10

上面的代码中,在循环开始之前会先执行var i = 1;,并将变量 i 作为计数器;然后判断i <= 10是否成立,如果成立则执行{ }中的代码,如果失败则退出 for 循环;在每次循环执行完成后,执行i++操作,即更新计数器的值。

【示例】使用 for 循环遍历数组中的内容:

var fruits = ["Apple", "Banana", "Mango", "Orange", "Papaya"];
for(var i = 0; i < fruits.length; i++) {document.write(fruits[i] + "&emsp;");
}

运行结果:

Apple Banana Mango Orange Papaya

JS for 循环中的三个表达式

JS for 循环中括号中的三个表达式是可以省略的,但是用于分隔三个表达式的分号不能省略,如下例所示:

// 省略第一个表达式
var i = 0;
for (; i < 5; i++) {// 要执行的代码
}
// 省略第二个表达式
for (var y = 0; ; y++) {if(y > 5){break;}// 要执行的代码
}
// 省略第一个和第三个表达式
var j = 0;
for (; j < 5;) {// 要执行的代码j++;
}
// 省略所有表达式
var z = 0;
for (;;) {if(z > 5){break;}// 要执行的代码z++;
}

JS for 循环嵌套

无论是哪种循环,都可以嵌套使用(即在一个循环中再定义一个或多个循环),下面就以 for 循环为例,来演示一下循环的嵌套使用:

for (var i = 1; i <= 9; i++) {for (var j = 1; j <= i; j++) {document.write(j + " x " + i + " = " + (i * j) + "&emsp;");}document.write("<br>");
}

运行结果:

1 x 1 = 1 
1 x 2 = 2 2 x 2 = 4 
1 x 3 = 3 2 x 3 = 6 3 x 3 = 9 
1 x 4 = 4 2 x 4 = 8 3 x 4 = 12 4 x 4 = 16 
1 x 5 = 5 2 x 5 = 10 3 x 5 = 15 4 x 5 = 20 5 x 5 = 25 
1 x 6 = 6 2 x 6 = 12 3 x 6 = 18 4 x 6 = 24 5 x 6 = 30 6 x 6 = 36 
1 x 7 = 7 2 x 7 = 14 3 x 7 = 21 4 x 7 = 28 5 x 7 = 35 6 x 7 = 42 7 x 7 = 49 
1 x 8 = 8 2 x 8 = 16 3 x 8 = 24 4 x 8 = 32 5 x 8 = 40 6 x 8 = 48 7 x 8 = 56 8 x 8 = 64 
1 x 9 = 9 2 x 9 = 18 3 x 9 = 27 4 x 9 = 36 5 x 9 = 45 6 x 9 = 54 7 x 9 = 63 8 x 9 = 72 9 x 9 = 81

for 循环变体

为了更加方便地遍历对象、数组、字符串等内容,JS 还支持两种 for 循环变体,分别是 for in 循环和 for of 循环。

JS for in 循环是一种特殊类型的循环,也是普通for循环的变体,主要用来遍历对象,使用它可以将对象中的属性依次循环出来,其语法格式如下:

for (variable in object) {// 要执行的代码
}

其中,variable 为一个变量,每次循环时这个变量都会被赋予不同的值,我们可以在{ }

中使用这个变量来进行一系列操作;object 为要遍历的对象,在每次循环中,会将 object 对象中的一个属性的键赋值给变量 variable,直到对象中的所有属性都遍历完。

JS for in 循环示例代码:

// 定义一个对象
var person = {"name": "Clark", "surname": "Kent", "age": "36"};
// 遍历对象中的所有属性
for(var prop in person) {document.write("<p>" + prop + " = " + person[prop] + "</p>");
}

运行结果:

name = Clark
surname = Kent
age = 36

注意,JS for in 循环是为遍历对象而创建的,虽然也可以遍历数组,但是并不推荐,若要遍历数组,可以使用for循环或者for of循环。

JS for of 循环是 ECMAScript6 中新添加的一个循环方式,与 for in 循环类似,也是普通 for 循环的一种变体。使用 for of 循环可以轻松的遍历数组或者其它可遍历的对象,例如字符串、对象等。

JS for of 循环的语法格式如下:

for (variable of iterable) {// 要执行的代码
}

其中,variable 为一个变量,每次循环时这个变量都会被赋予不同的值,我们可以在后面的{ }

中使用这个变量来进行一系列操作;iterable 为要遍历的内容,在每次循环中,会将 iterable 中的一个值赋值给变量 variable,直到 iterable 中的所有值都遍历完。

示例代码如下:

// 定义一个数组
var arr = ['a', 'b', 'c', 'd', 'e', 'f'];
// 使用 for of 循环遍历数组中的每个元素
for (var value of arr) {document.write(value + ", ");
}
document.write("<br>");
// 定义一个字符串
var str = "Hello World!";
// 使用 for of 循环遍历字符串中的每个字符
for (var value of str) {document.write(value + ", ");
}
document.write("<br>");
// 定义一个对象
var obj = {"name": "Clark", "surname": "Kent", "age": "36"};
// 使用 for of 循环遍历对象中的所有属性
for(var value in obj) {document.write(value + ", ");
}

运行结果:

a, b, c, d, e, f,
H, e, l, l, o, , W, o, r, l, d, !,
name, surname, age,

注意,虽然 for of 循环也可以遍历对象,但并不推荐,若要遍历对象可以使用for in循环。

黑马程序员前端JavaScript入门到精通全套视频教程,javascript核心进阶ES6语法、API、js高级等基础知识和实战教程

http://www.lryc.cn/news/178838.html

相关文章:

  • C++核心编程--对象篇
  • 安装php扩展XLSXWriter,解决php导入excel表格时获取日期变成浮点数的方法
  • Vue+element开发Simple Admin后端管理系统页面
  • 源码编译安装pkg-config
  • 游览器找不到服务器上PHP文件的一种原因
  • C++之std::function的介绍
  • 卷积神经网络学习(一)
  • 使用KEIL自带的仿真器仿真遇到问题解决
  • 4700 万美元损失,Xn00d 合约漏洞攻击事件分析
  • 第5讲:v-if与v-show的使用方法及区别
  • C理解(一):内存与位操作
  • ESP8266使用记录(四)
  • 云原生Kubernetes:K8S安全机制
  • 【数据结构】归并排序、基数排序算法的学习知识点总结
  • 【C++】C++模板进阶 —— 非类型模板参数、模板的特化以及模板的分离编译
  • HTML的相关知识
  • 基于微信小程的流浪动物领养小程序设计与实现(源码+lw+部署文档+讲解等)
  • Java后端接口编写流程
  • 【问题记录】解决“命令行终端”和“Git Bash”操作本地Git仓库时出现 中文乱码 的问题!
  • 软考高级之系统架构师之软件需求工程
  • 使用 Velocity 模板引擎的 Spring Boot 应用
  • mysql的mvcc详解
  • FreeRTOS两个死机原因(中断调用接口异常)【杂记】
  • 【AI视野·今日Robot 机器人论文速览 第四十三期】Thu, 28 Sep 2023
  • 批量快捷创建新数组的几种方式
  • 单目标应用:基于沙丁鱼优化算法(Sardine optimization algorithm,SOA)的微电网优化调度MATLAB
  • 基于Halo搭建个人博客
  • DPDK系列之三十一DPDK的并行机制简介
  • 【Java】复制数组的四种方式
  • 设计模式5、原型模式 Prototype