JavaScript如何实现浅拷贝和深拷贝呢

JavaScript实现深浅拷贝

1. 浅拷贝

生成一个新的指针，但依旧指向原来的地址，简单的来说，B复制A，A发生改变了，B也跟着发生改变

实现浅拷贝的方式

• 自定义函数

function shallowCopy(obj){
   let newObj = {};
   for(let item in obj){
      if(obj.hasOwnPrototype(item)){
         newObj[item] = obj[item];
      }
   }
   return newObj;
}

• ES6扩展运算符

function shallowCopy(obj){
  return {...obj};
}

• ES6 Object.assign() 这种方法需要注意的地方是，当被复制的对象是一层的时候属于深拷贝，两层或者多层的时候是浅拷贝

let obj = {a:1,b:[1,2]};
let newObj = Object.assign({},obj);
obj.b[0] = 100;
console.log(newObj.b[0]); //100

• 数组方法，只适合于类数组对象 Array.from()

let arr = ['a',['b','c'],'d'];
let newArr = Array.from(arr);
arr[1][0] = 'e';
console.log(newArr[1][0]);  //e

2. 深拷贝

生成一个新的指针和一块新的内存，新的指针会指向这块新的内存，即B复制A，A发生改变，而B不变
深拷贝的局限：会忽略undefined、不能序列化函数、不能解决循环引用的对象

实现深拷贝的方式

• 自定义函数

function deepCopy(obj){
   let newObj = obj instanceOf Array ? [] : {};
   for(let item in obj){
      if(obj.hasOwnProperty(item)){
          newObj[item] = typeOf obj[item] === 'object' ? deepCopy(obj[item]) : obj[item];
      }
   }
   return newObj;
}

• JSON.parse(JSON.stringify())

用JSON.stringify()把对象转化为字符串，再用JSON.parse把字符串转化为新的对象，只有可以转化为JSON格式的对象才可以使用这种方式，如果对象中包含Function就不可以使用这种方式了。

let obj = {a:1,b:[1,2]};
let newObj = JSON.parse(JSON.stringify(obj));
obj.b[0] = 100;
console.log(newObj.b[0]); //1

• ES6 Object.assign()

let obj = {a:1};
let newObj = Object.assign({},obj);
obj.a = 100;
console.log(newObj.a); //1