我们好，我是Echa。

前段时间有一名00后的女孩儿影迷朋友圈小贴士说他们很讨厌程式设计，目前在某公司应聘前端开发组织工作，说到现在年末还没有比如说JavaScript中深复本和浅复本那个难题，同时也在网路上看了许多有关深复本的该文，但是产品质量参差不齐，有许多都考量得encouraged，写的方式较为破旧，无法令人信服，认知的忽然。让小贴士深入细致探究JavaScript中厚薄复本。

看那位女孩儿这般的聪慧，要学就问的这种叙德，小贴士非常钦佩。好似看到前年他们聪慧的另一面了。在这儿给她雅雷。

对深复本和浅复本那个难题，坚信我们都碰到过，所以是不是界定深复本和浅复本那个难题呢？

往单纯了认知，是一句话归纳：假定有两个表达式A，表达式B拷贝了变量A，假如我们修正表达式A，看表达式B与否会出现出现改变，假如出现改变了，所以是浅复本，假如表达式A值的变动不影响B，所以是深复本，估算用文本说那么多，可能我们单厢看懵了。

先基本概念如是说

深复本：在堆缓存中再次开拓一个存储容量，全然布季夫两个十分相似的第一类；浅复本：无此堆缓存中再次开拓内部空间，只拷贝栈缓存中的提及门牌号。

其本质上两个第一类（字符串）仍然对准同几块存储容量

还看要学不然，看右图：

JavaScript中浅复本

浅复本：创建两个新的第一类，来接受你要再次拷贝或提及的第一类值。假如第一类属性是基本的数据类型，拷贝的是基本类型的值给新第一类；但假如属性是提及数据类型，拷贝的是缓存中的门牌号，假如其中两个第一类出现改变了那个缓存中的门牌号所对准的第一类，肯定会影响到另两个第一类。

首先我们看看一些浅复本的方式，如右图：

JavaScript中浅复本

这儿只列举了常用的几种方式，除此之外当然还有其他更多的方式。注意，我们直接使用=赋值不是浅复本，因为它是直接对准同两个第一类了，并没有返回两个新第一类。

手动实现两个浅复本：

从上面这段代码可以看出，利用类型判断（查看typeof），针对提及类型的第一类进行 for 循环遍历第一类属性赋值给目标第一类的属性（for…in语句以任意顺序遍历两个第一类的除Symbol以外的可枚举属性，包含原型上的属性。查看for…in），基本就可以手工实现两个浅复本的代码了。

JavaScript中深复本

在日常开发中，深复本是两个常见需求，我们可以通过 JSON 转换、递归、 Lodash _.cloneDeep() 等方式实现。下面小贴士一一深入细致探究

第一种：递归方式（推荐，项目中最安全最常用）

使用递归的方式进行第一类（字符串）的深复本，奉上已封装的深复本函数：

上方函数的使用方式：

//函数复本 const copyObj = (obj = {}) => { //变量先置空 let newobj = null; //判断与否需要继续进行递归 if (typeof (obj) == object && obj !== null) { newobj = obj instanceof Array ? [] : {}; //进行下一层递归布季夫 for (var i in obj) { newobj[i] = copyObj(obj[i]) } //假如不是第一类直接赋值 } elsenewobj = obj;return newobj; }

上方函数的使用方式：

//模拟第一类 let obj = { numberParams:1, functionParams:() => { console.log(); }, objParams:{ a:1, b:2 } } const newObj = copyObj(obj); //这样就完成了两个第一类的递归复本obj.numberParams =100; //更改第两个第一类的指 console.log(newObj.numberParams); //输出仍然是1 不会跟随obj去出现改变

第二种：JSON.stringify() ；(那个不推荐使用，有坑)

那个方式有坑，详细讲解请看我另一篇该文 “使用JSON.stringify进行深复本的坑” 以下是代码示例：

let obj = { a:1, b:师。后面会不定期更新干货和技术相关的资讯推荐” } //先转为json格式字符，再转回来 let newObj = JSON.parse(JSON.stringify(obj)); obj.a = 50; console.log(newObj.a); //输出 1

