Entrevista front-end: ¿diferencia entre copia superficial y copia profunda?

Así que buenas noches a todos, soy el disertante principal esta noche, soy el Hermano Conejo.

 

A menudo nos preguntan la diferencia entre copia superficial y copia profunda en las entrevistas, y esta pregunta también se hace en el grupo, así que hoy escribiré un blog para explicarlo.

 

1. Copia superficial

La copia superficial se refiere a la copia de valor del tipo básico y la copia de dirección del tipo de objeto .

¿Cómo decir, cuáles son los tipos básicos?

En js, los tipos básicos que conocemos son cadenas, números y booleanos.

Cuando escribimos código como este, es una copia superficial.

var a = 1;
var b = a; //浅拷贝
b = 2;     //改变b的值，并不会影响到a，因为浅拷贝对基本类型而言就是值拷贝
console.log(a);

a sigue siendo 1, no tiene nada que ver con b.

El mismo principio se aplica a los objetos. También hay tipos de objetos (también llamados tipos de datos de referencia) en JavaScript, y una copia superficial de un tipo de objeto simplemente copia la dirección.

var p1 = {
    name: 'jack'
}

var p2 = p1;
p2.name = 'rose';

console.log(p1);

p2 guarda exactamente la misma dirección de memoria que p1, al igual que si vas a asignar una clave a Zhang San, y Zhang San tiene la clave, puede ir a tu casa y beber el yogur en el refrigerador.

2. Copia profunda

Una copia profunda significa que además de copiar el valor del tipo básico, el tipo de objeto también se copia por completo.

Un objeto está fijo en la memoria, si queremos hacer una copia profunda de él, la única forma es crear un nuevo objeto, y el valor en él replica completamente el objeto original.

Todavía el ejemplo de ahora, lo modificamos ligeramente.

var p1 = {
    name: 'jack'
}

var p2 = {
    name: p1.name
};
p2.name = 'rose';

De esta forma, cuando transformamos p2, no afectará a p1. Esta es una copia profunda.

Podemos implementar una copia profunda de esta manera, pero si hay demasiados atributos, será muy engorroso. Hablemos de cómo implementar el método general de copia profunda.

3. Copia profunda Object.assign()

Object.assign()Es un método que puede realizar una copia profunda en objetos no anidados.Si hay anidamiento en el objeto, su comportamiento en el objeto anidado se convierte en una copia superficial normal. Si no hay anidamiento, se puede usar este método.

var p1 = {
    name: 'jack'
}

var p2 = {}

Object.assign(p2,p1);

Hay un método similar, que es convertir con JSON

var p1 = {
    name: 'jack',
    age:12
}

var p2 = JSON.parse(JSON.stringify(p1));

p2.name = 'rose';

En el desarrollo real, este método puede usarse más, como convertir algunos datos en json y almacenarlos en el caché local. Cuando sea necesario, los deserializaremos.

4. Recurrencia de copia profunda

function deepCopy(dest,src){
  var dest = dest || {};
  for(var key in src){
    //如果对象的属性又是对象，则递归处理
    if(typeof src[key] === "object"){ 
        dest[key]= (src[key].constructor === Array)?[]:{}; 
        deepCopy(dest[key],src[key]); 
    }else{
        dest[key]=src[key];  
    }
  }
  return dest;
}

prueba:

var p1 = {
    name: 'jack',
    age:12,
    toy: {
        name:'car'
    }
}

var p2 = deepCopy({},p1);

Se puede ver que la operación de p2 no afecta a p1, que es una copia profunda del método recursivo. 

Eso es todo por el intercambio de hoy, y le invitamos a venir a nuestro qun de aprendizaje para comunicarse ~~