copia superficial
La copia superficial es crear un nuevo objeto, copiar todos los valores de tipo básicos y valores de tipo de referencia del objeto original y copiar su dirección de referencia. Cuando se modifica el valor de los datos de tipo de referencia en el objeto copiado, afectará al objeto original.
copia profunda
Copia profunda significa que cuando se copia un objeto, todos sus atributos y objetos anidados se copian recursivamente hasta que todas las referencias y atributos de todo el objeto se copian por completo. Cuando se modifica el objeto copiado, no afecta al objeto original.
método object.assign
object.assign Copia todas las propiedades enumerables de uno o más objetos de origen a un objeto de destino.
// Object.assign(target, source)
let obj1 = {
a: 1 };
let obj2 = {
a: 2, b: 1}
let obj = {
}
let res = Object.assign(obj, obj1, obj2)
console.log(res)
// { a: 2, b: 1 }
El código anterior copia las propiedades de los objetos de origen obj1 y obj2 en el objeto de destino obj. Si las propiedades en los objetos de origen son las mismas, los valores de propiedad de los objetos de origen en la parte posterior sobrescribirán los valores de propiedad de los objetos en el frente. Como arriba, el valor del atributo a de obj2 sobrescribe el valor del atributo a de obj1, y finalmente el valor del atributo a del objeto es 2.
let obj = {
}
const obj1 = {
info: {
name: 'ayetongzhi',
}
}
const res = Object.assign(obj, obj1)
console.log(res);
// { info: { name: 'ayetongzhi' } }
res.info.name = 'maomao'
console.log(res);
// { info: { name: 'maomao' } }
console.log(obj1);
// { info: { name: 'maomao' } }
El código anterior copia las propiedades del objeto obj1 al objeto obj para obtener el objeto res. Cuando cambiamos la propiedad de nombre del objeto res, la propiedad de nombre del objeto de origen obj también cambia.
operador de propagación
El operador de propagación puede realizar la copia superficial del objeto, la sintaxis es let cloneObj = { ... obj }.
let obj1 = {
info: {
name: 'ayetongzhi'
}
}
const obj = {
...obj1}
console.log(obj)
// { info: { name: 'ayetongzhi' } }
obj.info.name = 'maomao'
console.log(obj);
// { info: { name: 'maomao' } }
console.log(obj1);
// { info: { name: 'maomao' } }
método Array.prototype.concat
El método concat se usa para fusionar matrices y también se puede usar para implementar copias superficiales.
const arr1 = [{
name:'ayetongzhi'}, 1]
const arr2 = [2, 3]
const arr = arr1.concat(arr2)
console.log(arr);
// [ { name: 'ayetongzhi' }, 1, 2, 3 ]
arr1[0].name = 'maomao'
console.log(arr);
// [ { name: 'maomao' }, 1, 2, 3 ]
En el código anterior, usamos el método concat para fusionar la matriz arr2 en la matriz arr1 y devolver la nueva matriz arr. Cambiamos el atributo de nombre de los objetos en la matriz arr1, y el atributo de nombre de los objetos en arr también cambia.
método Array.prototype.slice
El método slice se utiliza para copiar la matriz y acepta dos parámetros startIndex y endIndex, que son el índice del inicio de la copia (incluido el valor del índice actual) y el índice del final de la copia (excluyendo el valor del índice actual). índice, incluido el valor anterior al índice final). Si no se pasa el parámetro endIndex, se copiará desde el índice de inicio hasta el final de la matriz.
const arr = [{
name: 'ayetongzhi'}, 1, 2]
let newArr = arr.slice(0)
newArr[0].name = 'maomao'
console.log(arr[0]);
// { name: 'maomao' }
En el código anterior, copiamos la matriz arr y modificamos el atributo de nombre del objeto en newArr, y el nombre del objeto en arr también cambió.