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

小结

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

相关文章
|
9天前
|
移动开发 前端开发 JavaScript
大气实用的HTML5/CSS3个人中心页面(含源码)
大气实用的HTML5/CSS3个人中心页面(含源码)
|
9天前
|
前端开发 程序员
HTML+CSS+JavaScript制作动态七夕表白网页(含音乐+自定义文字)
一年一度的520情人节/七夕情人节/女朋友生日/程序员表白,是不是要给女朋友或者正在追求的妹子一点小惊喜呢,今天这篇博客就分享下前端代码如何实现HTML+CSS+JavaScript制作七夕表白网页(含音乐+自定义文字)。赶紧学会了,来制作属于我们程序员的浪漫吧!
21 0
HTML+CSS+JavaScript制作动态七夕表白网页(含音乐+自定义文字)
|
16天前
|
JavaScript 前端开发
JavaScript基础&实战 JS中正则表达式的使用
这篇文章介绍了JavaScript中正则表达式的使用,包括正则表达式的创建、匹配模式、字符串匹配、拆分、搜索、匹配和替换等方法,并通过示例代码展示了如何应用这些技术。
JavaScript基础&实战 JS中正则表达式的使用
|
16天前
|
JavaScript 前端开发
JavaScript基础&实战(5)js中的数组、forEach遍历、Date对象、Math、String对象
这篇文章介绍了JavaScript中的数组、Date对象、Math对象以及包装类(String、Number、Boolean),并详细讲解了数组的创建、方法(如forEach、push、pop、unshift、slice、splice)和遍历操作,以及工厂方法创建对象和原型对象的概念。
JavaScript基础&实战(5)js中的数组、forEach遍历、Date对象、Math、String对象
|
16天前
|
JavaScript 前端开发
JavaScript基础&实战(4)js中的对象、函数、全局作用域和局部作用域
这篇文章介绍了JavaScript中对象的基本概念和操作,包括对象属性和方法的使用、对象字面量的创建、函数的定义和作用域的概念,以及全局作用域和局部作用域的区别和特性。
JavaScript基础&实战(4)js中的对象、函数、全局作用域和局部作用域
|
16天前
|
JavaScript 前端开发
JavaScript基础&实战(3)js中的流程控制语句、条件分支语句、for循环、while循环
这篇文章讲解了JavaScript中的流程控制语句,包括基本的if条件判断、弹窗提示输入、switch条件分支语句、while和do...while循环以及for循环的使用和示例。
JavaScript基础&实战(3)js中的流程控制语句、条件分支语句、for循环、while循环
|
1天前
|
缓存 JavaScript 前端开发
Vue.js与JavaScript性能优化终极揭秘:掌握这些技巧,让你的Web应用飞一般地流畅!
【8月更文挑战第30天】随着前端应用复杂度的增加,性能优化变得至关重要。本文深入探讨了如何利用Vue.js和JavaScript实现高效的应用性能。主要内容包括:优化组件设计以减少不必要的渲染,采用异步组件与懒加载技术加速应用启动,利用虚拟滚动和分页处理大数据集,改进Vuex使用方式以及合理运用浏览器缓存等策略。通过具体示例和最佳实践,帮助开发者充分挖掘Vue.js潜力,打造高性能的前端应用。
|
1天前
|
设计模式 JavaScript 前端开发
从工厂到单例再到策略:Vue.js高效应用JavaScript设计模式
【8月更文挑战第30天】在现代Web开发中,结合使用JavaScript设计模式与框架如Vue.js能显著提升代码质量和项目的可维护性。本文探讨了常见JavaScript设计模式及其在Vue.js中的应用。通过具体示例介绍了工厂模式、单例模式和策略模式的应用场景及其实现方法。例如,工厂模式通过`NavFactory`根据用户角色动态创建不同的导航栏组件;单例模式则通过全局事件总线`eventBus`实现跨组件通信;策略模式用于处理不同的表单验证规则。这些设计模式的应用不仅提高了代码的复用性和灵活性,还增强了Vue应用的整体质量。
|
1天前
|
JavaScript 前端开发 API
揭秘Vue.js与JavaScript融合的神秘力量:如何一键解锁高效响应式Web应用的终极秘籍?
【8月更文挑战第30天】随着前端技术的发展,Vue.js凭借其轻量级、易上手和高度响应式的特性,在前端开发领域迅速崛起,成为构建现代Web应用的首选框架之一。Vue.js与JavaScript深度融合,使开发者能高效灵活地打造美观且功能强大的应用。本文将作为实战指南,带您深入了解Vue.js与JavaScript结合的奥秘,揭示构建高效响应式Web应用的秘籍。从Vue.js的基础开始,逐步介绍如何利用其数据驱动视图的特点,结合JavaScript的高级特性,如定时器、Promise、async/await等,提升应用的交互性和用户体验。
|
9天前
|
存储 JavaScript 前端开发
JavaScript:揭秘网页背后的魔法,一探究竟JS的神奇力量!
【8月更文挑战第22天】JavaScript(JS)始于1995年,以网页动态效果闻名。随Node.js等技术发展,JS现广泛用于服务器端、桌面及移动应用开发。JS是解释型语言,在浏览器中直接运行。基本语法涵盖变量声明、数据类型、运算符及控制结构。变量可用`var`、`let`或`const`声明,支持多种数据类型如`Number`、`String`。函数是代码的基本单元,支持匿名及箭头函数。对象用于表示复杂数据结构。ES6引入了类、模块等新特性。异步编程通过回调、Promises及async/await实现。掌握这些基础知识,有助于开发者构建高质量的Web应用。
23 0
下一篇
云函数