javascript深拷贝的几种情况总结

在前端项目的数据处理中，json数据的拷贝是很常见的，怎么使拷贝的双方数据之间互不影响，这就要用到深拷贝了

深拷贝：引用数据类型中名存在栈内存中，值存在于堆内存中，但是栈内存会提供一个引用的地址指向堆内存中的值，深拷贝就是增加了一个指针并且申请了一个新的内存，使这个增加的指针指向这个新的内存。方法一：使用Object.assign(),一般用于数据类型比较简单，层数不大于1的数据；因为Object.assign无法深层拷贝。

const strJson = {
      id:'12343231',
      name:'张三',
      age:23,
      inof:{
        sex:'男'
      },
      sjid:null,
      strHandle () {
        console.log('111111111');
      }
    }
    obj.name = 'lisi'
    obj.inof.sex = '女'
    console.log('obj',obj);
    console.log('strJson',strJson);

结果：

方法二：使用JSON.parse和JSON.stringify,一般用于数据类型比较复杂的，有深层嵌套的数据；但是undefined ， function， RegExp 等类型无法处理；

const strJson = {
      id:'12343231',
      name:'张三',
      age:23,
      inof:{
        sex:'男'
      },
      sjid:null,
      strHandle () {
        console.log('111111111');
      }
    }
    const obj = JSON.parse(JSON.stringify(strJson))
    obj.name = 'lisi'
    obj.inof.sex = '女'
    console.log('obj',obj);
    console.log('strJson',strJson);

结果：

第三种：使用递归拷贝，在代码中处理特殊的情况。

 function copyHandle (strJson) {
      let result ;
      // 判断是否存在
      if (!strJson) return null;
      // 判断是否是对象
      if (typeof strJson !== 'object') return strJson;
      // 判断是否是数组
      if (Array.isArray(strJson)) {
        result = [];
        for (let i of strJson) {
          result.push(copyHandle(i))
        }
      }//判断是否是RegExp
      else if(strJson.constructor===RegExp) {
        result = strJson
      }//判断是否是对象
      else {
        result = {}
        for (let i in  strJson) {
          result[i] = copyHandle(strJson[i])
        }
      }
      // 返回结果
      return result
    }

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容!

赞 (0)

