【5】JavaScript - 控制语句 循环[ for/while ]

news/2024/5/18 16:08:40 标签: javascript, udp, 开发语言

控制语句

  • while/do...while 语句
    • while 语句：
    • do...while 语句：
    • 两者的区别
    • 无限循环
  • for 语句
    • 普通的 for 循环
    • for...in 循环
    • for...of 循环
  • 循环过程：跳出/跳过
    • 跳出
    • 跳过
  • 循环嵌套
  • 扩展延申：做一次杠精

当前 控制语句 章节主要介绍 循环：for、while 的使用。

while/do…while 语句

while 和 do...while 是 JavaScript 中两种常用的循环语句，它们用于重复执行代码块直到指定条件不再满足为止。

while 语句：

  • while 语句首先检查指定的条件是否为真，如果条件为真，则执行代码块，然后重复这个过程直到条件为假为止。
  • 语法结构为：
    javascript">while (condition) {
    // 执行的代码块
}
  • 示例：
    javascript">let count = 0;
while (count < 5) {
    console.log(count);
    count++;
}

do…while 语句：

  • do...while 语句与 while 语句类似，不同之处在于它先执行代码块，然后再检查条件是否为真。这意味着即使条件初始时为假，代码块至少会被执行一次。
  • 语法结构为：
    javascript">do {
    // 执行的代码块
} while (condition);
  • 示例：
    javascript">let count = 0;
do {
    console.log(count);
    count++;
} while (count < 5);

这两种循环语句都有自己的用途，你可以根据具体情况选择合适的循环结构来完成任务。

两者的区别

while 和 do...while 之间的主要区别在于它们对条件的检查时间：

  1. while 语句：

    • 在 while 语句中，首先检查条件是否为真，如果条件为假，则代码块不会被执行。
    • 如果条件初始时就为假，代码块将完全不会执行。

  2. do...while 语句：

    • 在 do...while 语句中，首先执行一次代码块，然后再检查条件是否为真。
    • 即使条件初始时为假，代码块至少会被执行一次。

因此，do...while 适用于需要至少执行一次代码块的情况，而 while 则更适用于只在条件为真时才执行代码块的情况。

如下示例-（来演示 while 和 do...while 循环之间的区别）：

示例 1：使用 while 循环

javascript">let count1 = 0;
while (count1 < 5) {
    console.log("while 循环: ", count1);
    count1++;
}

在这个示例中，while 循环首先检查条件 count1 < 5 是否为真。如果初始时 count1 的值已经大于或等于 5，那么代码块将根本不会执行。只有在条件为真时，即 count1 的值小于 5 时，代码块才会被执行。

示例 2：使用 do...while 循环

javascript">let count2 = 0;
do {
    console.log("do...while 循环: ", count2);
    count2++;
} while (count2 < 5);

在这个示例中，do...while 循环首先执行一次代码块，然后再检查条件 count2 < 5 是否为真。即使初始时 count2 的值大于或等于 5，代码块也至少会被执行一次。

示例说明：

假设 初始时 count1 和 count2 的值都是 5，那么在 while 循环中，代码块根本不会执行，因为条件不满足。而在 do...while 循环中，代码块会被执行一次，然后检查条件，发现条件不满足，循环结束。

因此，do...while 循环适用于需要至少执行一次代码块的情况，而 while 循环则更适用于只在条件为真时才执行代码块的情况。

无限循环

Q：什么是无限循环？
A：永远不会结束（条件表达式结果不为 False）的循环称为无限循环。

javascript">	// condition 这个表达式 结果不为 False，将会无限循环
     while (condition) { 
     
         // 执行的代码块
     }

javascript">     do {
         // 执行的代码块
         
     } while (condition); // condition 这个表达式 结果不为 False，将会无限循环

下面是一个无限循环的示例，使用 while 循环：

javascript">while (true) {
    console.log("这是一个无限循环！");
}

在这个示例中，循环条件始终为 true，因此循环将无限执行下去，打印出 “这是一个无限循环！”
的消息。由于循环条件永远为真，程序将永远无法跳出循环，除非手动停止执行或发生错误。

