for 循环

for 是最经典的循环，三段结构要记牢：for (初始化; 条件; 更新)——先执行初始化，再判断条件，条件为真就执行循环体，最后执行更新，如此往复。

遍历数据有两种更现代的写法：for...of 直接拿数组的值，适合数组和字符串；for...in 遍历对象的键名，是给对象用的。注意别用 for...in 遍历数组，它会把原型上的可枚举属性也遍历出来，而且拿到的下标是字符串。

嵌套循环的执行次数是外层次数 × 内层次数，双重 for 就能画出九九乘法表这类二维结构。

本节要点for 三段结构：初始化、条件、更新；for...of 拿数组的值，for...in 拿对象的键；两者别用反了。

JavaScript

// 经典 for：知道循环次数时用
for (let i = 1; i <= 5; i++) {
  console.log('第 ' + i + ' 次循环');
}

// 用下标遍历数组
const fruits = ['苹果', '香蕉', '橘子'];
for (let i = 0; i < fruits.length; i++) {
  console.log(i, fruits[i]);
}

// for...of：直接拿值（数组、字符串都行）
for (const f of fruits) {
  console.log(f);
}

// for...in：遍历对象的键（数组别用它）
const user = { name: '小明', age: 18 };
for (const key in user) {
  console.log(key, '→', user[key]);
}

// 嵌套循环：九九乘法表片段
for (let i = 1; i <= 3; i++) {
  let row = '';
  for (let j = 1; j <= 3; j++) row += i + '×' + j + '=' + i * j + '  ';
  console.log(row);
}

🔗 相关词条数组原型 addEventListener async/await JavaScript classList

📚 推荐阅读

十大经典排序算法万象云档

阮一峰《TypeScript 教程》万象云档

IndexedDB API 3.0万象云档

Socket.IO v4 中文文档万象云档

带你入门前端工程万象云档

来自万象云档的免费在线书籍，点击封面直接阅读