JavaScript编程基础 – For循环

JavaScript编程基础 -- For循环

JavaScript Programming Essentials -- For Loop

By Jackson@ML

循环可以多次执行代码块,而不用反复重写相同的语句。这无疑对提升代码质量、减少错误大有脾益。本文将简要介绍for循环的几种案例,希望对读者有所帮助。

1. 顺序遍历

按照一定顺序遍历数值,如果需要输出一下代码结果:

javascript 复制代码
Number 1 
Number 2
Number 3 
Number 4 
Number 5 

那么,可能需要重复5次使用console.log()函数。

javascript 复制代码
console.log("Number 1");
console.log("Number 2");
console.log("Number 3");
console.log("Number 4");
console.log("Number 5");

现在,我们使用for循环,仅仅三行代码,以简化该程序:

javascript 复制代码
for (let i = 1; i <= 5; i++) {
    console.log("Number " + i );
}

执行结果如下图所示:

换个例子,以序数词数组丰富一下输出,看以下代码:

javascript 复制代码
arr1 = ['first','second','third','fourth','fifth'];

for (let i = 1; i <= arr1.length; i++){
    console.log("The " + arr1[i-1] + " number is " + i);
}

执行结果如下图所示:

2. 嵌套循环

当采用内外循环时,可能涉及到两个或多个变量变化带来的遍历,例如乘法表。

被乘数和乘数分别以变量i和变量j来标注,依次变化形成乘法表等式。代码如下:

javascript 复制代码
for (let i = 1; i <= 5; i++) {
    for (let j = 1; j <= i; j++){
        console.log(i + "*" + j + "=" + i * j);
    }    
}

执行结果如下图所示:

3. 添加条件的循环

如果想从普通的整数序列过滤出符合条件的数,例如遍历偶数,如下面代码:

javascript 复制代码
for (i = 0; i <= 6; i++){
    if (i % 2 == 0) {
        console.log("The even number:", i);
    }
}

执行结果如下图所示:

同样,如果需要遍历能被7整除的数,可以写代码如下:

javascript 复制代码
for (i = 1; i <= 30; i++) {
    if (i % 7 == 0) {
        console.log(i);
    }    
}

执行结果如下图所示:

4. 变量作用域

用来遍历数据的变量,如果在循环体声明,则服务于循环体,如果不是,则可能服务于更广的范围。假如需要遍历1至10的奇数,如下所示:

javascript 复制代码
var i = 5;
for (var i = 0; i < 10; i++){
    if (i % 2 != 0) {
        console.log("The odd number is:", i)
    }
}

执行结果如下图所示:

我们看到,尽管i变量被声明且初始化为5,但是循环体内声明的i不受任何影响,仍然按照它自己的状态进行声明和初始化,输出结果也基于这个局部变量i。

但是,如果在循环体内部不再声明和初始化,而是利用全局变量i,又有什么变化呢?看以下代码:

javascript 复制代码
var i = 5;
for (; i < 10; i++){
    if (i % 2 != 0) {
        console.log("The odd number is:", i)
    }
}

执行结果如下图所示:

本文简要介绍了for循环遍历数值的几种情况。

工作中,如果需要重复输出类似的结果,for循环将帮助您事半功倍。

技术好文陆续推出,敬请关注。

喜欢就点赞哈!您的认可,我的动力。😊

相关阅读:

  1. JavaScript编程基础 - 闭包(Closure)
  2. JavaScript编程基础 - Return语句
  3. JavaScript编程基础 - 布尔值(Booleans)
  4. JavaScript编程基础 - 对象(Objects)
  5. JavaScript编程基础 - 函数进阶
  6. JavaScript编程基础 - 条件语句
  7. JavaScript编程基础 - 函数入门
  8. JavaScript编程基础 - 关键字Let,Const和Var的区别
  9. JavaScript编程基础 - 变量
  10. JavaScript编程基础 - 输出
  11. 用Visual Studio Code搭建JavaScript开发环境
  12. 安装最新版WebStorm来开发JavaScript应用程序
相关推荐
bestadc18 分钟前
LeetCode 几道 Promises 和 Time 的题目
javascript·算法·leetcode
索迪迈科技33 分钟前
java后端工程师进修ing(研一版‖day42)
java·开发语言·学习·算法
萌萌哒草头将军33 分钟前
Node.js v24.8.0 新功能预览!🚀🚀🚀
前端·javascript·node.js
太空游走的鱼1 小时前
Vue3 + Vite + Element Plus web转为 Electron 应用,解决无法登录、隐藏自定义导航栏
javascript·electron·vue3·管理系统·element plsu
Chris.Yuan7701 小时前
Java代理模式详解
java·开发语言·代理模式
Forever_Hopeful1 小时前
【C 语言生成指定范围随机数(整数 + 小数):原理、实现与避坑指南】
服务器·c语言·开发语言
GISer_Jing1 小时前
Next系统学习(二)
前端·javascript·node.js
午夜游鱼1 小时前
Go 泛型实战:一行代码封装 sync.Pool,性能与安全兼得
开发语言·安全·golang
织_网1 小时前
Electron 核心模块速查表
javascript·electron·策略模式
EndingCoder1 小时前
Electron 原生模块集成:使用 N-API
javascript·electron·node.js·桌面端