3分钟带你了解JS中的三种循环

1.for(while)循环

for循环是JS中常用遍历方式

while在不知道循环几次的情况下使用

for和while经常用于数组的循环遍历,可以遍历字符串、数组、类数组对象(arguments...),不可以遍历对象

 for (let i = 0; i < arr.length; i++) {}
 let i = 0
 while (i < arr.length) {
     i++
 }

for in 循环

for in 会迭代对象原型链上一切 可以枚举的属性,不过按照原型链查找很耗性能,也有诸多问题

1.不能迭代Symbol属性

2.迭代顺序会以数字优先、公有可枚举(一般是自定义属性)属性也会进行迭代

3.会遍历到原型链公有中可枚举的

 Object.prototype.fn = function(){}
 const obj = {
     name: 'zhaimou',
     age: 18,
     [Symbol('a')]: 333,
     1: 12,
     2: 13,
 }
 for (let key in obj){       
 console.log(key)// 1  2 name age fn
 }
 // 解决问题
 for (let key in obj) {
 // 不是obj的属性直接返回
   if (!obj.hasOwnProperty(key)) break;
   console.log(key)
}
// 获取symbol属性
let obj1 = Object.keys(obj).concat(Object.getOwnPropertySymbols(obj))

for of循环

for of循环的原理是按照是否有迭代器规范来循环的,所有带有Symbol.iterator的都是实现了迭代器规范，比如数组,一部分类数组,Set,Map...，但对象没有实现 Symbol.iterator规范，所以不能使用for of循环

//原理如下
 arr[Symbol.iterator] = function () {
    return {
        // 必须具备next方法 执行一次next 拿到结构中某一项的值
        next() {
            if (index > self.length - 1) {
                return {
                    done: true,
                    value: undefined
                }
            }
            return {
                value: self[index++],
                done: false,
            }
        }
    }
}

for of遍历对象可以使用Object.keys方法

let  obj = {
    a: 1,
    b: 2,
    c: 3
}
for (let key of Object.keys(obj)) {
    console.log(`${key}:${obj[key]}`);
}
//a:1 b:2 c:3

总的来说

for in 遍历对象

for of 遍历数组