> 웹 프론트엔드 > 프런트엔드 Q&A > es6 딥 카피의 여러 구현 방법은 무엇입니까?

es6 딥 카피의 여러 구현 방법은 무엇입니까?

青灯夜游
풀어 주다: 2022-03-23 12:06:52
원래의
6984명이 탐색했습니다.

전체 복사 구현 방법: 1. "Object.sign({},obj)" 문을 사용하여 구현합니다. 2. "JSON.parse(JSON.stringify(obj))" 문을 사용하여 구현합니다. 달성하려면 " $.extend(true,[],arr)" 문을 사용하세요.

es6 딥 카피의 여러 구현 방법은 무엇입니까?

이 튜토리얼의 운영 환경: Windows 7 시스템, ECMAScript 버전 6, Dell G3 컴퓨터.

깊은 복사란

깊은 복사는 참조 유형에 따라 다릅니다. 본질적으로 얕은 복사는 단순히 스택의 참조를 복사하므로, 새로 복사된 값을 수정하면 복사된 객체도 사용자에 의해 수정되며 딥 카피는 힙 메모리에 새 객체를 위한 공간을 생성하므로 복사된 객체는 아무 이유 없이 수정되지 않습니다.

es6에서 전체 복사를 구현하는 방법

방법 1: Object.sign 사용Object.assign

Object.assign默认是对对象进行深拷贝的,但是我们需要注意的是,它只对最外层的进行深拷贝,也就是当对象内嵌套有对象的时候,被嵌套的对象进行的还是浅拷贝;

function cloneDeepAssign(obj){
  return Object.assign({},obj)
}
로그인 후 복사

(温馨提示:数组拷贝方法当中,使用...sliceconcat等进行拷贝也是一样的效果,只深拷贝最外层)

同时,我们知道Object.assign针对的是对象自身可枚举的属性,对于不可枚举的没有效果;

所以,当我们对于一个层次单一对象的时候,可以考虑这种方法,简单快捷。(试过了,也不支持undefined)

方法2:利用JSON

这是我们最最最常提到的一种深拷贝的方式,一般大部分的深拷贝都可以用JSON的方式进行解决,本质是因为JSON会自己去构建新的内存来存放新对象。

function cloneDeepJson(obj){
  return JSON.parse(JSON.stringify(obj))
}
로그인 후 복사

但是我们要注意的是:

  • 会忽略 undefinedsymbol

  • 不可以对Function进行拷贝,因为JSON格式字符串不支持Function,在序列化的时候会自动删除;

  • 诸如 Map, Set, RegExp, Date, ArrayBuffer 和其他内置类型在进行序列化时会丢失;

  • 不支持循环引用对象的拷贝;(循环引用的可以大概地理解为一个对象里面的某一个属性的值是它自己)

方法3:利用jQuery的$.extend()

Object.sign은 기본적으로 객체 전체 복사를 사용하지만 주의해야 할 사항 즉, 객체 내에 중첩된 객체가 있을 때 중첩된 객체는 여전히 얕은 복사를 수행합니다.

var array = [1,2,3,4];
var newArray = $.extend(true,[],array);
로그인 후 복사
(주의 사항: 배열 복사 방법에서는 ..., slice, concat 등은 동일한 효과를 가지며 가장 바깥쪽 레이어만 깊게 복사됩니다.)

동시에, 우리는 Object.sign이 객체 자체의 열거 가능한 속성을 대상으로 하며, 열거 불가능한 속성에는 영향을 미치지 않는다는 것을 알고 있습니다. 따라서 한 수준에서 단일 객체를 처리할 때 다음을 고려할 수 있습니다. 이 방법은 간단하고 빠릅니다. (시도해 보았지만 undefound도 지원되지 않습니다.)

🎜방법 2: JSON 사용🎜🎜🎜가장 일반적으로 언급되는 Deep Copy 방법으로, 일반적으로 대부분의 Deep Copy는 JSON을 사용하여 해결할 수 있습니다. 본질은 JSON이 새로운 객체를 저장하기 위해 자체적으로 새로운 메모리를 구축한다는 것입니다. 🎜rrreee🎜하지만 우리가 주의해야 할 점은: 🎜
  • 🎜는 정의되지 않음기호를 무시한다는 것입니다. code>; 🎜
  • 🎜직렬화 중에 JSON 형식 문자열이 Function을 지원하지 않기 때문에 Function을 복사할 수 없습니다. 때가 되면 자동으로 삭제됩니다 🎜
  • 🎜예: Map, Set, RegExp, Date , ArrayBuffer 및 기타 내장 유형은 직렬화 중에 손실됩니다. 🎜
  • 🎜 순환 참조 개체 복사는 지원되지 않습니다. 객체 내부로 이해됩니다. 특정 속성의 값은 그 자체입니다)🎜
🎜🎜방법 3: jQuery의 $.extend()를 사용하세요🎜🎜rrreee🎜분명히 가장 큰 것은 단점은 jQuery 라이브러리도 도입해야 하므로 일반적으로 사용되지 않습니다. 🎜🎜[관련 권장 사항: 🎜javascript 비디오 튜토리얼🎜, 🎜web front-end🎜]🎜

위 내용은 es6 딥 카피의 여러 구현 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
es6
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