注意：

  1. 无限循环会给 浏览器 带来极大的负荷，甚至导致死机。所以，在写循环处理之前，首先要确认循环是否能正常结束。
  2. 无限循环在某些程序中，也有可能是有意设计的，例如在某些服务程序或事件驱动的应用程序中，需要保持程序持续运行以监听事件。

for 语句

上面篇幅讲解了while/do...while循环，当前讲解for循环。但在此之前，先说下两者的区别？

区别：

  • while/do...while 是根据条件表达式的真假控制循环的。
  • for 是根据执行指定次数控制循环的。

Q ：啥意思呢？
A ：听我慢慢给你狡辩~~~

首先，需要先知晓：在 JavaScript 中，for循环的写法，一般有三种：普通的 for 循环、for…in 循环、for…of 循环

现在分别 一 一 介绍：

普通的 for 循环

语法格式：

javascript">for(初始值; 继续循环的条件表达式; 增减表达式) {
  // 循环体：即 -> 循环内重复执行的代码。
}

例如：需求 打印 1、2、3、4
非循环代码：

javascript">console.log(1);
console.log(2);
console.log(3);
console.log(4);

上述，console.log(); 表示在浏览器控制台进行输出（即打印）；需求打印的只是4个数字，直接写 4遍console.log() 能实现需求，到也没啥？ 但若需求要打印 400 个数字，此时在 console.log() 分别写出、反而不太现实。
此时，便可使用 for 循环（或者while等循环也行，此处介绍for循环）

使用 for 循环，打印 1、2、3、4

javascript">for(var i = 1; i <= 4; i++) {
  console.log(i);
}

扩展说明： i++ 的意思，就是：i = i + 1;

程序员数数一般是从 零 开始数，所以，上面的代码示例，也可以更新如下：

javascript">for(var i = 0; i < 4; i++) {
	console.log(i+1);
}

for…in 循环

当使用 for...in 循环时，它会遍历对象的可枚举属性，并对每个属性执行指定的操作。

语法格式：

javascript">for (variable in object) {
    // 循环体
}

什么是 对象？ 后面章节会介绍，当前若不太理解；那就先记住有for..in 这样的一种循环

下面是一个详细的例子：

javascript">// 定义一个对象
const person = {
    name: '九皇叔叔',
    age: 28,
    city: '上海'
};

// 使用 for...in 循环遍历对象的属性
for (let key in person) {
    // 检查对象是否拥有该属性，而不是原型链上的属性
    if (person.hasOwnProperty(key)) {
        // 打印属性名和对应的值
        console.log(key + ': ' + person[key]);
    }
}

在这个例子中，我们有一个名为 person 的对象，它有三个属性：name、age 和 city。然后，我们使用 for...in 循环遍历了 person 对象的属性。在循环的每次迭代中，key 变量将被赋值为对象的一个属性名。我们使用 hasOwnProperty 方法来确保属性确实属于对象本身，而不是继承自原型链。

在循环的每次迭代中，我们打印属性名和对应的值。输出将会是：

javascript">name: 九皇叔叔
age: 28
city: 上海

这就是 for...in 循环，它非常适用于遍历对象的属性。
需要注意的是：for...in 循环不会按照属性的顺序进行遍历，而且它会遍历对象的所有可枚举属性，包括从原型链继承而来的属性。因此，在处理对象属性时，需要谨慎使用，并且结合 hasOwnProperty 方法来过滤出对象本身的属性。

for…of 循环

for...of 循环用于遍历可迭代对象（例如数组、字符串、Map、Set 等），并对其中的每个元素执行指定的操作。

语法格式：

javascript">for (variable of iterable) {
    // 循环体
}

其中：

  • variable：在每次迭代中，variable 会被赋值为可迭代对象中的当前元素。这是一个变量，用于引用当前迭代的元素。
  • iterable：表示一个可迭代对象，例如数组、字符串、Map、Set 等。

