1. 深拷贝和浅拷贝都只针对引用数据类型
  2. 浅拷贝:指 两个js 对象指向同一个内存地址,其中一个改变会影响另一个
  3. 深拷贝: 指复制后的新对象重新指向一个新的内存地址,两个对象改变互不影响

1- 数组的拷贝

1-1 简单数据类型

var arr = [1,2,3,4,5]; //原数组 
var newArr1 = arr; //浅拷贝
var newArr2 = arr.slice(); //深拷贝
var newArr3 = arr.concat(); //深拷贝
var newArr4 = [...arr]; //深拷贝
var newArr5 = JSON.parse(JSON.stringify(arr)); //深拷贝
arr[0] = 'leon';
arr[1]= '27';
console.log(arr);
console.log(newArr1);
console.log(newArr2);
console.log(newArr3);
console.log(newArr4);
console.log(newArr5);

2-2 深拷贝和浅拷贝 - 图1

1-2 复杂数据类型

var arr = [{name: 'wens'},{age: '26'}];  ; //原数组 
var newArr1 = arr; //浅拷贝
var newArr2 = arr.slice(); //浅拷贝
var newArr3 = arr.concat(); //浅拷贝
var newArr4 = [...arr]; //浅拷贝
var newArr5 = JSON.parse(JSON.stringify(arr)); //深拷贝
arr[0].name = 'leon';  
arr[1].age = '27';  
console.log(arr);
console.log(newArr1);
console.log(newArr2);
console.log(newArr3);
console.log(newArr4);
console.log(newArr5);

2-2 深拷贝和浅拷贝 - 图2

深拷贝.png

2- 对象的拷贝

2-1 简单数据类型

var obj = {name:"cheng",age:18}
var a1 = {...obj}             // 深拷贝
var a2= Object.assign({},obj) // 深拷贝
var a3 = obj                  // 浅拷贝
obj.id = 100;
console.log(a1) // {name:"cheng",age:18}
console.log(a2) // {name:"cheng",age:18}
console.log(a3) // {name:"cheng",age:18,id:1001}

2-2 复杂数据类型

// 实现深拷贝
var china = {
      nation : '中国',
      birthplaces:['北京','上海','广州'],
      skincolr :'yellow',
      friends:['sk','ls']
    }
    //深复制,要想达到深复制就需要用递归
    function deepCopy(o,c){
      var c = c || {}
      for(var i in o){
      if(typeof o[i] === 'object'){
                //要考虑深复制问题了
                      if(o[i].constructor === Array){
                      //这是数组
                      c[i] =[]
                    }else{
                      //这是对象
                      c[i] = {}
                    }
                    deepCopy(o[i],c[i])
             }else{
               c[i] = o[i]
             }
         }
         return c
    }
    var result = {name:'result'}
    result = deepCopy(china,result)
    console.dir(result)
 var test ={
      name:{
       xing:{ 
           first:'张',
           second:'李'
      },
      ming:'老头'
    },
    age :40,
    friend :['隔壁老王','宋经纪','同事']
   }
    var result = JSON.parse(JSON.stringify(test))
    result.age = 30
    result.name.xing.first = '往'
    result.friend.push('fdagldf;ghad')
    console.dir(test)
    console.dir(result)

遇到复杂类型(array+object)如何实现深拷贝

// 遇到复杂类型(array+object)如何实现深拷贝

// var obj = null
var obj = {name:{name:"cheng"}} 

function deepClone(obj){
  // 1. 能够识别数组和对象了
  let result;
  if(obj instanceof Array || obj instanceof Object){
    // 2.对拷贝的值做初始值的设定
    if(obj instanceof Array){
      result = []
    }else if(typeof obj == "object"){
      result={}
    }
    // 3.需要将obj克隆到result中
    for(let key in obj){
      result[key] = deepClone(obj[key])
    }
    return result
  }else{
    return obj
  }
}
deepClone(obj)
console.log(deepClone(obj))