실제 프로젝트에서 JS 딥 카피와 얕은 카피를 사용하는 방법

이번에는 실제 프로젝트에서 JS Deep 및 Shallow Copy를 사용하는 방법과 JS Deep 및 Shallow Copy를 실제 프로젝트에서 사용하는 방법에 대한 주의 사항을 알려드리겠습니다.

이 문서의 예에서는 JavaScript 전체 복사 및 얕은 복사의 개념과 사용법을 설명합니다. 참고를 위해 모든 사람과 공유하며 세부 사항은 다음과 같습니다.

js의 얕은 복사와 전체 복사는 복잡한 데이터 유형(Objcet, Array) 복사에만 사용됩니다. 간단히 말하면, 얕은 복사와 깊은 복사 모두 원본 객체를 기반으로 복사본을 재생성하는 기능을 구현할 수 있습니다. 하지만 새로 생성된 객체가 원본 객체에 영향을 미칠 수 있는지 여부에 따라 얕은 복사(shallow copy)와 깊은 복사(deep copy)로 나눌 수 있습니다.

개념 1: 얕은 복사

얕은 복사는 참조 복사를 의미합니다. 새로 생성된 참조와 원본 참조는 모두 동일한 개체의 인스턴스를 가리키며 서로 간의 작업은 서로 영향을 미칩니다.

개념 2: 딥 카피

힙의 메모리를 다시 열고 원본 참조에 해당하는 객체 인스턴스의 모든 내용을 복사하여 딥 카피 객체가 원본 객체와 완전히 격리되도록 합니다. 서로 영향이 없습니다.

개념 3: 배열 깊은 복사 구현

1. for 루프를 사용하세요for循环

<script type="text/javascript">
  var arr1=['a','b','c'];
  var arr2=[];
  function deepCopy(arr1,arr2){
    for(var i=0;i<arr1.length;i++){
      arr2[i]=arr1[i];
    }
  }
  deepCopy(arr1,arr2);
  arr2[1]=&#39;d&#39;;
  console.log(arr1);//[&#39;a&#39;,&#39;b&#39;,&#39;c&#39;]
  console.log(arr2);//[&#39;a&#39;,&#39;d&#39;,&#39;c&#39;]
</script>

2. 使用slice()方法

<script type="text/javascript">
  var arr1=['a','b','c'];
  var arr2=arr1.slice(0);
  arr2[1]='d';
  console.log(arr1);//['a','b','c']
  console.log(arr2);//['a','d','c']
</script>

3. 使用concat方法

<script type="text/javascript">
    var arr1=['a','b','c'];
    var arr2=arr1.concat();
    arr2[1]='d';
    console.log(arr1);//['a','b','c']
    console.log(arr2);//['a','d','c']
</script>

概念4：对象的深拷贝

1. 使用for

<script type="text/javascript">
  var obj = {
    name: 'FungLeo',
    sex: 'man',
    old: '18'
  }
  function copyObj(obj) {
    let res = {}
    for (var key in obj) {
      res[key] = obj[key]
    }
    return res
  }
  var obj2 = copyObj(obj);
  obj2["name"]="kka";
</script>

2. slice() 메서드를 사용하세요

<script type="text/javascript">
  var obj = {
    name: 'FungLeo',
    sex: 'man',
    old: '18'
  }
  var obj2=JSON.parse(JSON.stringif(obj));
  obj2["name"]="kka";
</script>

3. code>concat 메소드rrreee

개념 4: 객체

1의 전체 복사. for 루프

rrreee2를 사용하여 구현rrreee
믿으세요. 이 기사의 사례를 읽은 후, 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트에 있는 다른 관련 기사를 주의 깊게 살펴보시기 바랍니다.

추천 도서:
vue 스캐폴딩 및 vue-cli 설치

🎜🎜🎜🎜vue 프로젝트에서 watch 즉시 사용🎜🎜🎜

위 내용은 실제 프로젝트에서 JS 딥 카피와 얕은 카피를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!