在前端开发中，难免会遇到需要遍历数组或对象的情况。在 JavaScript 中，常用的遍历方式有 for 循环和 forEach 方法。然而，当遍历的量比较大或者需要进行额外的处理时，这些方式可能会显得繁琐或者不够灵活。
为了解决这个问题，开发者 Nathan Houle 在 npm 上发布了一个名为 @ndhoule/each 的包，该包提供了一个更加简单、高效和灵活的遍历方式。
安装
使用 @ndhoule/each 包，需要先在项目中安装它。
通过 npm 安装：
- --- ------- ------------- ------
或者使用 yarn 安装：
- ---- --- -------------
使用方法
@ndhoule/each 包提供了两种遍历方式：each 和 forEach。
each
each 方法用于遍历一个数组或对象，并对每个元素执行一个回调函数。该回调函数的第一个参数为当前遍历到的元素，第二个参数为当前元素的索引或键名。
下面是一个简单的示例：
----- ---- - ------------------------- -------- -- --- --------------- ------ - --------------------- ------- --------------------- ------- ---
输出：
------ - ------ - ------ - ------ - ------ - ------ -
thisArg 参数
由于 each 方法是作为全局函数调用的，因此默认情况下，回调函数中的 this 值是 undefined，如果当前回调函数中需要使用 this 值，则需要指定 thisArg 参数。
下面是一个示例：
----- ---- - ------------------------- ----- --- - - -- -- -- -- -- - -- --------- --------------- ---- - ------------------- ----- --------------------- ------- -- - -------- --- ---
输出：
---- - ------ - ---- - ------ - ---- - ------ -
forEach
forEach 方法与 each 方法类似，都是用于遍历一个数组或对象，并对每个元素执行一个回调函数。但是，与 each 方法不同的是，forEach 方法是在数组或对象的原型上定义的，因此可以直接调用。
下面是一个简单的示例：
------------------------- --- -- -------------------------- ------ - --------------------- ------- --------------------- ------- ---
输出：
------ - ------ - ------ - ------ - ------ - ------ -
thisArg 参数
与 each 方法一样，forEach 方法也支持 thisArg 参数。例如：
------------------------- ----- --- - - -- -- -- -- -- - -- ------------------- --------------- ---- - ------------------- ----- --------------------- ------- -- -----
输出：
---- - ------ - ---- - ------ - ---- - ------ -
深入理解
与标准的遍历方式相比，@ndhoule/each 包提供了什么优势呢？在使用之前，我们先来了解一下 each 方法的实现原理。
each 的实现原理
在 each 方法的实现遍历过程中，先判断传入的参数类型，如果是数组，则使用 for 循环遍历，如果是对象，则使用 for-in 循环遍历。
其中，遍历对象时，为了避免遍历到未定义的属性，还需要使用 hasOwnProperty() 方法进行过滤处理。
在遍历的过程中，我们可以发现 each 方法思路非常简单，但效率却非常高。相比于标准遍历方式，它在大量数据遍历时表现更加优秀。
同时，each 方法还支持函数节流，即当回调函数返回 false 时，可以停止继续遍历，优化遍历效率。
forEach 的实现原理
与 each 方法相比，forEach 方法在实现原理上稍有不同。由于 forEach 方法是在数组或对象的原型上定义的，因此可以直接调用，而不需要通过 require 的方式加载。
forEach 方法的实现主要依赖于 each 方法，因此其处理过程与 each 方法类似，只是将遍历方法封装在了数组或对象的原型上，使得使用更加方便。
总结
通过本文的介绍，我们了解了 @ndhoule/each 包的用法和实现原理，同时也了解了它与标准遍历方式之间的区别和优势。
总的来说，@ndhoule/each 包提供了一种更加简单、高效和灵活的遍历方式，既能够满足普通遍历的需求，又能够应对大量数据遍历的情况，具有很高的实用价值。
因此，在实际开发中，如果遇到需要遍历数组或对象的情况，可以考虑使用这个包来提高代码效率和可读性。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/88667