js 的几种循环

js 的几种循环（迭代）

1 do-while

• 后测试循环语句（循环体中的代码执行后才会对退出条件进行求值）
• 循环体内代码至少执行一次

let i = 0
do {
    i += 2
} while (i < 10)

2 while

• 先测试循环语句
• 循环体内代码有可能一次也不执行

let i = 0
while (i < 10) {
    i += 2
}

3 for

• 先测试循环语句
• 初始化、条件表达式和循环表达式都不是必须的

let count = 10
for (let i = 0; i < count; i++) {
    console.log(i)
}

// 无穷循环
for (; ;) {
    console.log('aaaa');
}

// 相当于 while 循环
let count = 10
let i = 0;
for (; i < count;) {
    console.log(i);
    i++
}

4 for-in

• 迭代语句，枚举对象中的非符号键属性
• 不能保证返回对象属性的顺序
• 如果需要迭代的变量是 null 或 undefined，则不执行循环体

let arr = [1, 2, 3]
for (const i in arr) {
    // if (Object.hasOwnProperty.call(arr, i)) {
    //     console.log(arr[i]);
    // }
    console.log(arr[i]);
}
// 结果打印出 1 2 3

// 遍历对象
let obj = { name: 'zhangsan', age: 12 }
for (const key in obj) {
    // if (Object.hasOwnProperty.call(obj, key)) {
    //     console.log(obj[key]);
    // }
    console.log(obj[key]);
}
// 结果
zhangsan
12

5 for-of

• 迭代语句，遍历可迭代对象的元素

// 遍历数组
let arr = [1, 2, 3]
for (const item of arr) {
    console.log(item);
}

// 结果打印出 1 2 3

6 forEach

• 属于数组的一个迭代方法
• 对于空数组是不会执行遍历的
• 不支持 continue 和 break 语句，可以使用 arr.some() 和 arr.every() 实现

let arr = [1, 2, 3]
arr.forEach((item, index, array) => {
    console.log(item); // 输出数组元素
    console.log(arr[index]); // 输出数组元素，index是元素索引
    console.log(array); // 输出数组本身
})

// continue 实现
let arr = [1, 2, 3]
// 方法1
arr.forEach(item => {
    if (item === 2) {
        return
    }
    console.log(item);
})
// 方法2
arr.some(item => {
    if (item === 2) {
        return
    }
    console.log(item);
})

// 结果输出 1 3

// break 实现
let arr = [1, 2, 3]
arr.every(item => {
    console.log(item);
    return item !== 2
})

// 结果输出 1 2

参考文献

[1] (美) 马特·弗里斯比(Matt Frisbie)著. 李松峰译. JavaScript高级程序设计: 第4版[M]. 人民邮电出版社, 2020.9