JavaScript 循环结构注意事项示例详解

for (初始化; 条件; 增量) {
  // ...
}

// 增量每次 +1
for (let i = 0; i < 10; i++) {
  console.log(i);
}
// 增量每次 +2
for (let i = 0; i < 10; i += 2) {
  console.log(i);
}

const arr = ['前', '端', '路', '引'];
// 提前使用 len 缓存数组长度
for (let i = 0, len = arr.length; i < len; i++) {
  console.log(arr[i]);
}

// 同时声明多个变量
let a = '前端路引', b = 2, c = true;

const obj1 = {
  name: '前端路引', 
  age: 1,
  'favorite-color': 'red', 
}
for (let key in obj1) {
  console.log(key, obj1[key]);
}
/*
// 输出结果
name 前端路引
age 1
favorite-color red
*/

// 如果有兄弟不小心给对象的原型链上填了一笔
Object.prototype.test = '我是原型链上的测试属性';

const obj1 = {
  name: '前端路引', 
  age: 1,
  'favorite-color': 'red', 
}
for (let key in obj1) {
  console.log(key, obj1[key]);
}
/*
// 输出结果
name 前端路引
age 1
favorite-color red
test 我是原型链上的测试属性
*/

for (const key in obj1) {
  if (obj.hasOwnProperty(key)) {  // 过滤掉原型链属性
    console.log(key, obj1[key]);
  }
}
/*
// 输出结果
name 前端路引
age 1
favorite-color red
*/

const obj1 = {
  name: '前端路引', 
  age: 1,
  'favorite-color': 'red', 
}
// for of 循环
for (let [key, value] of Object.entries(obj1)) {
  console.log(key, value);
}
/* // 以上 let [key, value] 使用了 解构赋值，其代码等于
for (let item of Object.entries(obj1)) {
  const [key, value] = item;
  console.log(key, value);
}
// 又等于
for (let item of Object.entries(obj1)) {
  const key = item[0];
  const value = item[1];
  console.log(key, value);
}
*/

let i = 0;

while (i < 3) {
  console.log(i);
  i++;
}

let userInput;
do {
  userInput = prompt("请输入一个大于 10 的数字：");
} while (isNaN(userInput) || Number(userInput) <= 10);

console.log("有效输入:", userInput);

let i = 0;

while (i < 3) {
  console.log(i);
  // i++; // 忘记修改 i 的值，导致进入死循环
}

function loop1 () {
  for (let i = 0; i < 10; i++) {
    if (i % 2 === 0) {
      continue; // 跳过偶数次循环，只输出奇数次循环
    }
    console.log(i); // 输出 1 3 5 7 9
  }
  console.log('循环结束'); // 会执行
}
loop1()

function loop2 () {
  for (let i = 0; i < 10; i++) {
    if (i === 5) {
      break; // 在第 6 次循环退出
    }
    console.log(i); // 输出 0 1 2 3 4
  }
  console.log('循环结束'); // 会执行
}
loop2()

function loop3 () {
  for (let i = 0; i < 10; i++) {
    if (i === 5) {
      return; // 在第 6 次循环退出函数，不会执行循环体后面的代码
    }
    console.log(i); // 输出 0 1 2 3 4
  }
  console.log('循环结束'); // 此行代码不会执行
}
loop3()