JavaScriptNode.js大前端

JavaScript 快速入门：条件语句与循环结构

是 JavaScript 快速入门教程的下篇，重点讲解条件语句与循环结构。内容涵盖 if 条件语句（含双等号与三等号区别、else-if）、三目运算符及 switch 语句的使用。此外，详细介绍了 for 循环、while 循环的基本结构，以及利用 for 循环和 for...of 遍历数组的方法。适合初学者或需要复习基础知识的开发者理解控制流逻辑。

指针猎手发布于 2026/4/6更新于 2026/9/258 浏览

JavaScript 快速入门：条件语句与循环结构

JavaScript 快速入门：条件语句与循环结构

引言

本篇博客是快速入门 JavaScript 的极简教程，旨在让非科班、对前端开发感兴趣的同学快速入手。本文将深入探讨 JavaScript 中的 if 条件语句、三目运算符以及 switch 语句，帮助读者理解它们的使用场景和实际应用。同时还将介绍 for 和 while 循环的基本结构及其在遍历数组时的有效应用。

一、if 条件语句

先来了解一下 if 条件语句。

1.1 基本 if 语句

首先声明 x 常量，写 if 去检查一下 x 是否等于 10，现在使用三等号来检验 x 是否等于 10。如果条件为真，就打印 x 是 10。

const x = 10;
if (x === 10) {
  console.log('x is 10');
}

运行，得到了 x 是 10。

在这里插入图片描述

1.2 双等号与三等号的区别

如果把三等号改成双等号，它就不再考虑数据的类型了。

如果把 x 从数 10 改为字符串 "10"：

const x = "10";
if (x == 10) {
  console.log("x is 10");
}

还会得到打印的结果。

在这里插入图片描述

但如果再改回三等号，可以看到就不再得到打印的结果，因为字符串和数不是类型的，所以改回数时，就又得到了打印结果。

不同的程序员也许会有不同的使用习惯，但有很多人喜欢使用三等号来保证数据类型也是相同的。

1.3 if-else 语句

再来了解一下 else，else 会在 if 条件是假时被执行，所以再打印 x 不是 10，将 x 改为 20：

 x = ;
 (x === ) {
  .();
}  {
  .();
}

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");
}

const x = 4;
const y = 10;
if (x > 5 || y > 10) {
  console.log("x is greater than 5 or y is greater than 10");
}

if (x > 5 && y > 10)

const x = 6;
const y = 11;
if (x > 5 && y > 10) {
  console.log("x is greater than 5 and y is greater than 10");
}

const x = 10;
const color = x > 10 ? "red" : "blue";
console.log(color);

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");
}

for (let i = 0; i < 10; i++) {
  console.log(i);
}

for (let i = 0; i < 10; i++) {
  console.log(`For Loop Number: ${i}`);
}

let i = 0;
while (i < 10) {
  console.log(`While Loop Number: ${i}`);
  i++;
}

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}`);
}

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);
}