彻底弄懂JS的深拷贝和浅拷贝 |
您所在的位置：网站首页 › js深拷贝和浅拷贝的方法 › 彻底弄懂JS的深拷贝和浅拷贝 |
彻底弄懂JS的深拷贝和浅拷贝
|
大家不管是在面试过程中，还是在实际的项目开发中一定都遇到过深拷贝和浅拷贝，但是对于这两种拷贝的区别可能不是太明白，所以记录一下。 其实这两种拷贝的区别可以总结为一句话：浅拷贝是拷贝一层，深层次的对象级别的就拷贝引用；深拷贝是拷贝多层，每一级别的数据都会拷贝出来。 浅拷贝第一种：遍历对象 function simpleClone(initalObj) { let obj = {}; for ( let i in initalObj) { obj[i] = initalObj[i]; return obj; } } let obj = { a: "hello", b:{ a: "world", b: 21 }, c:["Bob", "Tom", "Jenny"], d:function() { alert("hello world"); } }; let cloneObj = simpleClone(obj); // 更改克隆对象中的a,b,c,d,看看原对象是否发生改变 cloneObj.a = "changed"; cloneObj.b.a = "changed"; cloneObj.c = [1, 2, 3]; cloneObj.d = function() { alert("changed"); }; console.log(obj.a); //hello console.log(obj.b); //{a:"changed",b:25},事实上就是只有对象是拷贝的引用类型 console.log(obj.c); //['Bob','Tom','Jenny'] console.log(obj.d); //...alert("hello world")浅拷贝就是拷贝了一层，除了对象是拷贝的引用类型，其他都是直接将值传递，有自己的内存空间的。 第二种：Object.assign(target, ...sources) 参数： target：目标对象。 sources：任意多个源对象。 返回值：目标对象会被返回。 var obj1 = { a: "hello", b: { a: "hello", b: 21} }; var cloneObj1= Object.assign({}, obj1); cloneObj1.a = "changed"; cloneObj1.b.a = "changed";
第一种：JSON实现 let obj = [1,2,[11,22]]; let cloneObj = JSON.parse(JSON.stringify(obj)); cloneObj[2][0] = 33 console.log(obj) // [1,2,[11,22]] console.log(cloneObj) // [1,2,[33,22]]发现被JSON转换过后的对象改变并没有影响到原对象，但是这种深拷贝实现方式有缺陷 let obj = { nul:null, und:undefined, sym: Symbol('sym'), str: 'str', bol: true, num: 12, arr: [1,2], date: new Date(), fun: function() {}, } console.log(JSON.parse(JSON.stringify(obj)))
第二种：递归实现 实现深层克隆的思路： 1、首先对需要克隆的对象进行遍历，判断里面属性值的类型 2、属性值的类型分为两种：原始值(string,number,null,undefine,boolean)和引用值（object,array） 3、如果遍历到的属性值为原始值，则直接进行拷贝 4、如果遍历到的属性值为引用值类型，则需要在目标对象的对应属性地方建立新的引用值类型，以原始引用值类型为模板，新建立的引用值为目标重复1，2，3步骤进行拷贝，从而实现深层拷贝。 function deepClone(origin, target) { var target = target || {}; toStr = Object.prototype.toString; arrStr = '[object.Array]'; for (var key in origin) { // 判断是否为原型链上的值 if (origin.hasOwnProperty(key)) { // 判断当前的属性值类型是否为引用值 if (origin[key] !== 'null' && typeof origin[key] == 'object') { // 当前引用值类型为引用值，调用原型链上的方法判断当前的属性值是否为数组 if (toStr.call(origin[key]) == arrStr) { // 根据当前属性值为数组类型，建立目标数组 target[key] = []; } else { // 当前属性值为对象类型，建立目标对象 target[key] = {}; } // 以新建立的目标类型，对原始的引用值类型属性进行递归克隆，即重复步骤1，2，3，4 deepClone(origin[key], target[key]); } else { // 当前的属性值类型不为引用值类型，为原始值，直接拷贝 target[key] = origin[key]; } } } } |
可以发现有部分属性被忽略了：【本文地址】
今日新闻 |
推荐新闻 |