cópia rasa
A cópia superficial é criar um novo objeto, copiar todos os valores de tipo básico e valores de tipo de referência do objeto original e copiar seu endereço de referência. Quando o valor dos dados do tipo de referência no objeto copiado for modificado, isso afetará o objeto original.
cópia profunda
Cópia profunda significa que quando um objeto é copiado, todos os seus atributos e objetos aninhados são copiados recursivamente até que todas as referências e atributos do objeto inteiro sejam completamente copiados. Quando o objeto copiado é modificado, não afeta o objeto original.
método object.assign
object.assign Copia todas as propriedades enumeráveis de um ou mais objetos de origem para um 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 }
O código acima copia as propriedades dos objetos de origem obj1 e obj2 para o objeto de destino obj. Se as propriedades nos objetos de origem forem as mesmas, os valores de propriedade dos objetos de origem na parte traseira substituirão os valores de propriedade de os objetos da frente. Como acima, o valor do atributo a de obj2 substitui o valor do atributo a de obj1 e, finalmente, o valor do atributo a do objeto é 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' } }
O código acima copia as propriedades do objeto obj1 para o objeto obj para obter o objeto res. Quando alteramos a propriedade name do objeto res, a propriedade name do objeto fonte obj também muda.
operador de spread
O operador spread pode realizar a cópia rasa do objeto, a sintaxe é 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
O método concat é usado para mesclar arrays e também pode ser usado para implementar cópias rasas.
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 ]
No código acima, usamos o método concat para mesclar o array arr2 no array arr1 e retornar o novo array arr. Mudamos o atributo name dos objetos no array arr1, e o atributo name dos objetos em arr também muda.
Método Array.prototype.slice
O método slice é usado para copiar um array, e aceita dois parâmetros startIndex e endIndex, que são o índice do início da cópia (incluindo o valor do índice atual) e o índice do final da cópia (excluindo o valor do índice atual, incluindo o valor antes do índice final). Se o parâmetro endIndex não for passado, ele será copiado do índice inicial para o final do array.
const arr = [{
name: 'ayetongzhi'}, 1, 2]
let newArr = arr.slice(0)
newArr[0].name = 'maomao'
console.log(arr[0]);
// { name: 'maomao' }
No código acima, copiamos o array arr e modificamos o atributo name do objeto em newArr, e o nome do objeto em arr também mudou.