在 JavaScript 中深度克隆对象的最有效方法是什么?
技术问答
287 人阅读
|
0 人回复
|
2023-09-11
|
我做过类似obj = JSON.parse(JSON.stringify(o));但是质疑效率。 p; C, }, I4 i% z2 u' Q
我还看到了各种缺陷的递归复制函数。 K: ]! M; [# D
我很惊讶没有标准化的解决方案。. Y& V, S5 Q) h# T$ Q$ L3 L. p* b
X' [) m4 |9 s 解决方案: ( [3 R, e( e2 w3 \8 R5 S
Native deep cloning现在有个名字structured cloning的 JS 标准,它在 Node 11 及更高版本进行实验性工作,将登录浏览器,并有适合现有系统的 polyfill。
" K8 \' |/ E1 x; p; i( o6 X$ lstructuredClone(value)
' I4 h7 a) f3 n3 z4 |" b 如有必要,先加载 polyfill:
' C+ r1 [4 Z, x" ~4 a7 Zimport structuredClone from '@ungap/structured-clone';$ {8 t4 m1 G% ^. b
较旧的答案数据丢失的快速克隆 - JSON.parse/stringify如果不使用DateS,功能,undefined,Infinity,文件列表,正则表达式,地图,集合,斑点,ImageDatas,在稀疏数组、类型化数组或其他复杂类型的对象中,衬垫深克隆的简单对象是:
3 }8 j8 q0 Z( }( vJSON.parse(JSON.stringify(object))const a = { string: 'string', number: 123, bool: false, nul: null, date: new Date // stringified undef: undefined, // lost inf: Infinity, // forced to 'null' re: /.* /, / lost}console.log(a);console.log(typeof a.date); // Date objectconst clone = JSON.parse(JSON.stringify(a));console.log(clone);console.log(typeof clone.date); // result of .toISOString()6 w3 K% c* \; Q) ?7 g1 O" n$ c: e
使用library可靠克隆由于克隆对象不容易(复杂类型、循环引用、函数等),大多数主要都提供了克隆对象的函数。不要重新发明轮子- 如果您已经在使用库,请检查它是否具有对象克隆功能。, J1 H1 [3 H" c3 _. T$ `/ g9 j
lodash - cloneDeep; 可以通过lodash.clonedeep单独导入模块。如果您还没有使用提供深度克隆功能的库,它可能是您的最佳选择9 E8 B8 s% X- B+ ~6 z. l$ S
AngularJS - angular.copy- {7 W. l$ M) E: v
jQuery - jQuery.extend(true,{ },oldObject); .clone()只克隆 DOM 元素
! b% e+ C. K. B& J0 i* j8 w" w' Ojust library - just-clone; 零依赖 npm 模块库的一部分。适用于各种场合的无罪公用事业。ES6(shallow copy)请注意 起见,请注意 ES6 提供了两种浅拷贝机制:Object.assign() 和 spread syntax. 。它将所有可枚举属性的值从一个对象复制到另一个对象。
& _0 ]8 ~% o+ R7 `var A1 = {a: "2"};var A2 = Object.assign({},A1);var A3 = {...A / Spread Syntax
8 m5 ]1 h3 P) G ?( q! r |
|
|
|
|
|