乐趣区

关于javascript:JavaScript之ArrayforEach源码解读

源码实现

function myForEach(arr, callback) {
  let T, k;
  if(arr === null) {throw new TypeError('this is null or not defined');
  }
  // 用于解决若传入的 arr 为非数组的状况 (string 等)
  const O = Object(arr); 
  // 无符号右移:将十进制转化为二进制 右移
  const len = O.length >>> 0;
  if(typeof callback !== 'function') {throw new TypeError(`${callback} is not a function`);
  }
  if(arguments.length > 1) {T = callback;}
  k = 0;
  while (k < len) {
    // 如果指定的属性在指定的对象或其原型链中,则 in 运算符返回 true
    // 用于过滤未初始化的值
    if(k in O) {const kValue = O[k];
      // kValue, k, O 对应着 forEach 回调函数 3 个参数, 数组以后项的值 数组以后项的索引 数组对象自身
      // call:将 callbak 的 this 指向其本人的外部
      callback.call(T, kValue, k, O);
    }
    k++;
  }
  return undefined;
}
const test = [1,2,,3];
myForEach(test, (item) => {console.log(item); // 1 2 3
})

技能点

1、无符号右移:将对应数转化为二进制,接着向右移位失去的数值。

const oldValue = 64; // 等于二进制的 100000
const newValue = oldValue >>> 5; // 等于二进制的 10, 即十进制的 2 

2、应用技巧:转化数据(数值不变,其余的类型全副转化为 0)

1 >>> 0 // 1
undefined >>> 0 // 0
null >>> 0 // 0
'string' >>> 0 // 0

注意事项

1、async await 的语法糖不起作用:因为其外部封装并调用了回调函数,因而就算用了 async await 也不起作用。
2、无奈随时退出循环:不能应用 break/continue 的形式退出或中断循环,因为其外部应用 while 循环。

退出移动版