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