控制流深入

javascript-core 覆盖 if/for 基础；本课深入 switch 穿透、for-in vs for-of、标签与 break/continue，以及可迭代协议——为理解数组高阶方法与 react-essentials 列表渲染打基础。

学习目标

• 正确使用 switch 与 break
• 区分 for-in（键）与 for-of（值）
• 理解可迭代对象与 for-of 的关系

switch 与穿透

function httpLabel(code) {
  switch (code) {
    case 200:
    case 201:
      return '成功';
    case 404:
      return '未找到';
    default:
      return '其他';
  }
}

忘记 break 会穿透到下一 case——有时故意利用，多数情况是 bug。

for / while / do-while

const lessons = ['intro', 'types', 'functions'];
for (let i = 0; i < lessons.length; i++) {
  console.log(i, lessons[i]);
}

let n = 0;
while (n < 3) n++;

do {
  // 至少执行一次
} while (false);

for-in vs for-of

const arr = ['a', 'b'];
for (const index in arr) {
  console.log(index); // '0', '1'（字符串键，含继承可枚举属性）
}

for (const value of arr) {
  console.log(value); // 'a', 'b'
}

const map = new Map([['x', 1]]);
for (const [k, v] of map) {
  console.log(k, v);
}

for-in 遍历对象可枚举键（含原型链，需 hasOwnProperty 过滤）；for-of 遍历可迭代对象的值。

break / continue 与标签

outer: for (let i = 0; i < 3; i++) {
  for (let j = 0; j < 3; j++) {
    if (i === 1 && j === 1) break outer;
  }
}

标签 break 在嵌套循环中跳出外层；日常代码优先重构为函数 + return。

可迭代与展开

const set = new Set([1, 2, 2, 3]);
const unique = [...set]; // [1, 2, 3]

function* idGen() {
  let id = 0;
  while (true) yield ++id;
}
const gen = idGen();
gen.next().value; // 1

自定义类实现 [Symbol.iterator]() 即可 for-of 遍历。

与框架列表渲染

// React 思想：map 替代手动 for
const items = tracks.map((t) => ({ id: t.slug, label: t.title }));