在 for...of 循环中，variable 将会依次取得 iterable 中的每个元素，并且循环体会针对每个元素执行一次。这使得 for...of 循环非常适合用于遍历可迭代对象中的元素，并且相对于普通的 for 循环来说，更加简洁易读。`

下面是一个示例：

javascript">// 定义一个数组
const arr = [1, 2, 3];

// 使用 for...of 循环遍历数组
for (let value of arr) {
    console.log(value);
}

在这个例子中，我们有一个名为 arr 的数组，包含了几个整数。然后，我们使用 for...of 循环遍历了数组 arr 中的每个元素。在循环的每次迭代中，value 变量将被赋值为数组的一个元素值。

在循环的每次迭代中，我们打印了 value 的值。输出将会是：

1
2
3

这就是 for...of 循环的详细示例。它提供了一种简洁的方式来遍历可迭代对象中的元素，并且与传统的 for 循环相比，不需要索引或者额外的索引变量，使代码更加清晰易读。需要注意的是，for...of 循环仅遍历可迭代对象的元素值，而不会遍历对象的属性。

扩展 思考：上述的 for ... of 示例，可否使用 普通的 for 循环 实现？？

肯定是可行的，代码如下：

javascript">// 定义一个数组
const arr = [1, 2, 3];

// 使用普通的 for 循环遍历数组
for (let i = 0; i < arr.length; i++) {
    // 获取数组的每个元素
    const value = arr[i];
    console.log(value);
}

至此，三种 for 循环的方式，也就介绍完了。

回过头来，看最初的问题：
区别：

  • while/do...while 是根据 条件表达式的真假 控制循环的。
  • for 是根据 执行指定次数 控制循环的。

Q ：啥意思呢？

现在以 需求示例：计算 1+2+…+100 的结果是多少？进行解答啥意思？

while 循环的方式，实现需求，代码如下：

javascript">let sum = 0;
let i = 1;

// 看这里，i <= 100 这个结果只有两种可能：True 或者 False
// True: 真， False：假
// `while/do...while` 是根据 **条件表达式的真假** 控制循环的。
while (i <= 100) { 
    sum += i;
    i++;
}

console.log('从1加到100的和为：' + sum);

for 循环的方式，实现需求，代码如下：

javascript">let sum = 0;

// 看这里，是一个循环的次数；
// `for` 是根据 **执行指定次数** 控制循环的。
for (let i = 1; i <= 100; i++) {
    sum += i;
}

console.log('从1加到100的和为：' + sum);

至此，啥意思呢？ 介绍结束了，也没啥意思。

循环过程：跳出/跳过

无论是 while 还是 for 在循环的过程中，都是可以进行 跳出/跳过

跳出：就是终止当前循环的意思。
跳过：就是跳过当前迭代，继续执行下一次迭代，直至整个循环结束。

跳出

使用 break 关键字可以在循环中跳出循环，停止循环的执行。

javascript">// 使用 for 循环来查找数组中的某个特定元素，并在找到时跳出循环
const arr = [1, 2, 3, 4, 5, 6];
const target = 4;
let found = false;

for (let i = 0; i < arr.length; i++) {
    if (arr[i] === target) {
        found = true;
        break; // 当找到目标元素时，跳出循环
    }
}

console.log(found ? "找到了目标元素" : "未找到目标元素");

在这个例子中，我们遍历数组 arr，如果找到了目标元素 target，则将 found 设置为 true，并且使用 break 关键字跳出循环。这样，当找到目标元素时，循环将停止执行。

跳过

使用 continue 关键字可以跳过当前循环的某次迭代。

javascript">// 使用 for 循环打印数组中的奇数，并跳过偶数
const arr = [1, 2, 3, 4, 5, 6];
for (let i = 0; i < arr.length; i++) {
    if (arr[i] % 2 === 0) {
        continue; // 如果当前元素是偶数，则跳过本次循环迭代
    }
    console.log(arr[i]);
}

在这个例子中，我们遍历数组 arr，如果当前元素是偶数，则使用 continue 关键字跳过本次循环迭代，直接进行下一次迭代。这样，只有奇数才会被打印出来。

这就是在 JavaScript 中使用 break 和 continue 实现跳出循环和跳过当前迭代的使用。这两个关键字可以帮助我们更加灵活地控制循环的执行流程。

循环嵌套

循环嵌套就是：循环里面嵌套循环。
可以是while 里面嵌套while，也可以 while 里面嵌套 for 循环 等等情况；当然也可以嵌套很多层，不过一般 不超过3层。

例如，打印 九九乘法口诀表

while 循环方法，实现：

javascript">// 使用 while 循环打印乘法口诀表
let i = 1;
while (i <= 9) {
    let row = '';
    let j = 1;
    while (j <= i) {
        row += `${j} * ${i} = ${i * j}\t`;
        j++;
    }
    console.log(row);
    i++;
}

在这里插入图片描述

此外，
还可以使用 for 循环方法，实现：

javascript">// 使用 for 循环打印乘法口诀表
for (let i = 1; i <= 9; i++) {
    let row = '';
    for (let j = 1; j <= i; j++) {
        row += `${j} * ${i} = ${i * j}\t`;
    }
    console.log(row);
}

在这里插入图片描述

扩展说明
循环嵌套：跳出

如下：

javascript">【A】for(var i = 0; i < 100; i++) {
  【B】for(var j = 0; j < 100; j++) {
  	【C】for(var k = 0; k < 100; k++) {
    	// 这里面有好多..好多代码...
    	break;
    }
  }
}

注意

  1. 上述的代码中，break 只能跳出（或终止）【C】处的 for 循环，不能跳出【A】、【B】两处的 for 循环。
  2. 若将 break 换成 continue 也是如此意思（即只能对【C】处的 for 循环有作用）。

扩展延申：做一次杠精

扩展延申，主要是延申：for 循环；
杠精呢，我们主要杠：for ... in 和 for ... of

当时举例讲解 for 循环 时，便说明了：

  • for ... in 用来遍历对象；
  • for ... of 用来遍历数组；

那，能不能用 for...in 来遍历 数组 呢？?

在回答问题之前，先看下：对象、数组；
如何创建对象？数组？

javascript">// 创建一个对象,
// 当然也可以使用语法糖方式创建对象：var client = {...};
var client = new Object();
client['name'] = '九皇叔叔';
client['age'] = 28;

// 创建一个数组，
// 当然也可以使用语法糖方式创建数组：var tangGuo = ['1颗糖', '2颗糖', '3颗糖'];
var tangGuo = new Array(3); // 创建一个长度为3的空数组
tangGuo[0] = '1颗糖';
tangGuo[1] = '2颗糖';
tangGuo[2] = '3颗糖';

现在呢，我 篇要用、我 就要用 for...in 来遍历数组：

javascript">for (let index in tangGuo) {
    console.log(`索引 ${index} 对应的值为：${tangGuo[index]}`);
}

在浏览器的控制台中 => 运行结果如下：
在这里插入图片描述

看着没啥问题，是吧。
但是呢，不建议：你这么做（使用 for...in 变量 数组）

用大白话解释一下：

假如你有女朋友（虽然我也没有），

  • 那在结婚之前呢，一般称呼是：宝宝；（电视上看的）。
  • 那结婚之后呢，一般称呼是媳妇。（也是电视上看的）。

但是呢，你非要杠：结婚之前，就是要喊 媳妇。

那，就是要喊 媳妇 行不行呀？？

  • -----也行，但是：不建议你这么喊。
  • 万一 被你七大姑八大姨听到了，她们就会很诧异：你媳妇？？你小子、这是啥时候结的婚呀？？怎么还不给我们说一声呀？？我这份子钱都准备好了、哎呀呀~~太把我们当外人了…（发生了一些预期之外的事情）

就像我们的程序一样，若使用for...in 遍历数组，也万一 一不小心会 发生了一些预期之外的事情

例如：
在实际开发代码时，会写很多很多代码（扩充功能的呀等等），就像下面这样，使用原型扩充了一个炫耀糖果的方法：

javascript">Array.propertype.xuanyao = function() { 
	return '我有好多好多~糖果！！！';
}

浏览器控制台-执行代码后，输出如下（没有报错，说明方法扩充成功了）：
在这里插入图片描述

然后，在次使用 for...in 打印一下，

在打印之前，我们做一个预期：
预期打印的结果还是之前一样（如下）：不会输出扩充方法。
在这里插入图片描述

但是，
实际上：
浏览器控制台输出结果如下：（发生了一些预期之外的事情）。假若扩充了10个方法 那也是会打印出来10个的。
在这里插入图片描述

那这个时候，
在使用for...of 进行打印呢？符合预期：没有输出扩充的方法
在这里插入图片描述

综上，

  1. 当使用 for...in 循环时，它会遍历对象的 可枚举属性，并对每个属性执行指定的操作。
  2. for...of 循环用于遍历 可迭代对象（例如数组、字符串、Map、Set 等），并对其中的每个元素执行指定的操作。
  3. 不建议使用 for...in 循环 遍历 可迭代对象（例如数组、字符串、Map、Set 等）。

http://www.niftyadmin.cn/n/5470720.html

相关文章

Qt模拟面试(超硬核)

Qt模拟面试(超硬核)

1. 请简要介绍一下你的 Qt 开发经验。 建议&#xff1a;诚实地描述你的 Qt 经验&#xff0c;包括你使用过的 Qt 版本、开发过的项目类型、遇到的挑战以及如何解决它们。 假如你没有开发经验&#xff0c;可以提供一些关于 Qt 开发的一般信息和常见的经验分享。 Qt 是一个跨平…
阅读更多...
2024年华为OD机试真题-运输时间-Java-OD统一考试（C卷）

2024年华为OD机试真题-运输时间-Java-OD统一考试（C卷）

题目描述： M（1<=M <=20）辆车需要在一条不能超车的单行道到达终点，起点到终点的距离为N（1<=N<=400）。速度快的车追上前车后，只能以前车的速度继续行驶，求最后一车辆到达目的地花费的时间。 注：每辆车固定间隔1小时出发，比如第一辆车0时出发，第二辆车1时出…
阅读更多...
查看并设定【网络适配器】的优先级（跃点数）

查看并设定【网络适配器】的优先级（跃点数）

目录 前言&#xff1a; 1.查看所有的适配器 2.修改优先级&#xff08;需要以管理员身份运行&#xff09; 跃点数&#xff08;InterfaceMetric &#xff09; DHCP 3.修改后的效果 pwoerShell 再次运行之前的程序 4.其他 参考 网络适配器1&#xff0c;8相关知识介绍1 …
阅读更多...
易宝OA ExecuteSqlForDataSet SQL注入漏洞复现

易宝OA ExecuteSqlForDataSet SQL注入漏洞复现

0x01 产品简介 易宝OA系统是一种专门为企业和机构的日常办公工作提供服务的综合性软件平台，具有信息管理、 流程管理 、知识管理（档案和业务管理）、协同办公等多种功能。 0x02 漏洞概述 易宝OA ExecuteSqlForDataSet接口处存在SQL注入漏洞，未经身份认证的攻击者可以通过…
阅读更多...
mysql 从同一个表获取数据update自身报错一例

mysql 从同一个表获取数据update自身报错一例

我在mysql中&#xff0c;想将一些记录的某个字段&#xff0c;改成跟某条记录的该字段的值一样&#xff0c;语句如下&#xff1a; update org_user set password(select password from org_user where loginnameadmin limit 1) where userid>1000;结果就报错了&#xff0c;提…
阅读更多...
利用免费的开源AI引擎：优化企业合规管理与合同审核

利用免费的开源AI引擎：优化企业合规管理与合同审核

合同作为商业活动中的重要法律文件&#xff0c;其准确性、完整性和合规性对于保障企业利益至关重要。然而&#xff0c;传统的人工合同审核和管理过程耗时耗力&#xff0c;且容易出错。随着人工智能技术的发展&#xff0c;我们现在可以通过智能化的手段来优化合同审核和管理流程…
阅读更多...
瑞吉外卖实战学习--14、菜品上传

瑞吉外卖实战学习--14、菜品上传

添加菜品接口 前言效果图1、菜品分类查询接口2、上传图片和下载图片3、创建接收数据的Dto4、创建提交的方法 前言 本项目gitee位置&#xff1a;gitee网址 本篇文章是学习了添加菜品的总结&#xff0c;其中包括菜品分类的接口&#xff0c;图片上传接口&#xff0c;数据整体上传…
阅读更多...
【华为OD机试】推荐多样性（JavaPythonC++JS实现）

【华为OD机试】推荐多样性（JavaPythonC++JS实现）

本文收录于专栏：算法之翼 本专栏所有题目均包含优质解题思路，高质量解题代码(Java&Python&C++&JS分别实现)，详细代码讲解，助你深入学习，深度掌握！ 文章目录 一. 题目二.解题思路三.题解代码Python题解代码JAVA题解代码C/C++题解代码JS题解代码四.代码讲解(Ja…
阅读更多...
最新文章

Copyright @ 2022~2023