JavaScript深拷贝方法structuredClone使用

云初冀北 02-22 60 抢沙发

默认

摘要： 正文对于深拷贝，最容易也应该是常见的方法是使用 JSON.parse() + JSON.stringify() ，还有一个借助第三方脚本库 lodash ，其中方法 cloneDe...

?=正文

对于深拷贝，最容易也应该是常见的方法是使用 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 } }

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

更新第一层克隆对象的属性后，原始属性不会更新。在更深层次更新属性后，原始属性既不更新。发生这种情况是因为在这种情况下，还复制了更深层次。而对于浅拷贝对象 shallowCopy 来说，其值会随着对象 deepCopy 的变化而变化，在项目开发中很容易带来bug

structuredClone() 现在可在所有主流浏览器和运行时（如 Node.js 或 Deno）的最新版本中使用。

以上就是javaScript 中深拷贝方法structuredClone的详细内容，更多关于JavaScript 深拷贝的资料请关注云初冀北其它相关文章！

免责声明

本站提供的资源，都来自网络，版权争议与本站无关，所有内容及软件的文章仅限用于学习和研究目的。不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负，我们不保证内容的长久可用性，通过使用本站内容随之而来的风险与本站无关，您必须在下载后的24个小时之内，从您的电脑/手机中彻底删除上述内容。如果您喜欢该程序，请支持正版软件，购买注册，得到更好的正版服务。侵删请致信E-mail：Goliszhou@gmail.com

标签： JavaScript 深拷贝 structuredClone