普通的第一类也可以进行深复本，但是！！！当第一类内容项为 number、string、boolean的时候，是没有什么难题的。但是，假如第一类内容项为undefined、null、Date、RegExp、function，error的时候。使用JSON.stringify()进行复本就会出难题了。

第三种：使用第三方库lodash中的cloneDeep()方式

与否推荐使用，看情况吧。假如我们的项目中只需要两个深复本的功能，这种情况下为了两个功能引入整个第三方库就显得很不值得了。不如写两个递归函数对项目来说性能更好。

lodash.cloneDeep()代码示例：

import lodash from lodash; let obj = { a: { c: 2, d: [1, 3, 5], e:Echa工程师 }, b: 4 } const newObj = lodash.cloneDeep(obj); obj.b = 20; console.log(newObj.b); //输出 4；不会出现改变

实际上，cloneDeep()方式底层使用的本来是递归方式。只是在外层又封装了一层而已。

所以，假如不是原先项目中有使用 lodash 那个库不然，大可不必为了这两个功能而去引入它。

该文上方有提供进行深复本的函数，推荐使用。我们可自取。

第四种:JQuery的extend()方式进行深复本（推荐在JQ中使用）

那个方式仅适用于JQuery构建的项目。JQuery自身携带的extend()方式可以进行深复本，不用他们写递归也不用引入第三方库还没什么坑。

在JQuery项目中的使用方式：

let obj = { a: { c: 2, d: [1, 3, 5], e:Echa工程师 }, b: 4 } let newObj= $.extend(true, {}, obj1); //复本完成 obj.b = 20; console.log(newObj.b); //输出 4

第五种：structuredClone（）方式进行深复本

实际上，JavaScript 中提供了两个原生 API 来执行第一类的深复本：structuredClone。它可以通过结构化布季夫算法创建一个给定值的深复本，并且还可以传输原始值的可转移第一类。本文将深入细致探讨 structuredClone() 函数的原理、使用方式及注意事项，以帮助开发者更好地应用现代 JavaScript 技术实现深复本。

structuredClone 基本使用

structuredClone() 的实用方式很单纯，只需将原始第一类传递给该函数，它将返回具有不同提及和第一类属性提及的深层副本·：

const originalObject = { name: “John”, age: 30, address: { street: “123 Main St”, city: “Anytown”, state: “Anystate” }, date: new Date(123), } const copied = structuredClone(originalObject);

这儿 copied 的结果如下：

可以看到，这儿不仅复本了第一类，还复本了嵌套的第一类和字符串，甚至 Date 第一类。structuredClone() 不仅可以做到这些，还可以：

复本无限嵌套的第一类和字符串；复本循环提及；复本各种 JavaScript 类型，例如Date、Set、Map、Error、RegExp、ArrayBuffer, Blob、File、ImageData等；复本同样，所使用的结构化布季夫算法也structuredClone()不能布季夫 DOM 元素。将 HTMLElement 第一类传递给structuredClone()将导致如上所示的错误。任何可转移的第一类。

在 JavaScript 中，可转移第一类（Transferable Objects）是指 ArrayBuffer 和 MessagePort 等类型的第一类，它们可以在主线程和 Web Worker 线程之间相互传递，同时还可以实现零复本缓存共享，提高性能。这是由于可转移第一类具有两个特点：

可共享：可转移第一类本身没有所有权，可以在多个线程之间共享，实现零复本缓存共享。可转移：调用 Transferable API 时，可转移第一类会从发送方（发送线程）转移到接收方（接收线程），不再存在于原始线程中，因此可以避免缓存复本和分配等开销。

要注意的是，使用可转移第一类时必须小心处理，因为一旦第一类被转移，原线程将不再拥有该第一类的所有权，因此在发送线程中不能再访问该第一类。此外，在接收线程中使用可转移第一类时，也需要根据需求进行显式释放，否则可能会导致缓存泄漏和其他难题。

例如，对以下结构，仍然可以使用structuredClone()进行深复本：

const originalObject = { set: new Set([1, 3, 3]), map: new Map([[1, 2]]), regex: /foo/, deep: { array: [ new File(someBlobData, file.txt) ] }, error: new Error(Hello!) } originalObject.circular = originalObject constcopied = structuredClone(originalObject)

