编程笔记 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中常用的循环结构及其示例。

小结

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

相关文章
|
30天前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
37 0
|
13天前
|
前端开发 JavaScript 数据处理
CSS 变量的作用域和 JavaScript 变量的作用域有什么不同?
【10月更文挑战第28天】CSS变量和JavaScript变量虽然都有各自的作用域概念,但由于它们所属的语言和应用场景不同,其作用域的定义、范围、覆盖规则以及与其他语言特性的交互方式等方面都存在明显的差异。理解这些差异有助于更好地在Web开发中分别运用它们来实现预期的页面效果和功能逻辑。
|
3天前
|
缓存 前端开发 JavaScript
优化CSS和JavaScript加载
Next.js和Nuxt.js在优化CSS和JavaScript加载方面提供了多种策略和工具。Next.js通过代码拆分、图片优化和特定的CSS/JavaScript优化措施提升性能;Nuxt.js则通过代码分割、懒加载、预渲染静态页面、Webpack配置和服务端缓存来实现优化。两者均能有效提高应用性能。
|
3天前
|
前端开发 JavaScript
用HTML CSS JS打造企业级官网 —— 源码直接可用
必看!用HTML+CSS+JS打造企业级官网-源码直接可用,文章代码仅用于学习,禁止用于商业
27 1
|
8天前
|
前端开发 JavaScript 安全
HTML+CSS+JS密码灯登录表单
通过结合使用HTML、CSS和JavaScript,我们创建了一个带有密码强度指示器的登录表单。这不仅提高了用户体验,还帮助用户创建更安全的密码。希望本文的详细介绍和代码示例能帮助您在实际项目中实现类似功能,提升网站的安全性和用户友好性。
19 3
|
11天前
|
JavaScript
JS鼠标框选并删除HTML源码
这是一个js鼠标框选效果,可实现鼠标右击出现框选效果的功能。右击鼠标可拖拽框选元素,向下拖拽可实现删除效果,简单实用,欢迎下载
24 4
|
12天前
|
自然语言处理 JavaScript 前端开发
[JS]同事看了我做的this笔记,直摇头,坦言:我还是参考启发博文吧
本文介绍了JavaScript中`this`关键字的重要性和使用规则。作者回顾了早期笔记,总结了`this`指向的各种情况,并分享了最新的理解。文章强调了`this`在不同上下文中的指向,包括对象方法、全局函数、箭头函数等,并提供了改变`this`指向的方法。适合JavaScript开发者参考。
28 2
|
10天前
|
移动开发 HTML5
html5+three.js公路开车小游戏源码
html5公路开车小游戏是一款html5基于three.js制作的汽车开车小游戏源代码,在公路上开车网页小游戏源代码。
32 0
html5+three.js公路开车小游戏源码
|
19天前
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码,带歌词显示。包括支持单曲循环,歌词显示,歌曲搜索,音量控制,列表循环等功能。利用json获取音乐歌单和歌词,基于html5 audio属性手机音乐播放器代码。
69 6
|
17天前
|
自然语言处理 JavaScript 前端开发
JavaScript闭包:解锁编程潜能,释放你的创造力
【10月更文挑战第25天】本文深入探讨了JavaScript中的闭包,包括其基本概念、创建方法和实践应用。闭包允许函数访问其定义时的作用域链,常用于数据封装、函数柯里化和模块化编程。文章还提供了闭包的最佳实践,帮助读者更好地理解和使用这一强大特性。
12 2