乐闻世界logo
6月1日 02:09

什么是 Lodash？为什么前端开发仍然离不开它？

Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库，提供数百个函数来简化数组、对象、字符串等常见操作。它的核心价值在于：用简洁的 API 替代冗长的原生写法，同时处理好浏览器兼容和边界情况。虽然现代 JavaScript 已补齐了不少能力（如 Array.prototype.flatMap、Object.entries），但 _.get、_.debounce、_.cloneDeep、_.isEqual 等函数在日常开发中依然高频使用。Lodash 支持模块化引入（按需加载单个函数）和链式调用，既控制打包体积，又保持代码可读性。

javascript
import _ from 'lodash';

// 安全取值，避免 ?. 仍无法提供默认值的场景
const name = _.get(user, 'profile.name', 'unknown');

// 防抖
const search = _.debounce(query => fetchData(query), 300);

// 深拷贝
const copy = _.cloneDeep(original);

// 深比较
_.isEqual(objA, objB);

追问

Lodash 的模块化引入怎么做？为什么要按需引入？

Lodash 每个函数都是独立模块，可以用 import get from 'lodash/get' 单独引入，避免把整个库打进包里。配合 babel-plugin-lodash 或 lodash-es（ES Module 版本），Tree Shaking 也能生效。全量引入 import _ from 'lodash' 会增加约 70KB+ 的 gzip 体积，按需引入通常只增加几 KB。

_.get 和可选链 ?. 有什么区别？

可选链 obj?.a?.b 在属性不存在时返回 undefined，无法自定义默认值，需要配合空值合并 ?? 才行。_.get(obj, 'a.b', defaultVal) 一步完成取值和默认值。另外 _.get 接受字符串路径，适合动态属性名的场景，而可选链要求属性名在编码时确定。

_.debounce 和 _.throttle 区别是什么？

debounce 在事件停止触发后的指定延迟后才执行，适合搜索输入——用户打字期间不请求，停手才发。throttle 在持续触发期间按固定间隔执行，适合滚动事件和 resize——保证回调频率不超过设定上限，不会"积压"。两者都支持 leading 和 trailing 选项控制首次和末次是否触发。

哪些 Lodash 功能已经被原生 JavaScript 替代？

  • _.map / _.filter / _.reduce → Array.prototype 同名方法
  • _.find / _.findIndex → Array.prototype.find / findIndex
  • _.assign → Object.assign
  • _.keys / _.values / _.entries → Object.keys / Object.values / Object.entries
  • _.startsWith / _.endsWith → String.prototype 同名方法
  • _.repeat → String.prototype.repeat

但 _.merge（深度合并而非覆盖）、_.pick / _.omit（解构无法处理动态键名）、_.uniq（Set 可替代但写法略繁琐）等场景，Lodash 仍然更简洁。

标签：Lodash