浅拷贝,深拷贝

拷贝

赋值

基本数据类型=> 赋值,赋值之后,两个变量互不影响

eg: var a=1 b=a  console.log(b) // 1  a=2 console.log(b) //1

引用数据类型=> 赋址,仅改变引用的指针,指向同一个对象,所以相互之间有影响

eg: var obj={a:"1" ,b:"2" }  var obj1=obj console.log(obj1) // {a:"1" ,b:"2" } obj.a=3  obj.b=4 console.log(obj1) // {a: 3, b: 4}

浅拷贝

重新在堆中创建内存,拷贝前后对象的基本数据类型互不影响,只拷贝一层,不能对对象的子对象进行拷贝
典型的浅拷贝方法 Object.assign()

eg:var obj={a:1,b:2} obj1=new Object()  Object.assign(obj1, obj)  obj.a=3  console.log(obj1) //{a:1,b:2}  obj1.a=4 console.log(obj) //{a:1,b:2}

浅拷贝方法

var obj={a:'hello',b:{ c:'world' }} 
var obj1=obj
function copyObj(obj){
   let qkb={}
	for(var key in obj){
		if(obj.hasOwnProperty(key)){
			obj1[key]=obj[key]
		}
	}
	return qkb;
}

var obj2= copyObj(obj)
obj.a="haha"
obj.b.c="wo"
console.log(obj1) // {a:'haha',b:{ c:'wo' }} 
console.log(obj2) //{a:'hello',b:{ c:'wo' }} 

ob1只是将指针改变,引用的仍然是同一个对象,而浅拷贝得到的obj2创建了新对象,但是,原对象obj的子对象,则不会对这个子对象浅拷贝,而只是复制其对象的变量地址

深拷贝

=>对对象中的子对象进行递归拷贝,拷贝前后的两个对象,互不影响

1>深拷贝方法 JSON.parse(JSON.stringify(obj))

var obj = {a: {b: 1}}
var copy = JSON.parse(JSON.stringify(obj))

obj.a.b = 2
console.log(obj) // {a: {b: 2}}
console.log(copy) // {a: {b: 1}}

但是 JSON.parse()、JSON.stringify也存在一个问题,JSON.parse()和J SON.stringify()能正确处理的对象只有Number、String、Array等能够被 json 表示的数据结构,因此函数这种不能被 json 表示的类型将不能被正确处理。

var target = {
    a: 1,
    b: 2,
    hello: function() { 
            console.log("Hello, world!");
    }
};
var copy = JSON.parse(JSON.stringify(target));
console.log(copy);   // {a: 1, b: 2}
console.log(JSON.stringify(target)); // "{"a":1,"b":2}"

2> 遍历实现属性复制

function deepCopy (source) {
  var target
  if (typeof source === 'object') {
    target = Array.isArray(source) ? [] : {}
    for (var key in source) {
      if (source.hasOwnProperty(key)) {
        if (typeof source[key] !== 'object') {
          target[key] = source[key]
        } else {
          target[key] = deepCopy(source[key])
        }
      }
    }
  } else {
    target = source
  }
  return target
}

var obj1 = {a: {b: 1}}
var cpObj1 = deepCopy(obj1)
obj1.a.b = 2
console.log(cpObj1) // {a: {b: 1}}

var obj2 = [[1]]
var cpObj2 = deepCopy(obj2) 
obj2[0][0] = 2
console.log(cpObj2) // [[1]]

参考资料

JS 数据类型、赋值、深拷贝和浅拷贝

posted @ 2019-04-12 16:16  sunny_xyj  阅读(185)  评论(0编辑  收藏  举报