循环的6种形式：实例演示
![]()
案例效果：
![]()
案例源码：
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>循环的6种形式：实例演示</title> </head> <body> <script> // 1. while(): 入口判断型 const arr = ["成都", "重庆", "北京", "上海", "广州"]; let i = 0; while (i < arr.length) { console.log(arr[i]); // i++:用完自增 i++; } // ============================================================================= console.log("--------------------"); // 2. do-while(): 出口判断,至少 执行一次循环体 i = 2; do { console.log(arr[i]); i++; } while (i > arr.length); // ============================================================================= console.log("--------------------"); // 3. for (循环变量的初始化; 循环条件; 更新循环条件){... } for (let i = 0; i < arr.length; i++) { if (i < 2) { console.log(arr[i]); } } // ============================================================================= console.log("--------------------"); // 4. for - in : 遍历对象中的允许遍历的属性(枚举的属性) // 对象字面量 const user = { id: 1, name: "admin", email: "admin@php.cn", }; // for (键名/属性 in 对象) {...} for (let key in user) { console.log(key, "=>", user[key]); } // ============================================================================= console.log("--------------------"); // 5. forEach(): 遍历对象 // array.forEach(function (值, 索引, 数组) {}); arr5 = [11, 22, 33, 44, 55]; arr5.forEach(function (item, key, arr5) { // console.log(item, key, arr); console.log(arr5[key]); }); // ============================================================================= console.log("--------------------"); // 6. for - of: es6新增 // for -of : 直接取出数组的值 // for - of: 不能遍历自定义对象 arr6 = [110, 220, 330, 440, 550]; for (let v of arr6) { // v: 数组中的某一个成员 console.log(v); } </script> </body></html>![]()
案例总结：
while(): 入口判断型
do-while(): 出口判断,至少 执行一次循环体
for (循环变量的初始化; 循环条件; 更新循环条件){… }
for - in : 遍历对象中的允许遍历的属性(枚举的属性)
forEach(): 遍历对象
for - of: es6新增