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

这篇具有很好参考价值的文章主要介绍了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高级等基础知识和实战教程文章来源地址https://www.toymoban.com/news/detail-730679.html

到了这里,关于JavaScript 的 for 循环应该如何学习?的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【JavaScript】数组 ② ( JavaScript 数组索引 | JavaScript 遍历数组 | 使用 for 循环遍历数组 )

    在 JavaScript 中 , 数组 的 \\\" 索引 \\\" 又称为 \\\" 下标 \\\" , 从 0 开始计数 , 是 可用于访问 数组元素 的 \\\" 序号 \\\" ; 通过 数组索引 可以 访问 / 获取 / 修改 对应的数组元素 , 语法如下 : 访问数组 元素 时 , 要注意数组的边界 , 如果尝试访问一个不存在的索引 , 会返回 undefined 值 , 并不会报

    2024年04月28日
    浏览(43)
  • 无涯教程-Javascript - For...in循环语句

    for ... in 循环用于循环访问对象的属性,由于无涯教程尚未讨论 Objects 对象,您就会发现此循环非常有用。 “ for...in”循环的语法为: 在每次迭代中,将 object 对象中的一个属性分配给 variablename 变量,此循环一直进行到对象的所有属性。 请尝试以下示例来实现\\\" for-in\\\"循环,它

    2024年02月16日
    浏览(31)
  • JavaScript经典面试题之for循环click

    复制 该段代码期望实现效果如下:点击p标签,弹出该p标签位置序号。请问上述代码能否实现该需求,如果不能,应该如何实现? 答案显而易见,不能。点击每个p标签都会弹出5。 要解决此问题,首先要了解 闭包 的概念。 闭包 是JavaScript语言的一个难点,也是它的特色,很

    2024年02月09日
    浏览(49)
  • JavaScript for循环语句的特殊案例,用代码解决数学中的问题

    案例一: 一百个和尚分一百个馒头,大和尚一人分三个,小和尚三人分一个,正好分完。问大、小和尚各几人? 案例二: 案例:鸡翁一值钱五,鸡母一值钱三,鸡雏三值钱一。百钱买百鸡,问鸡翁、鸡母、鸡雏各几何? 案例三: 小明单位发了100元的购物卡,小明到超市买三

    2024年02月06日
    浏览(29)
  • 〖大前端 - 基础入门三大核心之JS篇⑯〗- JavaScript的流程控制语句「for循环语句及算法题」

    当前子专栏 基础入门三大核心篇 是免费开放阶段 。 推荐他人订阅,可获取扣除平台费用后的35%收益,文末名片加V! 说明:该文属于 大前端全栈架构白宝书专栏, 目前阶段免费开放 , 购买任意白宝书体系化专栏可加入 TFS-CLUB 私域社区。 福利:除了通过订阅\\\"白宝书系列专

    2024年02月07日
    浏览(38)
  • JavaScript中的事件循环机制,包括事件循环的原理、宏任务和微任务、事件队列和调用栈、以及如何优化事件循环

    JavaScript中的事件循环机制是JavaScript运行引擎的核心之一,它决定了代码的执行方式和效率。本文将从几个方面介绍JavaScript中的事件循环机制,包括事件循环的原理、宏任务和微任务、事件队列和调用栈、以及如何优化事件循环。 一、事件循环的原理 事件循环是JavaScript中实

    2024年02月05日
    浏览(34)
  • JavaScript到底应不应该加分号?JavaScript自动插入分号规则详解

    JavaScript 提供了 automatic semicolon insertion (ASI)自动插入分号规则,在不加分号的情况下,会自动补充分号来分隔不同语句。 导致在继左大括号换行、tab 和 space 圣战后,前端又出现了一场战争。 并且随着那个男人加入这场讨论之后,关于是否应该加分号的讨论更是激烈了。 在决

    2024年01月18日
    浏览(37)
  • ArcGIS JSAPI 学习教程 - 初识 ArcGIS Maps SDK for JavaScript

    近期由于工作需要,开始接触 ArcGIS Maps SDK for JavaScript (以下简称 JSAPI ),为了更好的系统的学习,准备开设专栏,作为学习记录。 本文作为第一篇,首先介绍一下 JSAPI 的概览、官方示例以及官方 API。 然后完成 JSAPI 的 helloworld 以及注意事项。 最后简述一下 JSAPI 的优势劣势

    2024年01月19日
    浏览(36)
  • 【JavaScript】JavaScript 程序流程控制 ⑥ ( while 循环概念 | while 循环语法结构 )

    在 JavaScript 中 , while 循环 是一种 \\\" 循环控制语句 \\\" , 使用该语句就可以 重复执行一段代码块 , 直到指定的 \\\" 条件表达式 \\\" 不再满足 , 如果 \\\" 条件表达式 \\\" 一开始就不满足 , 循环体 永远不会执行 ; while 循环语法结构如下 : 首先 , 执行 \\\" 条件表达式 \\\" , 在上述语法结构中 , \\\" 条件

    2024年04月15日
    浏览(30)
  • 鸿蒙App开发选择Java还是JavaScript?

    nbsp; nbsp; nbsp; nbsp;众所周知, Java和 JavaScript是两种编程语言,这两种语言在不同的环境中都有许多用途。在鸿蒙nbsp; App开发 中, Java和 JavaScript是两种常见的编程语言,它们都具有广泛的应用,并且都有其独特的优势。下面我们将就这两种编程语言进行比较,以帮助开发者更

    2024年02月06日
    浏览(45)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包