[ES6]Day10—深拷贝与浅拷贝

ECMAScript 6 入门 (Day10)

接上篇：[ES6]Day09—函数的定义和调用、this、闭包、递归

10.1 浅拷贝与深拷贝

10.1.1 浅拷贝

浅拷贝的含义

浅拷贝只是拷贝一层，更深层次对象级别的只拷贝引用（内存地址）。

var obj ={
	id:1,
	name:'哈哈' ,
	msg:{
		age:18
	}
} 
 
var o={};
for(let key in obj){
	// key为属性名， obj[key] 为属性值
	//这是浅拷贝
	o[key] = obj[key];
}
console.log('o拷贝后',o)

//假如修改o.msg.age , obj.msg.age 也会改变,说明o拷贝的只是obj.msg.age 的地址,属于浅拷贝

o.msg.age=20;
console.log('修改拷贝后的o',o)
console.log('修改拷贝后o,原obj',obj) 

浅拷贝的实现

1、 利用ES6 浅拷贝 object.assign 语法糖

object.assign(target,source，source,...)

object.assign(o,obj)

参考：ECMAScript 6 入门~Object-assign

10.1.2 深拷贝

深拷贝的含义

深拷贝会拷贝多层，每一级别的数据都会拷贝，拷贝对象不是只拷贝引用，而是复制原内存空间中的数据给新对象，为其开辟一个新的内存空间，对新对象属性进行修改时，原对象不受干扰。

var obj ={
	id:1,
	name:'哈哈' ,
	msg:{
		age:18
	}
} 
 
var o={};

function deepCopy(targetObj , sourceObj){
  for (let key in sourceObj){
 	//1、判断数据类型，Array 必须在object 之前判断，因为数组也属于对象
 	
	if(sourceObj[key] instanceof Array){ //数组类型
	
		targetObj[key] =[];
		deepCopy(targetObj[key],sourceObj[key])
		
	}else if(sourceObj[key] instanceof Object){//对象类型
	
		targetObj[key] ={};
		deepCopy(targetObj[key],sourceObj[key]) 
		
	}else{//简单数据类型 
	
	 	targetObj[key] =sourceObj[key] 
	}  
  }  	 
  return targetObj;
}

deepCopy(o,obj)

深拷贝的实现

1、递归方式实现深拷贝

function deepClone(obj) {
  let objClone = Array.isArray(obj) ? [] : {}
  if (obj && typeof obj === 'object') {
    for (let key in obj) {
      if (obj.hasOwnProperty(key)) {
        // 判断obj子元素是否为对象，如果是，递归复制
        if (obj[key] && typeof obj[key] === 'object') {
          objClone[key] = deepClone(obj[key])
        } else {
          objClone[key] = obj[key]
        }
      }
    }
  }
  return objClone
} 
 

会忽略值为function以及undefied的字段，而且对date类型的支持也不太友好。

2、通过 JSON 对象实现深拷贝

//通过js的内置对象JSON 来进行数组对象的深拷贝
function deepClone(obj) {
  var _obj = JSON.stringify(obj),
    objClone = JSON.parse(_obj);
  return objClone;
}