Resumo da prática js cópia profunda cópia rasa

Resumindo

O conhecimento real vem da prática.

A diferença entre cópia superficial e cópia profunda depende de como a cópia é realizada primeiro e, em seguida, fale sobre a diferença.

var a, b = a;

Os tipos básicos usam operações de atribuição, apenas atribuições, as modificações não afetarão umas às outras.

O endereço de referência de atribuição do tipo de referência é o mesmo e as modificações afetarão um ao outro.

 

A diferença entre as seguintes implementações:

Copie superficialmente, modifique os elementos da matriz em um objeto, o outro objeto também será modificado. Se for para modificar ou adicionar atributos, não afetará.

A cópia profunda, não importa o que seja modificado, não afeta outro objeto.

 

A cópia profunda é usada no desenvolvimento real, a cópia superficial nunca é usada.

Além disso, a função de fábrica pode ser considerada uma cópia profunda das propriedades fixas conhecidas. Na verdade, quando o valor do atributo props é um objeto ou uma matriz, o método de retornar a função de fábrica é usado.

const compB = {
  template: `<div>
              <p>age:{
   
   {age}}</p>
              <p>sex:{
   
   {sex}}</p>
              <p>hobby.ball:{
   
   {hobby.ball}}</p>
              <p>hobby.game:{
   
   {hobby.game}}</p>
            </div>`,
  props: {
    age: Number,
    sex: {
      type: String,
      default: 'male',
      validator(value) {
        return value === 'male' || value === 'female'
      }
    },
    hobby: {
      type: Object,
      default() {
        return {
          ball: '',
          game: ''
        }
      }
    }
  }
}

 

Cópia superficial

Antevisão do teste

desfazer: bug na ordem de execução do js, ​​modificações posteriores também afetarão o resultado impresso anteriormente.

Código de teste

<script>
//浅拷贝实例:此递归方法不包含数组对象
function shallowCopy(src) {
  var newobj = {};
  for (var prop in src) {
    if (src.hasOwnProperty(prop)) {
      //仅拷贝私有属性，如toString这些对象公共属性不拷贝
      newobj[prop] = src[prop];
    }
  }
  return newobj;
}

var obj = {
  strA:"test_A",
  arr: [11,22,33],
  obj:{a:{b:1},c:2},
  fun:function(a,b){return a-b}
};
console.log("打印 obj"); 
console.log(obj); 

var shallowObj = shallowCopy(obj);
console.log("shallowObj浅拷贝 obj，打印 shallowObj"); 
console.log(shallowObj); 

shallowObj.arr[0] = 1;
shallowObj.strA="testEdit_A"
shallowObj.strB="testAdd_B"
console.log("修改 shallowObj，打印 shallowObj"); 
console.log(shallowObj);
console.log("打印 obj"); 
console.log(obj);
</script>

Cópia profunda

Antevisão do teste

Código de teste

<script>
//深拷贝，要想达到深拷贝就需要用递归
function deepClone(obj){
  var newObj = obj instanceof Array ? []:{};
  if(typeof obj !== 'object'){
    return obj;
  }else{
    for(var i in obj){
      newObj[i] = typeof obj[i] === 'object' ? deepClone(obj[i]) : obj[i];
    }
  }
  return newObj;
}

var obj = {
  strA:"test_A",
  arr: [11,22,33],
  obj:{a:{b:1},c:2},
  fun:function(a,b){return a-b}
};
console.log("打印 obj"); 
console.log(obj); 

//测试对象深拷贝
var deepCloneObj = deepClone(obj);
console.log("deepCloneObj 深拷贝 obj，打印 deepCloneObj");
console.log(deepCloneObj);
console.log("修改 deepCloneObj ，打印 deepCloneObj");
deepCloneObj.arr[0] = 1;
deepCloneObj.strA="testEdit_A"
deepCloneObj.strC="testAdd_C"
console.log(deepCloneObj);
console.log("打印 obj");
console.log(obj);

//测试数组深拷贝
var testArr = [11, 22, 33, 44, "aa", "55", [1, 2,3,4]];
console.log("打印 testArr 数组");
console.log(testArr);

var arr = deepClone(testArr);
console.log("arr 拷贝了 testArr，打印 arr");
console.log(arr);

testArr[0] = 1;
console.log("修改 testArr，打印 testArr");
console.log(testArr);
console.log("打印 arr");
console.log(arr);
</script>

Leitura relacionada recomendada 

Explique a pilha de memória JavaScript e a memória heap em detalhes

Fale mais claramente

https://www.jb51.net/article/159120.htm