02. 易错基础题-JS中三类循环对比及性能分析

骑猪看日落 2022-09-11 00:10 10阅读 0赞

*  性能排行： **for > forEach > forin**

#### forEach ####

> 手写forEach

Array.prototype.myForEach = function myForEach(callback, context) { 
        // this -> arr
        let self = this,
            i = 0,
            len = self.length;
        context = context == null ? window : context
        for (; i < len; i++) { 
          typeof callback === 'function' ? callback.call(context, self[i]) : null
        }
      }
      let arr = [1, 2, 3, 4, 5, 6, 7, 8]
      arr.myForEach((res) => { 
        console.log(res);
      })

#### forin ####

*  for in 性能很差：迭代当前对象中所有可枚举的属性\[私有属性大部分是可枚举的，公有属性\{出现在所属类的原型上的\}也有部分是可枚举的\]，查找机制上一定会搞到原型链上去，一层一层网上查
 *  forin的问题
    
     *  问题1：遍历顺序以数字优先
     *  问题2：无法遍历Synmbol属性
     *  问题3：可以遍历到公有可枚举的 (原型上的东西)
    
        let arr = new Array(9999999).fill(0)
        console.log('forEach==1', (new Date()).getTime())
        arr.forEach(function (item) { })
        console.log('forEach==2', (new Date()).getTime())
        
        console.log('for-in==1', (new Date()).getTime())
        for (let key in arr) { }
        console.log('for-in==2', (new Date()).getTime())
        
        console.log('-----------------------');
        
        Object.prototype.fn = function fn() { }
        let obj = { 
            name: '张三',
            age: 12,
            [Symbol('Aa')]: 10000,
            0: 200,
            1: 300
        }
        for (let key in obj) { 
            if (!obj.hasOwnProperty(key)) break; // 阻止遍历原型上的东西，提高性能
            console.log(key, obj.hasOwnProperty(key));
        }
        
        console.log('-----------------------');
        
        let keys = Object.keys(obj)
        let sym = Object.getOwnPropertySymbols(obj).length
        if (sym > 0) { 
            keys = keys.concat(Object.getOwnPropertySymbols(obj))
        }
        console.log(keys);
        keys.forEach((res) => { 
            console.log('属性名:', res, '==属性值：', obj[res]);
        })