JavaScript对象复制理解

fjcgreat 发布于2019-08-23 14:54 / 1328人阅读

摘要：最近在研究对象的深拷贝，下面是我试验的两种方法，一种是通过和的方法实现的深拷贝，一种是通过递归函数实现的深拷贝。

最近在研究js对象的深拷贝，下面是我试验的两种方法，一种是通过JSON.stringify和JSON.parse的方法实现的深拷贝，一种是通过递归函数实现的深拷贝。

此处有个问题，第二种方法实现了对象方法的拷贝，但是不是深拷贝，网上找了很久都没有找到实现对象的方法深拷贝的方法，希望有大神能给点建议。

let obj = {
  a: 1,
  b: "2",
  c: {
    c1: 1
  },
  d: function () {
    console.log("d");
  },
  e: [1, 2, 3]
};
//使用JSON.parse和JSON.stringify的方法是深拷贝，除了function，其他的都能拷贝
let obj_copy1 = JSON.parse(JSON.stringify(obj));
console.log(obj_copy1);
console.log(obj.c === obj_copy1.c); //结果是false，对象是深拷贝

// 使用递归的方法复制，function可以复制，除了function是浅拷贝，其他的都是深拷贝
function clone(obj) {
  let new_obj = {};
  for(let key in obj) {
    let t = ( typeof obj[key] ).toLowerCase();
    if (t === "object") {
      if(obj[key] instanceof Array) {
        var new_arr = [];
        for(let item of obj[key]) {
          new_arr.push(item);
        }
        new_obj[key] = new_arr;
      } else {
        new_obj[key] = clone(obj[key]);
      }
    } else {
      new_obj[key] = obj[key];
    }
  }
  return new_obj;
}

let obj_copy2 = clone(obj);
console.log(obj_copy2);
console.log(obj.c === obj_copy2.c); //结果是false，对象是深拷贝
console.log(obj.d === obj_copy2.d); //结果是true，function不是深拷贝

云服务器 GPU云服务器理解对象 javascript理解如何理解javascript 深入理解javascript

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

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

谈谈javascript语法里一些难点问题（一）

摘要：引子前不久我建立的技术群里一位问了一个这样的问题，她贴出的代码如下所示执行结果如下所示第一个第二个这是一个令人诧异的结果，为什么第一个弹出框显示的是，而不是呢这种疑惑的原理我描述如下一个页面里直接定义在标签下的变量是全局变量即属于对象的变量 1) 引子前不久我建立的技术群里一位MM问了一个这样的问题，她贴出的代码如下所示： var a = 1; function hehe...

huaixiaoz 2019-08-21 10:27 评论0 收藏0
体验javascript之美-第五课匿名函数自执行和闭包是一回事儿吗？

摘要：大家想想怎么做什么是匿名函数自执行并如何在实际库中应用匿名函数自执行，注意，注意，只有这个名字和没有其它名字，比如封闭空间，这个是为了让大家好理解自己造的词语。通过本节课你将学到： 1.什么是函数表达式和函数声明 2.first-class function 3.引用和复制的区别 4.函数传参是怎么回事儿 5.关于函数的this和arguments 6.什么是匿名函数自执行并如何在...

_Suqin 2019-08-20 15:56 评论0 收藏0
前端基础进阶（一）：内存空间详细图解

摘要：一栈数据结构与不同，中并没有严格意义上区分栈内存与堆内存。引用数据类型的值是保存在堆内存中的对象。不允许直接访问堆内存中的位置，因此我们不能直接操作对象的堆内存空间。为了更好的搞懂变量对象与堆内存，我们可以结合以下例子与图解进行理解。 showImg(https://segmentfault.com/img/remote/1460000009784102?w=1240&h=683); ...

_Suqin 2019-08-21 18:30 评论0 收藏0
JavaScript参数按值传递的理解

摘要：栈内存与堆内存简单类型的值，它们的值直接存储在变量访问的位置，这是因为这些简单类型占据的空间是固定的，所以可将他们存储在较小的内存区域栈中。看到一个这样的问题 function setName(obj) { obj.name = Tom; obj = new Object(); obj.name = Greg ; } var person = new Object();...

galois 2019-08-20 19:06 评论0 收藏0
JavaScript参数按值传递的理解

摘要：栈内存与堆内存简单类型的值，它们的值直接存储在变量访问的位置，这是因为这些简单类型占据的空间是固定的，所以可将他们存储在较小的内存区域栈中。看到一个这样的问题 function setName(obj) { obj.name = Tom; obj = new Object(); obj.name = Greg ; } var person = new Object();...

NeverSayNever 2019-08-20 19:05 评论0 收藏0