JS 中怎么用 Lodash 的 cloneDeep 实现完美深拷贝-js教程-PHP中文网

Lodash 的 cloneDeep 是最可靠深拷贝方案，支持函数、正则、Date、Map、Set、Symbol、循环引用等；需按需引入，用法为 const copied = cloneDeep(original)；比 JSON 方法强在类型保留与循环引用处理，但性能开销大。

js 中怎么用 lodash 的 clonedeep 实现完美深拷贝

Lodash 的 cloneDeep 是目前最可靠、兼容性最好、处理边界情况最完善的深拷贝方案之一，它能正确处理函数、正则、Date、Map、Set、TypedArray、Symbol、循环引用等原生 JSON.parse(JSON.stringify()) 无法应对的类型。

安装与引入

确保项目中已安装 Lodash（推荐按需引入）：

npm 安装：npm install lodash.clonedeep
ES6 按需导入（推荐，避免打包体积过大）：
import cloneDeep from 'lodash.clonedeep';
如果已安装完整版 Lodash，也可：
import { cloneDeep } from 'lodash';

基本用法：一行搞定深拷贝

直接传入任意嵌套对象或数组，返回一个完全独立的新副本：

const original = {
  name: 'Alice',
  hobbies: ['reading', 'coding'],
  meta: {
    createdAt: new Date('2023-01-01'),
    tags: new Set(['js', 'lodash']),
    config: /test/gi,
  },
  selfRef: null // 后续会指向自己，形成循环引用
};
original.selfRef = original; // 构造循环引用

const copied = cloneDeep(original);
console.log(copied.meta.createdAt instanceof Date); // true
console.log(copied.meta.tags instanceof Set);       // true
console.log(copied.meta.config instanceof RegExp);   // true
console.log(copied === original);                    // false
console.log(copied.meta === original.meta);          // false
console.log(copied.selfRef === copied);              // true（循环引用被正确重建）

它比手写或 JSON 方法强在哪？

cloneDeep 内部使用递归 + 引用缓存（WeakMap）机制，自动检测并处理循环引用，同时保留原对象的类型语义：

jm-jsjkxyjs02-zlm-405

使用约定式提交（Conventional Commits）生成标准化的 Git 提交信息。适用于以下场景： (1) 暂存更改时需要提交信息； (2) 审查 diff 时希望获得结构化摘要； (3) 编写 PR 描述或变更日志（changelog）条目； (4) 用户明确要求“为本次更改编写提交信息”。该功能会分析已暂存/未暂存的 diff，并生成按类型（type）划分范围的提交信息。

下载

支持 Date / RegExp / Error / ArrayBuffer / DataView / TypedArray / Map / Set / WeakMap / WeakSet / Symbol / BigInt
保留原型链上的非枚举属性？不保留（这是有意设计：深拷贝关注数据，不复制行为；如需继承结构，应结合构造逻辑）
对函数默认不拷贝（保持引用），但可配合自定义迭代器（customizer）控制行为
能安全处理稀疏数组、undefined 元素、空槽位（empty slots）

进阶：定制拷贝行为（customizer）

若想跳过某些字段、转换特定类型，或对函数做特殊处理，可用 customizer 函数：

const result = cloneDeep(obj, (value) => {
  if (typeof value === 'function') {
    return value.bind({}); // 把函数绑定到新空对象
  }
  if (value instanceof HTMLElement) {
    return null; // 跳过 DOM 节点
  }
});

注意：customizer 返回 undefined 表示交由 cloneDeep 默认处理；返回其他值则直接使用该值作为拷贝结果。