lodash的foreach的坑你踩过吗

简介: lodash的foreach的坑你踩过吗

什么是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 函数。

主要要点:

  1. 类型检测:forEach 函数中,通过 Array.isArray 来判断集合的类型。如果是数组,则使用 arrayEach 进行迭代;否则,使用 baseEach
  2. 迭代逻辑: arrayEachbaseEach 都使用了一个 while 循环来遍历集合。在每次迭代中,调用传入的 iteratee 函数,并检查其返回值。如果返回值为 false,则中断循环。
  3. 性能优化: Lodash 的实现对性能进行了一些优化,比如使用了 length 变量缓存集合的长度,减少了重复计算。
  4. 处理对象:baseEach 中,通过 Object(collection) 将集合转换为一个可迭代的对象。这样可以确保 baseEach 对于对象的处理更加一致,无论是否为数组。

那么为什么在特别大数据下会出现问题呢

使用 forEach 处理几万条数据量可能会导致栈溢出的问题,这通常是因为递归调用造成的。Lodash 的 forEach 实现是基于递归的,而不是基于循环的,因此对于大型数据集,递归深度可能会导致栈溢出。

为了解决这个问题,可以考虑使用其他方法,比如使用普通的 for 循环等。

目录
相关文章
|
9月前
|
JavaScript 索引
温故而知新《9种js数组去重方法》
温故而知新《9种js数组去重方法》
39 0
|
10月前
|
JavaScript
Vue foreach用法
Vue foreach用法
91 0
|
前端开发
react实战笔记15:数组方法补充map
react实战笔记15:数组方法补充map
63 0
react实战笔记15:数组方法补充map
Lodash学习之集合排序
Lodash学习之集合排序
216 0
Lodash学习之集合排序
Lodash学习之数组去重
Lodash学习之数组去重
1566 0
Lodash学习之数组九
Lodash学习之数组九
68 0
Lodash学习之数组九
Lodash学习之集合二
Lodash学习之集合二
73 0
Lodash学习之集合三
Lodash学习之集合三
62 0
Lodash学习之集合一
Lodash学习之集合一
65 0
Lodash学习之数组六
Lodash学习之数组六
63 0
Lodash学习之数组六