原始值与引用值复制值的区别以及引用值的浅拷贝与深拷贝

原始值与引用值复制值的区别以及引用值的浅拷贝与深拷贝

 
 除了存储方式不同，原始值和引用值在通过变量复制时也有所不同。本文介绍了他们两者的区别，以及如何实现引用值的浅拷贝与深拷贝。

原始值的复制

  对原始值进行复制时，前后的两个变量完全独立，互不影响

let a = 10
b = a
console.log(a,b);//10 10
a = 20
console.log(a,b);//20 10

 

引用值的复制

 对引用值进行复制时，此时的复制实际上是一个指针。两个变量指向同一个对象，一个变量的改变会影响另一个变化

let obj1 = {name:'Ann',age:10}
let obj2 = obj1
console.log(obj2);//{ name: 'Ann', age: 10 }
obj1.age = 20
console.log(obj1);//{ name: 'Ann', age: 20 }
console.log(obj2);//{ name: 'Ann', age: 20 }
obj2.age = 0
console.log(obj1);//{ name: 'Ann', age: 0 }
console.log(obj2);//{ name: 'Ann', age: 0 }

 图解

 
 那么我们该如何实现引用值独立的拷贝呢？该篇文章主要介绍以下两种方法:

引用值的浅拷贝

Object.assign( )方法实现浅拷贝

  该方法主要用来合并多个对象

let obj1 = {name:'Ann',age:10}
let obj2 = Object.assign({},obj1)
console.log(obj2);//{ name: 'Ann', age: 10 }
obj1['age'] = 20
console.log(obj2);//{ name: 'Ann', age: 10 }

使用空对象和obj1合并，此代码足以证明obj1和obj2为独立的两个对象。
 

剩余参数实现浅拷贝

let obj1 = {name:'Ann',age:10}
obj2 = {...obj1}
console.log(obj2);//{ name: 'Ann', age: 10 }
obj1['age'] = 20
console.log(obj2);//{ name: 'Ann', age: 10 }

以上两种方法只拷贝源对象的自身属性（不拷贝继承属性），也不拷贝不可枚举的属性。但为什么叫做浅拷贝呢？

let obj1 = {name:'Ann',age:10,info:{class:1}}
obj2 = {...obj1}
obj1['info']['class'] = 2
console.log(obj2);//{ name: 'Ann', age: 10, info: { class: 2 } }

当有多层对象嵌套时,以上两种方法中两个对象的内层的对象还是会相互影响，其原因是由于指向同一个对象。那么我们应该如何解决以实现多层次嵌套对象的复制呢，接下来介绍深拷贝

引用值的深拷贝

递归实现深拷贝

let obj1 = {name:'Ann',age:10,info:[{class:1}]}
function copy(obj){
  let res = obj instanceof Array ? []:{}
  for (const [key,value] of Object.entries(obj)) {
    res[key] = typeof value =='object'?copy(value):value
  }
  return res
}
let obj2 = copy(obj1)
console.log(obj2);//{ name: 'Ann', age: 10, info: [ { class: 1 } ] }
obj1['info'][0]['class'] = 2
console.log(obj1);//{ name: 'Ann', age: 10, info: [ { class: 2 } ] }
console.log(obj2);//{ name: 'Ann', age: 10, info: [ { class: 1 } ] }