Skip to content

程序控制

1. 条件语句

1.1 if

A. 基础结构

const score = 85;

if (score >= 90) {
    console.log("优秀 (A)");
} else if (score >= 60) {
    console.log("及格 (B)"); // 这一行会被执行
} else {
    console.log("不及格 (C)");
}

B. 真假

在 if (condition) 的括号里，JavaScript 不仅仅接受 true 或 false。它会把任何值都强制转换为布尔值。

  • 假值 (Falsy): false, 0, "" (空字符串), null, undefined, NaN。

  • 真值 (Truthy): 除了上面 6 个，其他所有值都是真（包括空数组 [] 和空对象 {}）。

const username = ""; // 空字符串是假值

if (username) {
    console.log("欢迎, " + username);
} else {
    console.log("请先登录"); // 执行这里
}

1.2 switch 语句

const day = 2;

switch (day) {
    case 1:
        console.log("今天是周一");
        break; // 必须加！否则会继续执行 case 2
    case 2:
        console.log("今天是周二");
        break; // 执行这里，然后跳出
    case 3:
        console.log("今天是周三");
        break;
    default:
        console.log("未知的一天");
}

注意： switch 进行比较时使用的是严格相等 (===)，这意味着类型必须一致（字符串 "1" 不等于数字 1）。

1.3 三元运算符

const age = 20;

const type2 = age >= 18 ? "成年人" : "未成年";
console.log(type2); // "成年人"

1.4 短路逻辑

利用逻辑运算符（&&, ||）来代替简短的 if 语句。

A. 逻辑与 (&&)

常用于 React 或 Vue 中，或者执行某个函数前先判断对象是否存在。

const isLogined = true;

// 只有当 isLogined 为 true 时，才会执行后面的 alert
isLogined && alert("欢迎回来！");

// 等同于: if (isLogined) { alert("欢迎回来！"); }

B. 逻辑或 (||) —— "默认值保底"

如果前面的值是“假值”（比如 null 或 undefined），就使用后面的默认值。

const inputName = null;
const displayName = inputName || "游客";

console.log(displayName); // "游客"

2. 循环和控制结构

2.1 for 循环

2.2 while 循环

2.3 do...while 循环

2.4 循环控制：Break 和 Continue

以上全部同 C。

2.5 现代循环语法 (ES6+)

除了上面传统的 for 循环，现代 JavaScript (ES6) 提供了更简洁的语法来遍历数据（特别是数组和对象）。

A. for...of (主要用于数组)

它直接取出数组中的值，而不是索引。

const fruits = ["Apple", "Banana", "Orange"];

// 传统写法：需要 fruits[i]
// for (let i = 0; i < fruits.length; i++) { ... }

// 现代写法：读起来像英语一样顺畅
for (const fruit of fruits) {
    console.log(fruit);
}
// 输出: Apple, Banana, Orange

B. for...in (主要用于对象)

它遍历的是键名 (Key) 或索引。一般用来遍历对象的属性。

const user = { name: "Gemini", age: 1, role: "AI" };

for (const key in user) {
    console.log(key + ": " + user[key]);
}
// 输出:
// name: Gemini
// age: 1
// role: AI

3. 设置和使用定时器

JavaScript 提供两个方法 setTimeout() 和 setInterval()，都是 HTML DOM window 对象的方法。

3.1 setTimeout(action, delay) —— 延时执行

该方法在第 2 个参数指定的毫秒数后，调用作为第一个参数传入的函数（或计算该表达式）。

假设页面包含一个 <div> 元素： <div id="id1">I'm about to disappear</div>

function hide(elementId){
    document.getElementById(elementId).style.display = 'none';
}

// 在页面加载完毕后执行
window.onload = function(){
    setTimeout("hide('id1')",3000); // 字符串内写函数调用是古老写法，易被注入且性能较差，有以下更好的写法：
    // 写法 A：传入匿名函数（最常用）
    setTimeout(function() {
        hide('id1');
    }, 3000);

    // 写法 B：箭头函数（ES6）
    setTimeout(() => hide('id1'), 3000);
}

取消定时器： setTimeout() 返回一个值（定时器 ID），在中途取消定时，可以将这个返回值传给 clearTimeout() 方法。

var timer1 = setTimeout("hide('id1')", 3000);
clearTimeout(timer1); // 取消执行

3.2 setInterval(action, delay) —— 循环执行

  • 功能：工作方式与 setTimeout 类似，但它不是执行一次，而是重复地执行。

  • 特性：每隔指定的时间段（第2个参数），就会再次触发代码执行。

  • 如何取消： 同样会返回一个值，可以通过将该值传递给 clearInterval() 方法来停止定时器。

var timer1 = setInterval("updateClock()", 1000); // 每秒更新时钟
clearInterval(timer1); // 停止更新