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