当第一类中存在循环提及时，仍然可以通过 structuredClone() 进行深复本。

structuredClone 缺点

当然，structuredClone() 也并不是完美的，下面就来看看有哪些 structuredClone() 不能复本的数据类型。

函数或方式

当复本函数时，就会抛出异常：

function func() {} constfuncClone = structuredClone(func);

输出结果如下：

当复本方式时，也会抛出异常：

const car = { make: BMW, move() { console.log(vroom); }, }; car.basedOn = car;const cloned = structuredClone(car);

输出结果如下：

DOM 节点

当复本 DOM 节点时，也会抛出异常：

constinput =document.querySelector(#text-field); // ❌ Failed: HTMLInputElement object could not be cloned. const clone = structuredClone(input);

属性描述符、setter 和 getter

属性描述符、setter 和 getter 以及类似的元数据都不能被布季夫。例如，对 getter，结果值被布季夫，但 getter 函数本身没有被布季夫（或任何其他属性元数据）：

structuredClone({ get foo() { return bar } })

输出结果如下：

{ foo: bar }

第一类原型

原型链不能被遍历或复本。所以假如布季夫两个实例 MyClass，布季夫的第一类将不再是那个类的两个实例（但是那个类的所有有效属性都将被复本）

class MyClass { foo = barmyMethod() {/* … */ } } const myClass = new MyClass() const cloned = structuredClone(myClass) // { foo: bar } cloned instanceof myClass // false

支持复本的类型

structuredClone() 支持复本的类型如下：

JS 内置第一类

Array（字符串）、ArrayBuffer（数据缓冲区）、Boolean（布尔类型）、DataView（数据视图）、Date（日期类型）、Error（错误类型，包括下面列出的具体类型）、Map（映射类型）、Object （仅指纯第一类，如从第一类字面量中创建的第一类）、原始类型（除symbol外，即 number、string、null、undefined、boolean、BigInt）、RegExp（正则表达式）、Set（集合类型）、TypedArray（类型化字符串）。

Error 类型

Error、EvalError、RangeError、ReferenceError、SyntaxError、TypeError、URIError。

Web/API 类型

AudioData、Blob、CryptoKey、DOMException、DOMMatrix、DOMMatrixReadOnly、DOMPoint、DomQuad、DomRect、File、FileList、FileSystemDirectoryHandle、FileSystemFileHandle、FileSystemHandle、ImageBitmap、ImageData、RTCCertificate、VideoFrame。

浏览器支持

目前主流浏览器都支持 structuredClone API：

为什么不用 JSON.parse(JSON.stringify(x))？

我们平时可能会通过 JSON.parse(JSON.stringify(x)) 来进行深复本，那它有什么缺点呢？

来看下面的例子：

const originalObject = { title: “hello”, date: new Date(123), attendees: [“Steve”] } const copied = JSON.parse(JSON.stringify(originalObject))

通过这种方式，得到的 copied 值如下：

{ title: “hello”, date: “1970-01-01T00:00:00.123Z”, attendees: [ “Steve” ] }

可以看到，这儿的 date 并不是我们想要的 Date 第一类，而是两个字符串。出现这种情况是因为 JSON.stringify 只能处理基本第一类、字符串和基本类型，而其他类型的值在转换之后都可能出现出乎意料的结果，例如 Date 会转化为字符串， Set 会转化为 {}。JSON.stringify甚至全然忽略某些内容，比如undefined或函数。

例如：

const originalObject = { set: new Set([1, 3, 3]), map: new Map([[1, 2]]), regex: /foo/, deep: { array: [ new File(someBlobData, file.txt) ] }, error: new Error(Hello!) } const copied = JSON.parse(JSON.stringify(originalObject))

这儿得到的 copied 值如下：

{set: {}, map: {}, regex: {}, deep“: { array: [ {} ] }, error: {}, }

除此之外，JSON.parse(JSON.stringify(x)) 无法对包含循环提及的第一类进行深布季夫：

const originalObject = { set: new Set([1, 3, 3]), map: new Map([[1, 2]]), regex:/foo/, error: new Error(Hello!) } originalObject.circular = originalObject const copied = JSON.parse(JSON.stringify(originalObject))

当执行上述代码时，就会报错：