汤姆叔叔官方网站建设,wordpress+程序优化,专门做淘宝客网站,深圳一元购网站设计公司什么是lodash
Lodash 是一个 JavaScript 实用工具库#xff0c;提供了很多用于处理数据、简化开发等方面的功能。它提供了一组常用的工具函数#xff0c;用于处理数组、对象、字符串等常见数据结构#xff0c;同时也包含了一些函数式编程的工具。对于前端开发来说#xff…什么是lodash
Lodash 是一个 JavaScript 实用工具库提供了很多用于处理数据、简化开发等方面的功能。它提供了一组常用的工具函数用于处理数组、对象、字符串等常见数据结构同时也包含了一些函数式编程的工具。对于前端开发来说是个很好用的工具甚至看过有人说面试不会lodash被嘲讽了。
我所在的公司项目中也用了这个库今天就听同事吐槽他循环两万条数据进入卡住了溢出了找了半天问题最后没想到是foreach的过换成for循环就没问题了。
那么为什么呢lodash是怎么实现foreach的呢源码如下
import arrayEach from ./.internal/arrayEach.js;
import baseEach from ./.internal/baseEach.js;
/*** Iterates over elements of collection and invokes iteratee for each element.* The iteratee is invoked with three arguments: (value, index|key, collection).* Iteratee functions may exit iteration early by explicitly returning false.** **Note:** As with other Collections methods, objects with a length* property are iterated like arrays. To avoid this behavior use forIn* or forOwn for object iteration.** since 0.1.0* alias each* category Collection* param {Array|Object} collection The collection to iterate over.* param {Function} iteratee The function invoked per iteration.* returns {Array|Object} Returns collection.* see forEachRight, forIn, forInRight, forOwn, forOwnRight* example** forEach([1, 2], value console.log(value))* // Logs 1 then 2.** forEach({ a: 1, b: 2 }, (value, key) console.log(key))* // Logs a then b (iteration order is not guaranteed).*/
function forEach(collection, iteratee) {const func Array.isArray(collection) ? arrayEach : baseEach;return func(collection, iteratee);
}
export default forEach;
源码感兴趣可以去github上看
以下是一个对 Lodash forEach 源码的简要分析
function forEach(collection, iteratee) {const func Array.isArray(collection) ? arrayEach : baseEach;return func(collection, iteratee);
}function arrayEach(array, iteratee) {let index -1;const length array null ? 0 : array.length;while (index length) {if (iteratee(array[index], index, array) false) {break;}}return array;
}function baseEach(collection, iteratee) {let index -1;const iterable Object(collection);const length iterable.length;while (index length) {if (iteratee(iterable[index], index, iterable) false) {break;}}return collection;
}
这里对 Lodash 的 forEach 进行了两个版本的优化arrayEach 用于数组baseEach 用于通用集合。它们都使用了一个 while 循环来迭代集合中的元素调用传入的 iteratee 函数。
主要要点
类型检测 在 forEach 函数中通过 Array.isArray 来判断集合的类型。如果是数组则使用 arrayEach 进行迭代否则使用 baseEach。迭代逻辑 arrayEach 和 baseEach 都使用了一个 while 循环来遍历集合。在每次迭代中调用传入的 iteratee 函数并检查其返回值。如果返回值为 false则中断循环。性能优化 Lodash 的实现对性能进行了一些优化比如使用了 length 变量缓存集合的长度减少了重复计算。处理对象 在 baseEach 中通过 Object(collection) 将集合转换为一个可迭代的对象。这样可以确保 baseEach 对于对象的处理更加一致无论是否为数组。
那么为什么在特别大数据下会出现问题呢
使用 forEach 处理几万条数据量可能会导致栈溢出的问题这通常是因为递归调用造成的。Lodash 的 forEach 实现是基于递归的而不是基于循环的因此对于大型数据集递归深度可能会导致栈溢出。
为了解决这个问题可以考虑使用其他方法比如使用普通的 for 循环等。
