深浅拷贝

Karrdy 发布于2019-08-23 15:42 / 610人阅读

摘要：深复制实现代码如下第一种方法通过递归解析解决第二种方法通过解析解决作者六师兄链接原生深拷贝的实现处理未输入新对象的情况通过方法构造新的对象

深浅拷贝针对的是对象类型，如果是字符串的数组用[...arr]，还是不会影响

要区分针对数组的深浅拷贝(默认情况为里面没有对象的数组)，与针对对象的深浅拷贝

JavaScript数组深拷贝和浅拷贝的两种方法

let a1 = [1, 2];
let a2 = a1;

a2[0] = 2;
a1 // [2, 2]
这个是复制了指向底层数据结构的指针
--

let a1 = [1, 2];
let a2 = [...a1];
这个是a1会返回原数组的克隆，再修改a2就不会对a1产生影响
--

let a1 = [{foo:1}];
let a2 = [...a1];
a1[0].foo=2
a2[0].foo ===>2
这时a1数组里是对象，a2克隆过去的话，对象里的值还是会随着修改


深拷贝普遍的方法是对对象的子对象进行递归拷贝
// 递归实现一个深拷贝
function deepClone(source){
   if(!source || typeof source !== "object"){
     throw new Error("error arguments", "shallowClone");
   }
   var targetObj = source.constructor === Array ? [] : {};
   for(var keys in source){
      if(source.hasOwnProperty(keys)){
         if(source[keys] && typeof source[keys] === "object"){
           targetObj[keys] = source[keys].constructor === Array ? [] : {};
           targetObj[keys] = deepClone(source[keys]);
         }else{
           targetObj[keys] = source[keys];
         }
      } 
   }
   return targetObj;
}


有一个用JSON对象中的parse和stringify来实现深拷贝
但是源对象的方法在拷贝的过程中丢失了，这是因为在序列化JavaScript对象时，所有函数和原型成员会被有意忽略

// 利用JSON序列化实现一个深拷贝
function deepClone(source){
  return JSON.parse(JSON.stringify(source));
}
var o1 = {
  arr: [1, 2, 3],
  obj: {
    key: "value"
  },
  func: function(){
    return 1;
  }
};
var o2 = deepClone(o1);
console.log(o2); // => {arr: [1,2,3], obj: {key: "value"}}

js 深拷贝 vs 浅拷贝思维导图

对于字符串类型，浅复制是对值的复制，对于对象来说，浅复制是对对象地址的复制，并没   有开辟新的栈，也就是复制的结果是两个对象指向同一个地址，修改其中一个对象的属性，则另一个对象的属性也会改变，而深复制则是开辟新的栈，两个对象对应两个不同的地址，修改一个对象的属性，不会改变另一个对象的属性。深复制实现代码如下：  
第一种方法、通过递归解析解决   
第二种方法：通过JSON解析解决   
作者：六师兄Leon   
链接：https://www.zhihu.com/questio...

JavaScript 原生js深拷贝的实现

function deepCopy(initalObject,finalObject){
  var finalObject = finalObject || {} 
  // 处理未输入新对象的情况
  for(var key in initalObject){
    if(initalObject[key] === initalObject){
      continue
    }
    if(typeof initalObject[key] === "object"){
      finalObject[key] = (initalObject[key].constructor === Array) ? [] : Object.create(initalObject[key])  //通过Object.create()方法构造新的对象
    }else{
      finalObject[key] = initalObject[key]
    }
  }
  return finalObject
}

云服务器 GPU云服务器深浅拷贝深浅后拷贝预拷贝深拷贝和浅拷贝

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/102468.html

JS专题之深浅拷贝

摘要：在之前的文章专题之数据类型和类型检测中我有讲过，中的数据类型分为两种，基本数据类型和引用数据类型，基本数据类型是保存在栈的数据结构中的是按值访问，所以不存在深浅拷贝问题。前言在开发过程中，偶尔会遇到这种场景，拿到一个数据后，你打算对它进行处理，但是你又希望拷贝一份副本出来，方便数据对比和以后恢复数据。那么这就涉及到了 JS 中对数据的深浅拷贝问题，所谓深浅拷贝，浅拷贝的意思就是，...

ASCH 2019-08-23 15:07 评论0 收藏0
深入理解JS深浅拷贝

摘要：深拷贝相比于浅拷贝速度较慢并且花销较大。所以在赋值完成后，在栈内存就有两个指针指向堆内存同一个数据。结果如下扩展运算符只能对一层进行深拷贝如果拷贝的层数超过了一层的话，那么就会进行浅拷贝那么我们可以看到和展开原算符对于深浅拷贝的结果是一样。 JS中数据类型基本数据类型： undefined、null、Boolean、Number、String和Symbol(ES6) 引用数据类型：...

JackJiang 2019-08-23 14:31 评论0 收藏0
深浅拷贝

摘要：好像栗子不是那么好吃，那我们来看看下面的解释吧深浅拷贝深拷贝和浅拷贝只针对像这样的引用类型数据。深拷贝则是开启一个新的栈，两个对象对应两个不同的引用地址，修改一个对象的属性，不会改变另一个对象的属性。拷贝顾名思义就是复制，但是它并不简单哦，拷贝分为深浅拷贝，那么啥是深拷贝啥是浅拷贝呢，让我们来举个栗子，浅拷贝就是当你拷贝别人的U盘里东西时，却没有新建文件存放在自己的电脑里，直接在里面...

yck 2019-08-21 17:42 评论0 收藏0
Javascript对象的深浅拷贝

摘要：开门见山，有人叫对象的复制为深复制浅复制，也有人叫深拷贝浅拷贝。高级属性修改深拷贝满足对象的复制，浅拷贝影响原数组。关于对象的深浅拷贝，暂且探索到这里，后续有新发现再进行补充。 showImg(https://segmentfault.com/img/remote/1460000014305581); 开门见山，有人叫对象的复制为深复制浅复制，也有人叫深拷贝浅拷贝。其实都是copy。 ...

qieangel2013 2019-08-22 16:12 评论0 收藏0
9012年，当我们讨论js深浅拷贝时我们在说些什么？

摘要：正文讨论深浅拷贝，首先要从的基本数据类型说起根据中的变量类型传递方式，分为值类型和引用类型，值类型变量包括。当你拷贝的对象有多级的时候，就是深拷贝。数据不存在则对其拷贝。前言：本文主要阅读对象：对深浅拷贝印象模糊对初级前端，想对js深浅拷贝聊一聊的中级前端。如果是对这些有完整对认知体系和解决方法的大佬，可以选择略过。正文：讨论深浅拷贝，首先要从js的基本数据类型说起：根据 J...

xeblog 2019-05-21 19:19 评论0 收藏0