JavaScript深拷贝方法structuredClone如何使用寻技术

本篇内容主要讲解“JavaScript深拷贝方法structuredClone如何使用”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“JavaScript深拷贝方法structuredClone如何使用”吧!

正文

对于深拷贝，最容易也应该是常见的方法是使用

JSON.parse() + JSON.stringify()

，还有一个借助第三方脚本库 lodash ，其中方法

cloneDeep

可以实现深拷贝。现在可以使用原生的

structuredClone()

方法。

浅拷贝与深拷贝

首先，先来了解一下浅拷贝和深拷贝的区别：

浅拷贝：就是只拷贝对象的第一层。引用了更深层次的内容。可以使用扩展运算符
```
...
```
或使用
```
Object.assign()
```
在 JavaScript 中实现浅拷贝。
深拷贝：是指对象的所有层次都被复制。这是对象的真实副本。可以使用
```
JSON.parse() + JSON.stringify()
```
执行此操作，现在，还可以使用原生方法
```
structuredClone()
```
执行此操作。

使用 structuredClone 进行深拷贝

原生

structuredClone()

方法使用结构化克隆算法创建给定值的深层拷贝。

结构化克隆算法用于复制复杂 JavaScript 对象的算法。通过来自 Worker 的

postMessage()

或使用

IndexedDB

存储对象时在内部使用。它通过递归输入对象来构建克隆，同时保持先前访问过的引用的映射，以避免无限遍历循环。

语法如下：

structuredClone(value)
structuredClone(value, { transfer })

```
value
```
：被克隆的对象。可以是任何结构化克隆支持的类型。
```
transfer
```
：为可选参数，是一个可转移对象的数组，里面的
```
值
```
并没有被克隆，而是被转移到被拷贝对象上。

返回值：返回值是原始值的深拷贝。

下面是示例代码：

const objProfile = { name: "DevPoint", detail: { age: 30 } };
const deepCopy = structuredClone(objProfile);
const shallowCopy = { ...deepCopy };
console.log(shallowCopy); // {"name": "DevPoint", "detail": {  "age": 35 } }
deepCopy.name = "天行无忌";
deepCopy.detail.age = 35;
console.log(objProfile); // {"name": "DevPoint", "detail": {  "age": 30 } }
console.log(deepCopy); // {"name": "天行无忌", "detail": {  "age": 35 } }

正如在此代码片段中所见：