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 的建议

1. 按需引入 ：避免引入整个 lodash 包（可使用 lodash-es 或 babel 插件优化 tree-shaking）。

2. 能用原生就用原生 ：如 uniq 和 Set。

3. 复杂对象处理优先考虑 Lodash ：如 cloneDeep、merge、get，可极大提升代码健壮性。

4. 高频事件务必使用防抖/节流：避免性能问题。

---

总结

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