Lodash常用方法-优快云博客

1. `cloneDeep(value)`

用途

深度克隆一个对象或数组，确保复制后的对象与原始数据完全脱离引用关系。

使用示例

import cloneDeep from 'lodash/cloneDeep'

const obj = { a: 1, b: { c: 2 } }
const copy = cloneDeep(obj)
copy.b.c = 100
console.log(obj.b.c) // 仍为 2，未被修改

原理简析

Lodash 的 cloneDeep 采用递归方式对输入数据进行遍历复制，处理以下类型：

基本类型
嵌套对象/数组
Map / Set / Date / RegExp 等特殊对象

内部使用的是深度优先遍历+类型判断，并处理了循环引用的情况（通过一个 WeakMap 记录已遍历对象）。

适用场景

Vue、React 中使用状态复制避免数据联动污染
Redux reducer 中不可变数据处理
表单或复杂组件状态回滚

替代方法

structuredClone(obj)：原生 API（支持较新浏览器）

JSON.parse(JSON.stringify(obj))：仅适用于无循环引用、无函数、无 Date/RegExp 的对象

2. `debounce(func, wait, options)`

用途

防抖操作：触发事件后延迟执行，若在延迟期间被再次触发，则重置计时器。

使用示例

import debounce from 'lodash/debounce'

const search = debounce((value) => {
  console.log('searching:', value)
}, 500)

input.addEventListener('input', (e) => search(e.target.value))

原理简析

利用 setTimeout 实现延迟调用，在函数被重复调用时清除前一次的定时器，并重新设置新的定时器。若设置了 leading 选项，则在首次触发时立即执行。

function debounce(fn, delay) {
  let timer
  return function (...args) {
    clearTimeout(timer)
    timer = setTimeout(() => fn.apply(this, args), delay)
  }
}

适用场景

搜索框实时输入
滚动监听中优化频繁触发事件
调用频率高的按钮事件

替代方法

自定义 debounce 函数（适用于简单场景）
使用 requestAnimationFrame 结合节流思路处理 UI 性能

3. `uniq(array)`

用途

数组去重，返回一个不包含重复值的新数组。

使用示例

import uniq from 'lodash/uniq'

const arr = [1, 2, 2, 3, 4, 4]
console.log(uniq(arr)) // [1, 2, 3, 4]

原理简析

内部通过 Set 或索引判断元素是否已出现：

function uniq(arr) {
  return Array.from(new Set(arr))
}

或者用 indexOf 兼容早期浏览器。

适用场景

数据列表清洗（如标签、关键字）
表单输入去重
数据比较与集合处理

替代方法

原生 Set：

[...new Set(arr)]

手写 filter + indexOf 实现：

arr.filter((v, i, self) => self.indexOf(v) === i)

其他常用 Lodash 方法简要说明

方法名	作用说明	示例用途
`throttle`	函数节流，固定时间执行一次	滚动监听、页面 resize
`get`	安全获取嵌套属性	`get(obj, 'a.b.c', null)`
`set`	安全设置嵌套属性	`set(obj, 'a.b.c', 123)`
`pick`	从对象中选择指定字段	`pick(user, ['id', 'name'])`
`omit`	从对象中排除某些字段	`omit(user, ['password'])`
`merge`	深度合并两个对象	多对象配置合并
`isEqual`	深度比较两个值是否相等	React props 比较优化
`groupBy`	将集合按条件分组	数据聚合、表格分组
`find`	查找集合中符合条件的第一个元素	用户查找、配置匹配
`flatten`	数组扁平化处理	处理嵌套数组

使用 Lodash 的建议

按需引入：避免引入整个 lodash 包（可使用 lodash-es 或 babel 插件优化 tree-shaking）。
能用原生就用原生：如 uniq 和 Set。
复杂对象处理优先考虑 Lodash：如 cloneDeep、merge、get，可极大提升代码健壮性。
高频事件务必使用防抖/节流：避免性能问题。

总结

方法	优点	替代方案
`cloneDeep`	安全、强大，能处理循环引用	`structuredClone`、手写递归
`debounce`	控制频繁触发，参数灵活	手写版 `debounce`
`uniq`	快速数组去重	`Set`、`filter + indexOf`