js中三类循环对比及性能分析

• for循环及forEach底层原理
  for循环自己控制循环过程，控制循环多少次

  • 基于var声明的时候，for和while性能差不多

  • 基于let声明的时候，for循环性能更好原理：没有创造全局不释放的变量

  • 重写for-each

    let arr = new Array(99999).fill(0)
    // 稀疏数组
    // let arr=[10,22,34,45,1]
    // 密集数组
    Array.prototype.forEach=function forEach(cb,context){
        // this -> arr
        let self = this,
            i = 0,
            len = self.length;
        context = context == null ? window : context
        for(;i<len;i++){
            typeof cb ==='function'?cb.call(context,self[i],i):null
        }
    }
    

• for in的bug及解决方案

  • 迭代所有可枚举属性(公有&私有)，按照原型链一级级查找很耗性能

  • 问题很多：不能迭代Symbol属性，迭代顺序会以数字顺序优先、公有可枚举的(一般是自定义的属性)属性也会进行迭代

    let obj = {
        name:'zf',
        age:123,
        [Symbol('AA')]:100,
        0:200,
        1:300
    }
    for(let key in obj){
        if(!obj.hasOwnProperty(key)) break
        console.log(key);
    }
    
    let keys = Object.keys(obj)
    if(typeof Symbol!=='undefined')keys = 
        keys.concat(Object.getOwnPropertySymbols(obj))
    keys.forEach(key=>{
        console.log('属性名',key)
        console.log('属性值',obj[key]);
    })
    

• for of循环的底层机制

  • 迭代器iterator规范(具备next方法，每次只需返回一个对象，具备value属性)

  • 让对象具备可迭代性并且使用for of循环

    // iterator 迭代器
    // 部分数据结构实现了迭代器规范
    // Symbol.iterator
    // 数组/部分类数组/Set/Map…实现了迭代器规范 (对象没有实现)
    // for of 循环的原理是按照迭代器规范遍历的
    arr = [10,20,30]

    arr[Symbol.iterator] = function (){
        let self = this,
            index = 0;
        return {
            // 必须具备next方法,执行一次next方法，拿到结构中的某一项值
            // done：false value:每一次获取的值
            next(){
                if (index > self.length-1) {
                    return {
                        done:true,
                        value:undefined
                    }
                    
                }
                
                return {
                    done:false,
                    value:arr[index++]
                }
            }
        }
    }
    
    // 1.let itor = arr[Symbol.iterator]()
    // 2.itor.next()
    console.time('for of')
    for(const val of arr){
        console.log(val);
        
    }
    console.timeEnd('for of')
    
    let obj2 = {
        0:200,
        1:300,
        2:400,
        length:3
    }
    obj2[Symbol.iterator] = Array.prototype[Symbol.iterator]
    for(let val of obj2){
        console.log(val);
        
    }