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 } }
正如在此代码片段中所见:
- 更新第一层克隆对象的属性后,原始属性不会更新。
- 在更深层次更新属性后,原始属性既不更新。发生这种情况是因为在这种情况下,还复制了更深层次。
- 而对于浅拷贝对象
shallowCopy
来说,其值会随着对象deepCopy
的变化而变化,在项目开发中很容易带来BUG
structuredClone()
现在可在所有主流浏览器和运行时(如 Node.js
或 Deno
)的最新版本中使用。
以上就是JavaScript 中深拷贝方法structuredClone的详细内容,更多关于JavaScript 深拷贝的资料请关注脚本之家其它相关文章!