JavaScript大前端
JavaScript 条件语句与循环结构详解
是 JavaScript 快速入门教程的下篇，重点讲解条件判断与循环结构。内容包括 if 语句基本用法、双等号与三等号区别、else-if 逻辑组合及三目运算符简化写法。同时介绍 switch 语句结构与 break 重要性。循环部分对比 for 与 while 语法差异，演示 for 循环遍历数组对象及 for...of 循环用法。适合前端初学者理解基础控制流。
是 JavaScript 快速入门教程的下篇，重点讲解条件判断与循环结构。内容包括 if 语句基本用法、双等号与三等号区别、else-if 逻辑组合及三目运算符简化写法。同时介绍 switch 语句结构与 break 重要性。循环部分对比 for 与 while 语法差异，演示 for 循环遍历数组对象及 for...of 循环用法。适合前端初学者理解基础控制流。
本篇博客是快速入门 JavaScript 的极简教程，旨在让非科班、对前端开发感兴趣的同学快速入手。本文将深入探讨 JavaScript 中的 if 条件语句、三目运算符以及 switch 语句，帮助读者理解它们的使用场景和实际应用。同时还将介绍 for 和 while 循环的基本结构及其在遍历数组时的有效应用。
首先声明 x 常量，写 if 去检查一下 x 是否等于 10，现在使用三等号来检验 x 是否等于 10。如果条件为真，就打印 x 是 10。
const x = 10;
if (x === 10) {
console.log('x is 10');
}
运行，得到了 x 是 10。
如果把三等号改成双等号，它就不再考虑数据的类型了。
如果把 x 从数 10 改为字符串 "10"：
const x = "10";
if (x == 10) {
console.log("x is 10");
}
还会得到打印的结果。
但如果再改回三等号，可以看到就不再得到打印的结果，因为字符串和数字不是同类型的，所以改回 === 时，又得到了不打印结果。
不同的程序员也许会有不同的使用习惯，但有很多人喜欢使用三等号来保证数据类型也是相同的。
再来了解一下 else，else 会在 if 条件是假时被执行，所以再打印 x 不是 10，将 x 改为 20：
const x = 20;
if (x === 10) {
console.log("x is 10");
} else {
console.log("x is not 10");
}
于是就得到了 x 不是 10。
如果还希望有其他的条件区块，就可以添加 else-if 条件语句，写 else-if x 是否大于 10，打印 x 是大于 10 的，根据比较区间，于是将 else 中的打印语句改为 x 是小于 10 的，将 x 改为 4。
const x = 4;
if (x === 10) {
console.log("x is 10");
} else if (x > 10) {
console.log("x is greater than 10");
} else {
console.log("x is less than 10");
}
是得到了 x 小于 10。
再来声明常量 y 赋值为 10，写 if x 大于 5 或这里使用双竖线表示或 y 大于 10，删掉后面的区块，写 x 是大于 5 的，且 y 是大于 10 的。
const x = 4;
const y = 10;
if (x > 5 || y > 10) {
console.log("x is greater than 5 or y is greater than 10");
}
现在什么也没有得到，但如果将 y 改成 11 const y = 11; 就得到了打印结果。
如果使用且关系使用两个与符号，这时候又什么都得不到了。
if (x > 5 && y > 10)
因为且关系必须要两边同时是真的时候，整个条件句才能为真。
此时如果再把 x 改为 6：
const x = 6;
const y = 11;
if (x > 5 && y > 10) {
console.log("x is greater than 5 and y is greater than 10");
}
现在就得到了打印的结果。
下面介绍与条件判断有关的三目运算符。
首先声明常量 x 并赋值为 10，声明 color 其实与 x 是否大于 10 有关，所以在等号右面写 x 大于 10，使用问号来表示条件为真时，希望表达式的返回值，设为红色，使用冒号表示 else，也就是条件为假时，表达式的值是多少，设为蓝色。
const x = 10;
const color = x > 10 ? "red" : "blue";
console.log(color);
打印一下 color：
得到了蓝色，因为 10 并不大于 10。
将 x 改为 11 const x = 11; 现在得到了红色，因为 11 大于 10。
大家记住三目运算符后，就可以在很多地方简化自己的 if-else 代码。
下面来了解一下 switch 语句，switch 语句也是一种条件语句。
const x = 11;
const color = x > 10 ? "red" : "blue";
switch (color) {
case "red":
console.log("color is red");
break;
case "blue":
console.log("color is blue");
break;
default:
console.log("color is not red or blue");
}
break 是非常重要的，如果不写 break，程序就会执行其匹配到的 case 后面的所有语句，而无视后面的 case 条件，直到遇到 break 或者执行完全部在 switch 中的程序语句后才会停止。
下面介绍一下循环语句。
先来了解一下 for 循环，for 后面跟一对小括号。在这里要先声明循环变量，比如 i 并初始化，写一下循环条件，例如 i 小于 10，当 i 小于 10 的时候，循环就会被执行。最后使用加加的运算符，让 i 每次循环后递增，来保证循环不是死循环。在循环里打印 i：
for (let i = 0; i < 10; i++) {
console.log(i);
}
运行，得到了从 0 到 9 的结果。
因为 10 不小于 10，所以 10 没有被输出。
如果希望 10 被打印出来，可以将小于改成小于等于。
可以在循环里做任何事情，比如写模板字符串：
for (let i = 0; i < 10; i++) {
console.log(`For Loop Number: ${i}`);
}
输出这样的结果。
还有 while 循环，它和 for 的区别是要在外部声明循环变量。写 let i，赋值为 0，在 while 括号里写循环条件。在花括号里，使用同样的循环语句。有一件事是一定要注意的，就是要在 while 里面改变循环变量，否则它就会变成死循环。要让 i 每次递增 1。
let i = 0;
while (i < 10) {
console.log(`While Loop Number: ${i}`);
i++;
}
执行，得到了相同的结果。
现在使用曾经使用过的对象数组来作为循环的对象，使用 for 循环来做这件事情，将循环条件的 10 改为 todos 的长度，打印 todos 中每对象的 text 属性的值。
const todos = [
{ id: 1, text: "Take out trash", isCompleted: true },
{ id: 2, text: "Meeting with boss", isCompleted: true },
{ id: 3, text: "Dentist appt", isCompleted: false }
];
for (let i = 0; i < todos.length; i++) {
console.log(`${todos[i].text}`);
}
运行，得到了期望的结果。
还可以使用另一种 for 循环的写法，在括号中声明循环变量 todo，在 todos 中，前面的循环变量可以是任何东西，而后面的 todos 是被循环的数组，此时 todo 就是数组中的每一项，如果把 todo 打印出来，就会得到数组中的每一项。如果希望得到每一项的 text，只需打印 todo.text。
const todos = [
{ id: 1, text: "Take out trash", isCompleted: true },
{ id: 2, text: "Meeting with boss", isCompleted: true },
{ id: 3, text: "Dentist appt", isCompleted: false }
];
for (let todo of todos) {
console.log(todo.text);
}
如果希望得到每一项的 ID，只需要打印 todo.id。
本篇博客介绍了 JavaScript 中的条件语句和循环语句的基本用法，适合初学者或需要复习基础知识的开发者。首先，通过详细示例讲解了 if 语句、双等号与三等号的区别、if-else 和 else-if 语句的用法，并演示了逻辑运算符的使用。
此外，还介绍了三目运算符的简洁表达方式，并详细解释了 switch 语句的结构与用法。接着，深入剖析了 for 和 while 循环的基本结构，展示了如何利用循环遍历数组，最后引入了 for...of 循环。
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具，Keycode 信息在线工具，online
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。 在线工具，Escape 与 Native 编解码在线工具，online
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具，JavaScript / HTML 格式化在线工具，online
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。 在线工具，JavaScript 压缩与混淆在线工具，online
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online