相关推荐

  • 一文带你了解JavaScript基础之深拷贝和浅拷贝

    一文带你了解JavaScript基础之深拷贝和浅拷贝

    目录 浅拷贝 深拷贝 补充 总结 拷贝(又名克隆,复制等),但是又分深拷贝和钱拷贝. 其实这个问题有时候想通了就很简单,如果想不通可能会有点绕,不过其难度比闭包等好理解的多. 为什么又这个概念的存在呢?先举一个例子. var person={ name:"张三", age:22 } var person1=person; console.log(person); console.log(person1); 似乎可以被拷贝下来了,但是如果你操作person1的属性值,这个时候person

  • 详解JS深拷贝与浅拷贝

    一.预备知识 1.1.JS数据类型 基本数据类型:Boolean.String.Number.null.undefined 引用数据类型:Object.Array.Function.RegExp.Date等 1.2.数据类型的复制 基本数据类型的复制,是按值传递的 var a = 1; var b = a; b = 2; console.log(a); // 1 console.lob(b); // 2 引用数据类型的复制,是按引用传值 var obj1 = { a: 1; b: 2; }; v

  • js中的赋值 浅拷贝和深拷贝详细

    目录 1.js内存 2.赋值 3.浅拷贝 4.深拷贝 前言: 在学习下面文章前我们简单了解一下的内存的知识,以下先简要提一下 1.js内存 js内存,或者说大部分语言的内存都分为栈和堆.基本数据类型的变量值分配在栈上,引用数据类型的变量值分配在堆上,栈中只是存储具体堆中对象的地址. 2.赋值 对于基本数据类型,赋值操作是拷贝,即新旧变量不会相互影响. var a = 1; var b = a; b = 2; console.log(b); // 2 对于引用数据类型,赋值操作只是在栈中新增一个指

  • 浅谈JavaScript浅拷贝和深拷贝

    浅谈JavaScript浅拷贝和深拷贝

    目录 一.直接赋值 二.浅拷贝 三.深拷贝 1. JSON对象的方式 2. 递归复制 网上关于这个话题,讨论有很多了,根据各路情况我自己整理了一下,最后还是能接近完美的实现深拷贝,欢迎大家讨论. javascript中的对象是引用类型,在复制对象的时候就要考虑是用浅拷贝还是用深拷贝. 一.直接赋值 对象是引用类型,如果直接赋值给另外一个对象,那么只是赋值一个引用,实际上两个变量指向的同一个数据对象,如果其中一个对象的属性变更,那么另外一个也会变更. 示例1,简单示例: let human1 =

  • JS实现数组深拷贝的方法分析

    本文实例讲述了JS实现数组深拷贝的方法.分享给大家供大家参考,具体如下: 最近在网上看到一篇关于js数组复制最有效的方法是直接使用slice和concat方法.这2个方法的确是最快的把数组成功复制,而不是引用.可以运行实例: <script type="text/javascript"> <!-- var arr1=["1","2","3"],arr2; arr2=arr1.slice(0); arr1[0]

  • javascript深拷贝的几种情况总结

    javascript深拷贝的几种情况总结

    在前端项目的数据处理中,json数据的拷贝是很常见的,怎么使拷贝的双方数据之间互不影响,这就要用到深拷贝了 深拷贝:引用数据类型中名存在栈内存中,值存在于堆内存中,但是栈内存会提供一个引用的地址指向堆内存中的值,深拷贝就是增加了一个指针并且申请了一个新的内存,使这个增加的指针指向这个新的内存.方法一:使用Object.assign(),一般用于数据类型比较简单,层数不大于1的数据:因为Object.assign无法深层拷贝. const strJson = { id:'12343231', na

  • JavaScript深拷贝的几种实现方法实例

    目录 浅拷贝与深拷贝 1.JSON.parse(JSON.stringify(obj)) 2.普通递归函数实现深拷贝 3.兼容多种数据类型 4.jQuery.extend()方法 总结 浅拷贝与深拷贝 浅拷贝是创建一个新对象,这个对象有着原始对象属性值的拷贝.如果属性是基本类型,拷贝的就是基本类型的值,如果属性是引用类型,拷贝的是内存地址 .如果不进行深拷贝,其中一个对象改变了对象的值,就会影响到另一个对象的值. 深拷贝是将一个对象从内存中完整的拷贝一份出来,从堆内存中开辟一个新的区域存放新对象

  • 对存在JavaScript隐式类型转换的四种情况的总结(必看篇)

    一般存在四种情况,JavaScript会对变量的数据类型进行转换. 目录 * if中的条件会被自动转为Boolean类型 * 会被转为false的数据 * 会被转为true的数据 * 参与+运算都会被隐式的转为字符串 * 会被转为空字符串的数据 * 会被转为字符串的数据 * 会被转为数据类型标记的数据 * 参与*运算都会被隐式的转为数字 * 会被转为0的数据 * 会被转为1的数据 * 会被转为NaN的数据 * == 运算符 * 为true的时候 * 为false的时候 if中的条件会被自动转为B

  • 详解JavaScript中关于this指向的4种情况

    对很多前端开发者来说,JavaScript语言的this指向是一个令人头疼的问题.先看下面这道测试题,如果你能实现并解释原因,那本文对你来说价值不大,可以直接略过. **开篇测试题:**尝试实现注释部分的Javascript代码,可在其他任何地方添加更多代码(如不能实现,说明一下不能实现的原因): let Obj = function (msg) { this.msg = msg this.shout = function () { alert(this.msg) } this.waitAndS

  • javascript深拷贝(deepClone)详解

    javascript深拷贝是初学者甚至有经验的开发着,都会经常遇到问题,并不能很好的理解javascript的深拷贝. 深拷贝(deepClone)? 与深拷贝相对的就是浅拷贝,很多初学者在接触这个感念的时候,是很懵逼的. 为啥要用深拷贝? 在很多情况下,我们都需要给变量赋值,给内存地址赋予一个值,但是在赋值引用值类型的时候,只是共享一个内存区域,导致赋值的时候,还跟之前的值保持一直性. 看一个具体的例子 // 给test赋值了一个对象 var test = { a: 'a', b: 'b' }

  • JavaScript深拷贝的一些踩坑记录

    JavaScript深拷贝的一些踩坑记录

    前言 之前去一家公司面试的时候,面试官问了我一个问题,说:"如何才能深拷贝一个对象".当时我心里有些窃喜,这么简单的问题还用想吗?于是脱口而出:"平时常用的有两种办法,第一种用JSON.parse(JSON.stringify(obj)),第二种可以使用for...in加递归完成".面试官听了以后点了点头觉得挺满意的. 当时我也并没有太过在乎这个问题,直到前段时间又想起这个问题,发现上面说的两种方法都是有Bug的. 提出问题 那么上面所说的Bug是什么呢? 特殊对象

  • javaScript深拷贝和浅拷贝的简单介绍

    javaScript深拷贝和浅拷贝的简单介绍

    目录 基本数据类型 在数据结构当中 引用数据类型 浅拷贝-深拷贝 浅拷贝 浅拷贝小结 深拷贝 结尾 源码地址 在了解深拷贝和浅拷贝之前,我们先梳理一下: JavaScript中,分为基本数据类型(原始值)和复杂类型(对象),同时它们各自的数据类型细分下又有好几种数据类型 基本数据类型 数字Number 字符串String 布尔Boolean Null Undefined Symbols BigInt 基本数据类型在内存当中,是存储在栈Stack 在数据结构当中 栈在内存上的分配的空间生命周期很短

  • 如何写出一个惊艳面试官的JavaScript深拷贝

    如何写出一个惊艳面试官的JavaScript深拷贝

    目录 导读 深拷贝和浅拷贝的定义 乞丐版 基础版本 考虑数组 循环引用 性能优化 其他数据类型 合理的判断引用类型 获取数据类型 可继续遍历的类型 不可继续遍历的类型 克隆函数 最后 参考 小结 导读 最近经常看到很多JavaScript手写代码的文章总结,里面提供了很多JavaScript Api的手写实现. 里面的题目实现大多类似,而且说实话很多代码在我看来是非常简陋的,如果我作为面试官,看到这样的代码,在我心里是不会合格的,本篇文章我拿最简单的深拷贝来讲一讲. 看本文之前先问自己三个问题:

  • JavaScript函数的4种调用方法详解

    在JavaScript中,函数是一等公民,函数在JavaScript中是一个数据类型,而非像C#或其他描述性语言那样仅仅作为一个模块来使用.函数有四种调用模式,分别是:函数调用形式.方法调用形式.构造器形式.以及apply形式.这里所有的调用模式中,最主要的区别在于关键字 this 的意义,下面分别介绍这个几种调用形式. 本文主要内容: 1.分析函数的四种调用形式2.弄清楚函数中this的意义3.明确构造函对象的过程4.学会使用上下文调用函数 一.函数调用形式 函数调用形式是最常见的形式,也是最

  • 动态加载JavaScript文件的两种方法

    这篇文章主要为大家详细介绍了动态加载JavaScript文件的两种方法,感兴趣的小伙伴们可以参考一下 第一种便是利用ajax方式,把script文件代码从背景加载到前台,而后对加载到的内容经过eval()实施代码.第二种是,动静创建一个script标签,配置其src属性,经过把script标签插入到页面head来加载js,相当于正在head中写了一个<script src="..."></script>,只可是这个script标签是用js动静创建的 比喻说是我们

随机推荐