深入理解 Javascript 之 JS的深浅拷贝

Tikitoo 发布于2019-08-23 10:55 / 259人阅读

摘要：动手实现深拷贝利递归来实现对对象或数组的深拷贝。递归思路对属性中所有引用类型的值进行遍历，直到是基本类型值为止。深拷贝只对对象自有属性进行拷贝测试数据拷贝方式其实也是一种继承的方式，当然继承还是有其他方法的感谢支持

深浅拷贝 基本类型 & 引用类型

ECMAScript中的数据类型可分为两种：

基本类型：undefined,null,Boolean,String,Number,Symbol
引用类型：Object,Array,Date,Function,RegExp等

不同类型的存储方式：

基本类型：基本类型值在内存中占据固定大小，保存在栈内存中
引用类型：引用类型的值是对象，保存在堆内存中，而栈内存存储的是对象的变量标识符以及对象在堆内存中的存储地址

不同类型的复制方式：

基本类型

基本类型：从一个变量向另外一个新变量复制基本类型的值，会创建这个值的一个副本，并将该副本复制给新变量

let foo = 1;
let bar = foo;
console.log(foo === bar); // -> true

// 修改foo变量的值并不会影响bar变量的值
let foo = 233;
console.log(foo); // -> 233
console.log(bar); // -> 1

引用类型：从一个变量向另一个新变量复制引用类型的值，其实复制的是指针，最终两个变量最终都指向同一个对象

let foo = {
  name: "leeper",
  age: 20
}
let bar = foo;
console.log(foo === bar); // -> true

// 改变foo变量的值会影响bar变量的值
foo.age = 19;
console.log(foo); // -> {name: "leeper", age: 19}
console.log(bar); // -> {name: "leeper", age: 19}

深拷贝 & 浅拷贝

浅拷贝：仅仅是复制了引用，彼此之间的操作会互相影响

深拷贝：在堆中重新分配内存，不同的地址，相同的值，互不影响

浅拷贝

举一个例子（）

  var me = {
      name: "zjj",
      age: 19,
      address: {
          home: "tianjin"
      }
  };
  
  var me_1 = {
      m_token: "new"
  };
  
  
  function extend(p, c){
      var c = c || {};
      
      for(var i in p) {
          c[i] = p[i];
      }
  }
  extend(me,me_1);

深拷贝

  var me = {
      name: "zjj",
      age: 19,
      address: {
          home: "tianjin"
      }
  };
  
  var me_1 = {
      m_token: "new"
  };
  
  
  function extend(p, c){
      var c = c || {};
      
      for(var i in p) {
          c[i] = p[i];
      }
  }


  function extendDeeply(p, c) {
    var c = c || {};
      
      for(var i in p) {
        if(typeof p[i] === "object") {
          // 引用类型需要递归实现深拷贝
          c[i] = (p[i].constructor === Array ) ? [] : {}
          extendDeeply(p[i], c[i]);
        } else {
          // 非引用类型直接复制即可
          c[i] = p[i];
        } 
      }
  }
  extendDeeply(me,me_1);

JSON.parse()和JSON.stringify()

JSON.stringify()：把一个js对象序列化为一个JSON字符串
JSON.parse()：把JSON字符串反序列化为一个js对象

let obj = {
  name: "leeper",
  age: 20,
  friend: {
    name: "lee",
    age: 19
  }
};
let copyObj = JSON.parse(JSON.stringify(obj));
obj.name = "Sandman";
obj.friend.name = "Jerry";
console.log(obj);
// -> {name: "Sandman", age: 20, friend: {age: 19,name: "Jerry"}}
console.log(copyObj);
// -> {name: "leeper", age: 20, friend: {age: 19,name: "lee"}}

综上，JSON.parse()和JSON.stringify()是完全的深拷贝。

动手实现深拷贝利【递归】来实现对对象或数组的深拷贝。递归思路：对属性中所有引用类型的值进行遍历，直到是基本类型值为止。

// 深拷贝
function deepCopy(obj) {
  if (!obj && typeof obj !== "object") {
    throw new Error("error arguments");
  }
  // const targetObj = obj.constructor === Array ? [] : {};
  const targetObj = Array.isArray(obj) ? [] : {};
  for (let key in obj) {
    
    //只对对象自有属性进行拷贝
    if (obj.hasOwnProperty(key)) {
      if (obj[key] && typeof obj[key] === "object") {
        targetObj[key] = deepCopy(obj[key]);
      } else {
        targetObj[key] = obj[key];
      }
    }
  }
  return targetObj;
}

// 测试数据
let a = {
    age: undefined,
    sex: Symbol("male"),
    jobs: function() {
        console.log("kkkk")
    },
    name: "yck"
}
var cloneA = deepCopy(a);
console.log(cloneA.age);
console.log(cloneA.sex);
cloneA.jobs();

拷贝方式其实也是一种继承的方式，当然继承还是有其他方法的！
（感谢支持！！）

超融合服务器专线服务深入理解webrtc之aec 深入理解javascript 深浅拷贝深入理解系列

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

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

深入理解JS深浅拷贝

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

JackJiang 2019-08-23 14:31 评论0 收藏0
JavaScript专题系列20篇正式完结！

摘要：写在前面专题系列是我写的第二个系列，第一个系列是深入系列。专题系列自月日发布第一篇文章，到月日发布最后一篇，感谢各位朋友的收藏点赞，鼓励指正。写在前面 JavaScript 专题系列是我写的第二个系列，第一个系列是 JavaScript 深入系列。 JavaScript 专题系列共计 20 篇，主要研究日常开发中一些功能点的实现，比如防抖、节流、去重、类型判断、拷贝、最值、扁平、柯里...

sixleaves 2019-08-21 17:15 评论0 收藏0
JavaScript深入浅出

摘要：理解的函数基础要搞好深入浅出原型使用原型模型，虽然这经常被当作缺点提及，但是只要善于运用，其实基于原型的继承模型比传统的类继承还要强大。中文指南基本操作指南二继续熟悉的几对方法，包括，，。商业转载请联系作者获得授权，非商业转载请注明出处。怎样使用 this 因为本人属于伪前端，因此文中只看懂了 8 成左右，希望能够给大家带来帮助....（据说是阿里的前端妹子写的） this 的值到底...

blair 2019-08-21 18:26 评论0 收藏0
js深浅复制

摘要：总结综上所述，数组的深拷贝比较简单，方法没有什么争议，对象的深拷贝，比较好的方法是用的方法实现，或者递归实现，比较简单的深复制可以使用实现参考资料知乎中的深拷贝和浅拷贝深入剖析的深复制深浅复制对比因为JavaScript存储对象都是存地址的，所以浅复制会导致 obj 和obj1 指向同一块内存地址。我的理解是，这有点类似数据双向绑定，改变了其中一方的内容，都是在原来的内存基础上做...

Apollo 2019-08-19 18:44 评论0 收藏0
复习Javascript专题（四）：js中的深浅拷贝

摘要：基本数据类型的复制很简单，就是赋值操作，所以深浅拷贝也是针对，这类引用类型数据。它会抛弃对象的。另外，查资料过程中还看到这么一个词结构化克隆算法还有这一篇资料也有参考，也写得比较详细了的深浅拷贝基本数据类型的复制很简单，就是赋值操作，所以深浅拷贝也是针对Object，Array这类引用类型数据。浅拷贝对于字符串来说，是值的复制，而对于对象来说则是对对象地址的复制；而深拷贝的话，它不...

MobService 2019-08-23 13:40 评论0 收藏0