你真的需要 Lodash/Underscore 吗？现代 JavaScript 原生方法完全指南-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00566/article/details/148363006

你真的需要 Lodash/Underscore 吗？现代 JavaScript 原生方法完全指南

You-Dont-Need-Lodash-Underscore you-dont-need/You-Dont-Need-Lodash-Underscore: 这个项目列举了 JavaScript 开发中原本可能使用 Lodash 或 Underscore.js 来完成的一些常见任务，但实际上可以利用 ES6+ 的原生特性来替代这些库的功能，以减少依赖并提高性能。项目地址: https://gitcode.com/gh_mirrors/yo/You-Dont-Need-Lodash-Underscore

前言

在 JavaScript 生态系统中，Lodash 和 Underscore 曾经是开发者不可或缺的工具库，它们提供了大量实用的工具函数，弥补了早期 JavaScript 标准库的不足。但随着 ECMAScript 标准的不断演进，现代 JavaScript 已经原生实现了许多 Lodash/Underscore 中的功能。本文将系统性地介绍如何用原生 JavaScript 替代这些工具库中的常用功能。

为什么考虑原生替代方案？

减少依赖：项目依赖越少，维护成本越低
性能优势：原生方法通常比工具库实现更高效
包体积优化：避免引入不必要的代码
现代浏览器/Node.js 环境：大多数现代环境已支持这些特性

常用功能替代方案详解

数组操作

1. 数组遍历

// Lodash/Underscore
_.each([1, 2, 3], (value) => console.log(value));

// 原生替代
[1, 2, 3].forEach((value) => console.log(value));

2. 数组映射

// Lodash/Underscore
_.map([1, 2, 3], (value) => value * 2);

// 原生替代
[1, 2, 3].map((value) => value * 2);

3. 数组过滤

// Lodash/Underscore
_.filter([1, 2, 3], (value) => value > 1);

// 原生替代
[1, 2, 3].filter((value) => value > 1);

对象操作

1. 对象键值提取

// Lodash/Underscore
_.keys({a: 1, b: 2});

// 原生替代
Object.keys({a: 1, b: 2});

2. 对象值提取

// Lodash/Underscore
_.values({a: 1, b: 2});

// 原生替代
Object.values({a: 1, b: 2});

3. 对象合并

// Lodash/Underscore
_.assign({a: 1}, {b: 2});

// 原生替代
Object.assign({a: 1}, {b: 2});

实用工具函数

1. 深拷贝

// Lodash/Underscore
_.cloneDeep(obj);

// 原生替代（简单场景）
JSON.parse(JSON.stringify(obj));

// 注意：对于复杂对象，可能需要自定义深拷贝函数

2. 去重

// Lodash/Underscore
_.uniq([1, 2, 2, 3]);

// 原生替代
[...new Set([1, 2, 2, 3])];

3. 随机数生成

// Lodash/Underscore
_.random(5, 10);

// 原生替代
Math.floor(Math.random() * (10 - 5 + 1)) + 5;

高级功能替代方案

1. 节流与防抖

虽然原生 JavaScript 没有直接提供节流(throttle)和防抖(debounce)函数，但可以轻松实现：

// 防抖实现
function debounce(func, wait) {
  let timeout;
  return function() {
    const context = this;
    const args = arguments;
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(context, args), wait);
  };
}

// 节流实现
function throttle(func, limit) {
  let inThrottle;
  return function() {
    const args = arguments;
    const context = this;
    if (!inThrottle) {
      func.apply(context, args);
      inThrottle = true;
      setTimeout(() => inThrottle = false, limit);
    }
  };
}

2. 深度比较

// 简单对象深度比较
function deepEqual(obj1, obj2) {
  if (obj1 === obj2) return true;
  if (typeof obj1 !== 'object' || typeof obj2 !== 'object' || obj1 === null || obj2 === null) {
    return false;
  }
  const keys1 = Object.keys(obj1);
  const keys2 = Object.keys(obj2);
  if (keys1.length !== keys2.length) return false;
  for (const key of keys1) {
    if (!keys2.includes(key) || !deepEqual(obj1[key], obj2[key])) {
      return false;
    }
  }
  return true;
}