【深入学习JS】11_循环

上一节提到了for...of， 想到JavaScript 提供多种遍历语法，所以整理一下。

for

const arr = [1, 2, 3, 4, 5];

// 基本使用
for(let i = 0, len = arr.length; i < len; i++){
    console.log(arr[i]);    // 1 2 3 4 5
}

// 退出整个循环:break
for(let i = 0, len = arr.length; i < len; i++){
    if(i == 3) break;
    console.log(i, arr[i]);  // 1 2 3
}

// 退出本次循环:continue
const arr = [1, 2, 3, 4, 5];
for(let i = 0, len = arr.length; i < len; i++){
    if(i == 3) continue;
    console.log(i, arr[i]);  // 1 2 3 5
}

forEach

const arr = [1, 2, 3, 4, 5];

arr.forEach(value => {
    console.log(value);  // 1 2 3 4 5
})

forEach无法使用break或者return退出循环。

for…in

const arr = [1, 2, 3, 4, 5];

for(let index in arr){
	console.log(typeof index);   // 0 1 2 3 4
}

const obj = {
    a: 'apple',
    s: 'sneak',
    c: 'center'
}

for(let index in obj){
	console.log(index);   // a s c
}

• for...in是用来遍历键名的，由于数组的键名是数字。所以打印出来的是"0" "1" "2" "3" "4"；
• for...in跟对象的in一样，都会遍历除了本身之外的，原型链上的键；
• 某些情况下，for...in遍历顺序是任意的；

跟for一样，可以使用break和continue中断所有或者本次循环。

for…of

const arr = [1, 2, 3, 4, 5];

for(let value of arr){
  console.log(value);   //  1 2 3 4 5
}

跟for一样，可以使用break和continue中断所有或者本次循环。

for...in有个最大的优点时，可以给不能遍历的数据结构新增iterator属性，即可以使用for...in循环。

参考

Iterator 和 for…of 循环

---

若有错误，欢迎指出，感谢~