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

• 性能排行： 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]);
  })