개념
깊은 복사: 힙 메모리의 저장 공간을 다시 열고 동일한 개체를 완전히 복제합니다.
얕은 복사: 힙 메모리의 공간을 다시 열지 않고 스택 메모리의 참조 주소만 복사합니다.
본질적으로 두 개체(배열)는 여전히 동일한 저장 공간을 가리킵니다. 여기에 코드 조각을 삽입하십시오.
1. 재귀적 방법(권장, 프로젝트에서 가장 안전하고 가장 일반적으로 사용됨)
//使用递归的方式实现数组、对象的深拷贝
export function deepClone (obj) {
let objClone = Array.isArray(obj) ? [] : {
};
if (obj && typeof obj === "object") {
for (var key in obj) {
if (obj.hasOwnProperty(key)) {
//判断ojb子元素是否为对象，如果是，递归复制
if (obj[key] && typeof obj[key] === "object") {
objClone[key] = deepClone(obj[key]);
} else {
//如果不是，简单复制
objClone[key] = obj[key];
}
}
}
}
return objClone;
};
2. JSON.stringify();(권장하지 않음, 위험이 있음)
일반 객체도 딥 카피가 가능하지만! ! ! 개체 콘텐츠 항목이 숫자인 string.boolean이면 문제가 없습니다. 단, 객체 콘텐츠 항목이 정의되지 않은 경우 null, Date, RegExp, function, error. JSON.parse(JSON.stringify())로 복사하면 문제가 발생합니다.
3. 타사 라이브러리 lodash에서 cloneDeep() 메서드 사용
사용 권장 여부는 상황에 따라 다릅니다. 프로젝트에 딥 카피 기능만 필요한 경우 이 경우 함수에 대한 전체 타사 라이브러리를 도입할 가치가 없습니다. 프로젝트에 대한 재귀 함수를 작성하는 것이 좋습니다
.사실 lodash.cloneDeep() 메서드의 맨 아래 계층은 재귀 메서드입니다. 외부 레이어에 있는 cloneDeep의 기본 기능인 baseClone 레이어를 캡슐화합니다.
따라서 원래 프로젝트에서 lodash 라이브러리를 사용하지 않았다면 이 기능을 위해 도입할 필요가 없습니다.
4. jquery의 extend() 메소드는 deep copy 수행(JQ에서 사용 권장)
이 방법은 JQuery로 빌드된 프로젝트에서만 사용할 수 있습니다. JQuery 자체가 수행하는 확장
let obj = {
a: {
c: 2, d: [1, 3, 5], e: "哇哇哇" }, b: 4 };
let newObj = $.extend(true, {
}, obj1);
//拷贝完成obj.b = 20;console.log(newObj.b); //输出 4
요약하다:
딥 카피를 만드는 방법:
재귀 함수(권장, 프로젝트에서 더 많이 사용, 더 작고 더 안전함)
JSON.stringify() 및 JSON.parse() ; (권장되지 않음, 함수, 날짜 등의 변수를 만나면 예상치 못한 문제가 발생하기 쉽습니다)
타사 라이브러리 lodash의 cloneDeep() 메서드
JQuery의 extend() 함수(JQuery 프로젝트에서 사용 권장, 다른 프로젝트에서는 여전히 재귀 함수 사용 권장)