编程笔记 html5&css&js 079 JavaScript 循环语句

简介: 编程笔记 html5&css&js 079 JavaScript 循环语句


在JavaScript中,有几种不同的循环语句用于执行重复的代码块。

循环语句

以下是一些主要的循环类型及其详解与示例:

1. for 循环

// 标准的 for 循环包含三个表达式:初始化、条件判断和更新部分
for (let i = 1; i <= 10; i++) {
    console.log(i); // 输出 1 到 10 的数字
}
// 示例一:输出三角形图案
for (let i = 1; i <= 5; i++) {
    let line = '';
    for (let j = 1; j <= i; j++) {
        line += '* ';
    }
    console.log(line);
}
// 结果:
// * 
// * *
// * * *
// * * * *
// * * * * *
// 示例二:计算1到100的总和
let sum = 0;
for (let i = 1; i <= 100; i++) {
    sum += i;
}
console.log(sum); // 输出结果为5050

2. while 循环

// while 循环会在条件满足时一直执行循环体内的代码
let count = 1;
while (count <= 10) {
    console.log(count);
    count++;
}
// 示例:计算1加到某个数(例如100)的总和
let total = 0;
let number = 1;
while (number <= 100) {
    total += number;
    number++;
}
console.log(total); // 输出结果为5050

3. do...while 循环

// do...while 循环至少会执行一次循环体,然后再检查条件是否满足
let index = 0;
do {
    console.log(index);
    index++;
} while (index < 5);
// 示例:同样计算1到某个数的总和,但确保至少执行一次循环
let sumDoWhile = 0;
let currentNumber = 1;
do {
    sumDoWhile += currentNumber;
    currentNumber++;
} while (currentNumber <= 100);
console.log(sumDoWhile); // 输出结果同样为5050

4. for...in 循环

// for...in 循环用于遍历对象的所有可枚举属性
let obj = { a: 1, b: 2, c: 3 };
for (let prop in obj) {
    if (obj.hasOwnProperty(prop)) {
        console.log(prop + ': ' + obj[prop]);
    }
}
// 结果:
// a: 1
// b: 2
// c: 3
// 注意:在实际开发中,为了安全起见通常会检查属性是否是对象自身的属性而非继承的。

5. for...of 循环

// for...of 循环用于遍历可迭代对象,如数组、Set、Map等
let array = [1, 2, 3, 4, 5];
for (let value of array) {
    console.log(value);
}
// 结果:
// 1
// 2
// 3
// 4
// 5
// 示例:计算数组元素的总和
let numbers = [1, 2, 3, 4, 5];
let sumOfArray = 0;
for (let num of numbers) {
    sumOfArray += num;
}
console.log(sumOfArray); // 输出结果为15

以上就是JavaScript中常用的循环结构及其示例。

小结

结合一些在学习中可以用到的处理内容来练习。比如输出一下九九乘法表。

相关文章
|
5月前
|
移动开发 前端开发 JavaScript
征信报告修改器,征信报告生成器,制作软件无痕修改软件【js+html+css】
本项目为信用评分模拟器教学工具,采用HTML5实现,仅供学习参考。核心功能通过JavaScript构建,包含虚拟数据生成、权重分配及信用因素分析(如还款记录、信用使用率等)。
|
5月前
|
前端开发 JavaScript
个人征信电子版无痕修改, 个人信用报告pdf修改,js+html+css即可实现【仅供学习用途】
本代码展示了一个信用知识学习系统的前端实现,包含评分计算、因素分析和建议生成功能。所有数据均为模拟生成
|
5月前
|
存储 前端开发 JavaScript
仿真银行app下载安装, 银行卡虚拟余额制作app,用html+css+js实现逼真娱乐工具
这是一个简单的银行账户模拟器项目,用于学习前端开发基础。用户可进行存款、取款操作,所有数据存储于浏览器内存中
|
5月前
|
前端开发
个人征信PDF无痕修改软件,个人征信模板可编辑,个人征信报告p图神器【js+html+css仅供学习用途】
这是一款信用知识学习系统,旨在帮助用户了解征信基本概念、信用评分计算原理及信用行为影响。系统通过模拟数据生成信用报告,涵盖还款记录
|
5月前
|
前端开发 JavaScript 容器
制作b超单生成器, 假怀孕b超单图片制作, p图医院证明【css+html+js装逼恶搞神器】
本资源提供一个适合用于熟人之间恶搞的工具,效果逼真,仅供学习参考与娱乐。包含前端技术学习要点:语义化布局、响应式设计、Flexbox、图片自适应
|
存储 JavaScript 前端开发
JavaScript与PHP中正则
有个在线调试正则的工具,点击查看工具。下面的所有示例代码,都可以在codepen上查看到。
JavaScript与PHP中正则
|
JavaScript 前端开发 PHP
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
277 2
|
12月前
|
JavaScript 前端开发
JavaScript中的原型 保姆级文章一文搞懂
本文详细解析了JavaScript中的原型概念,从构造函数、原型对象、`__proto__`属性、`constructor`属性到原型链,层层递进地解释了JavaScript如何通过原型实现继承机制。适合初学者深入理解JS面向对象编程的核心原理。
195 1
JavaScript中的原型 保姆级文章一文搞懂
|
12月前
JS+CSS3文章内容背景黑白切换源码
JS+CSS3文章内容背景黑白切换源码是一款基于JS+CSS3制作的简单网页文章文字内容背景颜色黑白切换效果。
119 0