깊은 카피와 얕은 카피의 이해

왜 심층 복사와 얕은 복사를 사용합니까?
대상을 복제하고 싶을 때 일반적인 방법은obj2=obj1이다. 그러나obj2를 변경할 때obj1에 영향을 주고obj1도obj2에 영향을 미치기 때문에 대상의 직접적인 값이 여전히'연결'되는 문제를 해결하기 위해 깊은 복사와 얕은 복사가 필요하다.

깊이 복사와 얕은 복사

얕은 복사: 인용을 복제하여 모든 인용 대상이 데이터를 가리키게 하고 이 데이터를 수정할 수 있다. 즉, 바늘만 복사하고 같은 메모리 공간을 가리킨다.시스템의 기본 얕은 복사입니다.

 ， 

es5와 es6의 얕은 복제는 다르다. es6는 더 간단하다. es5에서 for...in..의 문법,
대상에게 함수를 만들어서 대상을 복사해서 이 복사된 새로운 대상을 되돌려줍니다
demo: 할당 해제 (얕은 복사)

function clone(obj){
    return {...obj};
}

var a = {a:1, b:2, c:3, d:[0, 1, 2]}
var b = clone(a);
console.log(b.d[1]); //1
b.d[1] = 2;
console.log(b.d[1]); //2
console.log(a.d[1]); //2

object.assign () 얕은 복사

function clone(obj){
    return Object.assign({},obj);
}

Object.assign () 방법은 모든 열거 가능한 속성의 값을 한 개 이상의 원본 대상에서 목표 대상으로 복사하는 데 사용되며, 최소한 두 개의 파라미터를 허용하며, 첫 번째 파라미터는 복사할 수 있는 목표 대상이며, 방법 실행이 끝난 후에 되돌아오고, 나머지 파라미터는 복사할 수 있습니다.
깊이 복사: 변수 값을 복제하고 비기본 유형의 변수는 기본 유형의 변수로 귀속된 후에 복제한다.
array의 슬라이스와 concat

arrayObj.slice(start, [end]), 한 그룹의 절반을 되돌려줍니다.end를 생략하면 끝까지 복사합니다

concat () 방법은 두 개 이상의 그룹을 연결하는 데 사용됩니다.이 방법은 기존의 그룹을 바꾸지 않고 연결된 그룹의 복사본만 되돌려줍니다.

var arr = ["One","Two","Three"];

var arrtoo = arr.slice(0);
arrtoo[1] = "set Map";
document.writeln(" ：" + arr + "
");//Export: ：One,Two,Three
document.writeln(" ：" + arrtoo + "
");//Export: ：One,set Map,Three


var arrtooo = arr.concat();
arrtooo[1] = "set Map To";
document.writeln(" ：" + arr + "
");//Export: ：One,Two,Three
document.writeln(" ：" + arrtooo + "
");//Export: ：One,set Map To,Three

json 대상의paese와stringify

parse: JSON 문자열을 JS 객체로 반서열화할 수 있음

stringify 방법은 JS 대상을 JSON 문자열로 서열화할 수 있다

단점: 깊이 복사한 후 이 대상의 원래 구조 함수가 무엇이든지 깊이 복사한 후에는 Object가 된다.또한 대상에 순환 인용이 존재하는 경우에도 정확하게 처리할 수 없다.
demo:

var source = { name:"source", child:{ name:"child" } } 
var target = JSON.parse(JSON.stringify(source));
target.name = "target";  // target name 
console.log(source.name); //source 
console.log(target.name); //target
target.child.name = "target child"; // target child 
console.log(source.child.name); //child 
console.log(target.child.name); //target child
// 2
var source = { name:function(){console.log(1);}, child:{ name:"child" } } 
var target = JSON.parse(JSON.stringify(source));
console.log(target.name); //undefined
// 3
var source = { name:function(){console.log(1);}, child:new RegExp("e") }
var target = JSON.parse(JSON.stringify(source));
console.log(target.name); //undefined
console.log(target.child); //Object {}