JavaScript中的深拷贝

最新推荐文章于 2022-08-12 16:15:57 发布
最新推荐文章于 2022-08-12 16:15:57 发布
阅读量306 收藏 1
点赞数 1
分类专栏： javascript 文章标签： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012987546/article/details/101694603
版权

1.什么是深拷贝

浅拷贝只是解决了第一层的拷贝问题，拷贝第一层的***基本类型值***，以及第一层的***引用类型地址***，并没有递归拷贝第二层以后的属性。

深拷贝会拷贝所有的属性，拷贝的属性指向动态分配的内存。当对象和它所引用的对象一起拷贝时即发生深拷贝。深拷贝相比于浅拷贝速度较慢并且花销较大。拷贝前后两个对象互不影响。深拷贝可以解决多层拷贝的问题。

2.深拷贝的使用

1.JSON.parse(JSON.stringify(object))

案例1：根据原始A对象浅拷贝一个新的B对象出来

// 1.JSON.parse(JSON.stringify(object)) 深拷贝
  let A = {
    name:'liujun',
    age:25,
    job:{
      name:'web',
      year:4
    },
    lan:[
      'java',
      'js'
    ]
  }
  console.log(A) // { name: 'liujun', age: 25, job: { name: 'web', year: 4 }, lan: [ 'java', 'js' ] } }
  // 1.1 根据原始A对象深拷贝一个新的B对象出来
  let B = JSON.parse(JSON.stringify(A))
  console.log(B) // { name: 'liujun', age: 25, job: { name: 'web', year: 4 }, lan: [ 'java', 'js' ] }

  // 1.2 修改A对象3个属性。发现B对象并没有影响。拷贝前后两个对象互不影响。
  A.name = '刘军'
  A.job.name = '前端开发'
  A.lan[1] = 'JavaScript'
  console.log('--------------------------------')
  console.log(A) // { name: '刘军', age: 25, job: { name: '前端开发', year: 4 }, lan: [ 'java', 'JavaScript' ] }
  console.log(B) // { name: 'liujun', age: 25, job: { name: 'web', year: 4 }, lan: [ 'java', 'js' ] }

总结：JSON.parse(JSON.stringify(object)) 深拷贝会拷贝所有的属性，拷贝的属性指向动态分配的内存。拷贝前后两个对象互不影响。

案例2：根据原始 A浅拷贝一个新的B对象出来

  // 1.JSON.parse(JSON.stringify(object)) 深拷贝
  let A = {
    name:'liujun', // 1.拷贝成功
    value: undefined, // 3.没有拷贝
    default: null, // 1.拷贝成功
    symbol:Symbol('liujun'), // 3.没有拷贝
    show:function(){  // 3.没有拷贝
      console.log('show')
    },
    date:new Date(), // 2.拷贝失败，变成了字符串
    reg:new RegExp(/1[3|4|5|6|7|8]\d{9}/)  // 2.拷贝失败，变成了{}
  }
  
  console.log(A) 
  /**
    { 
      name: 'liujun',
      value: undefined,
      default: null,
      symbol: Symbol(liujun),
      show: [Function: show],
      date: 2019-09-29T01:32:32.911Z,
      reg: /1[3|4|5|6|7|8]\d{9}/ 
   }
   */
  // 1.1 根据原始A对象深拷贝一个新的B对象出来
  let B = JSON.parse(JSON.stringify(A))
  console.log(B) 
  /**
  { 
    name: 'liujun',
    default: null,
    date: '2019-09-29T01:32:32.911Z',
    reg: {} 
  }
   */

  console.log(typeof A.date) // object：还是Date的对象
  console.log(typeof B.date) // string：不是Date的对象，不能调用Date对象的方法

总结：JSON.parse(JSON.stringify(object)) 深拷贝会拷贝部分的属性，拷贝的属性指向动态分配的内存。拷贝前后两个对象互不影响。

存在的问题：

  1. Date 和 RegExp类型虽然拷贝了，但是拷贝还是失败，类型发生了改变。Date 类型变成了字符串，RegExp变成了{}, 在使用它拷贝的时候一定要注意

  2. undefined、null、Symbol、function压根就没有拷贝， 在使用它拷贝的时候一定要注意。

  3. 对象的循环引用时的拷贝会报错, 例如下面 c 指向了 b 的引用，属于循环引用：

    let obj = {
    a: 1,
    b: {
        c: 2,
   		d: 3
    }
}
obj.a = obj.b;
obj.b.c = obj.a;

let b = JSON.parse(JSON.stringify(obj));
// Uncaught TypeError: Converting circular structure to JSON

2.编写深拷贝函数

1.编写浅拷贝

function deepCopy(object){
    var target = {}
    for(var key in object){
      // 1.判断是否是自身的属性。object借用hasOwnProperty(key)函数，传递key参数
      if(Object.prototype.hasOwnProperty.call(object, key)){
          target[key] = object[key]
      }
    }
    return target
}

2.编写深拷贝函数

function deepCopy(object){
    var target = {}
    for(var key in object){
      // 1.判断是否是自身的属性。object借用hasOwnProperty(key)函数，传递key参数
      if(Object.prototype.hasOwnProperty.call(object, key)){
        // 2.如果object[key]是对象或者是数组需要递归遍历
        if(typeof object[key] === 'object'){
          target[key] = deepCopy(object[key]) // 3.深拷贝比浅拷贝就是多了这里
        } else {
          target[key] = object[key]
        }
       
      }
    }
    return target
}

3.优化深拷贝函数

function deepCopy(object){
  // typeof null // "object"
  // typeof {} // "object"
  // typeof [] // "object"
  // typeof new Date() // "object"
  // typeof new RegExp() // "object"
  // typeof function foo(){} // "function"
  if(typeof object === 'object' && object !=null){
      
    var target = Array.isArray(object) ? [] : {}
    for(var key in object){
      // 1.判断是否是自身的属性。object借用hasOwnProperty(key)函数，传递key参数
      if(Object.prototype.hasOwnProperty.call(object, key)){
        // 2.如果object[key]是对象或者是数组需要递归遍历，例如：{}, [], new Date(), new RegExp() 
        if(typeof object[key] === 'object'){
          target[key] = deepCopy(object[key]) // 3.深拷贝比浅拷贝就是多了这里
        } else {
          target[key] = object[key]
        }
       
      }
    }
    return target
      
  }else {
    // 传入 `undefined、null、Symbol、function` ` 时应返回 `undefined、null、Symbol、function` `  
    return object
  }

}

1.对传入参数进行校验，传入 null 时应该返回 null 而不是 {}, 例如：

if(typeof object === 'object' && object !=null)

2.考虑数组的兼容，例如：

var target = Array.isArray(object) ? [] : {}

3.测试深拷贝函数

  // 1.deepCopy(object) 深拷贝
  let A = {
    name:'liujun', // 1.拷贝成功
    value: undefined, // 1.拷贝成功
    default: null, // 1.拷贝成功
    symbol:Symbol('liujun'), // 1.拷贝成功
    show:function(){  // 1.拷贝成功
      console.log('show')
    },
    date:new Date(), // 2.拷贝失败，变成了{}
    reg:new RegExp(/1[3|4|5|6|7|8]\d{9}/)  // 2.拷贝失败，变成了{}
  }
  console.log(A) 
  /**
    { 
      name: 'liujun',
      value: undefined,
      default: null,
      symbol: Symbol(liujun),
      show: [Function: show],
      date: 2019-09-29T01:32:32.911Z,
      reg: /1[3|4|5|6|7|8]\d{9}/ 
   }
   */
  // 1.1 根据原始A对象深拷贝一个新的B对象出来
  let B = deepCopy(A)
  console.log(B) 
  /**
  { 
    name: 'liujun',
    value: undefined,
    default: null,
    symbol: Symbol(liujun),
    show: [Function: show],
    date: {},
    reg: {} 
  }
   */

  console.log(typeof A.date) // object：还是Date的对象
  console.log(typeof B.date) // object：不是Date的对象，不能调用Date对象的方法

存在的问题：

  1. Date 和 RegExp` 类型虽然拷贝了，但是拷贝还是失败，类型发生了改变。Date 类型变成了{}，RegExp变成了{}。为什么会是 {} ？是递归函数返回的 { }
  2. undefined、null、Symbol、function 属于直接拷贝， 直接走了 deepCopy 的 else 代码块返回原始数据。
  3. 对象的循环引用时的拷贝会报错

3.完整深度拷贝函数

// 1.获取到数据源的数据类型
function _getDataType(data) {   
  return Object.prototype.toString.call(data).slice(8, -1)
}
// 2.负责拷贝 RegExp 对象
function copyRegExp(regExp) {
  let attrs = ''
  if (regExp.global) attrs += 'g'
  if (regExp.ignoreCase) attrs += 'i'
  if (regExp.multiline) attrs += 'm'
  const newRegExp = new RegExp(regExp, attrs)
  newRegExp.lastIndex = regExp.lastIndex
  return newRegExp
}

// 3.深克隆,考虑到(1.类型检查,2.递归爆栈,3.相同引用,4.Date和Function等特殊类型克隆,原型克隆)
function deepClone(x) {
  // 3.1 String Number Boolean Undefined Null 返回自身
  if (x == null || typeof x !== 'object') return x
  // 3.2 RegExp Date Function 克隆
  const type = _getDataType(x)
  let root
  switch (type) {
    case 'RegExp':
      // 3.3克隆正则    
      return copyRegExp(x)
    case 'Date':
      // 3.4 克隆Date类型    
      return new Date(x.getTime())
    case 'Function':
      // 3.5 克隆函数类型    
      return x
    case 'Array':
      root = []
      break
    default:
      root = Object.create(Object.getPrototypeOf(x))
  }
  // 3.6 Array Object 类型的克隆
  // 用来去重 解决原数据中多个属性引用同一对象克隆后不相同问题( 防止循环引用问题 )
  const uniqueList = []
  // 使用栈结构解决递归爆栈问题
  const stack = [
    {
      parent: root,
      key: undefined,
      data: x
    }
  ]
  // 深度优先循环(防止递归爆栈)
  while (stack.length) {
    const { parent, key, data } = stack.pop()
    // 初始化赋值目标，key为undefined则拷贝到父元素，否则拷贝到子元素
    let res = parent
    if (typeof key !== 'undefined') {
      const type = _getDataType(data)
      switch (type) {
        case 'RegExp':
          parent[key] = copyRegExp(data)
          continue
        case 'Date':
          parent[key] = new Date(data.getTime())
          continue
        case 'Function':
          parent[key] = data
          continue
        case 'Array':
          res = parent[key] = []
          break
        default:
          const proto = Object.getPrototypeOf(data)
          res = parent[key] = Object.create(proto)
      }
    }
    // 数据引用已经存在则赋值并退出本次循环,不存在则缓存
    const uniqueData = uniqueList.find(item => item.source === data)
    if (uniqueData) {
      parent[key] = uniqueData.target
      continue
    } else {
      uniqueList.push({
        source: data,
        target: res
      })
    }
    for (const k in data) {
      if (data.hasOwnProperty(k)) {
        if (data[k] == null || typeof data[k] !== 'object') {
          // 基础类型克隆
          const descriptor = Object.getOwnPropertyDescriptor(data, k)
          Object.defineProperty(res, k, descriptor)
        } else {
          // 引用类型加入stack循环处理
          stack.push({
            parent: res,
            key: k,
            data: data[k]
          })
        }
      }
    }
  }
  return root
}

4.其它深拷贝函数

1.jQuery.extend()

案例1：根据原始 A浅拷贝一个新的B对象出来

var A = [1,2,3,4];
var B = $.extend(true,[],A);

2. lodash.cloneDeep()

案例1：根据原始 A浅拷贝一个新的B对象出来

var A = [{ 'a': 1 }, { 'b': 2 }];
var B = lodash.cloneDeep(A); //  _.cloneDeep()
LiuJun2Son
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
JavaScript中的浅拷贝和深拷贝
老曹的博客
11-26 199
一、前言 我第一次接触浅拷贝和深拷贝的概念是在学C和C++的时候,虽然现在已经差不多忘得干干净净了,但我记得一点的是它们和内存是有关系的。之后再看到这个概念在面试中提到，我天真的以为，浅拷贝就是这样子的： var a = { name: '老曹' }； var b = a; 后来大致搞懂后，才知道我是多么的无知… 在讲解之前我相信大家对堆和栈的概念已经有所了解了，至少应该知道： 栈中存储基本类...
JavaScript 中的浅拷贝和深拷贝
Eiwen的博客
04-08 322
一.前言 每一个前端的 JavaScript 之路不一定是由《JavaScript 高级程序设计》开启的，但是每一位前端都一定被“按值传递”和“按引用传递”这两个概念坑过。现在你我应该都很清楚，在 JavaScript 中的object类型是按引用传递的，但是在函数参数中，所有参数都是按值传递的。 我们今天要谈的东西，就起源于object型数据的复制与再操作，简单来说，就是我们今天的主题：对象的浅...
JS 代理的基本使用
LttleJoker的博客
10-25 237
对象代理是什么？简单理解就是我们不直接对对象进行操作，而是把对象挂载到Proxy(代理)上，如果我们要对对象进行一系列的修改或者读取，我们之间使用代理即可，不必直接操作于对象。我们去买房，房产中介就相当于我们的代理，我们不需要直接向卖家沟通。 const name = {title: "Joker"}; const proxy = new Proxy(name, { get(obj, property) { return obj[property]
javascript 之实现深拷贝的四种方式
六国破灭，非兵不利 ，战不善，弊在赂秦。赂秦而力亏，破灭之道也。或曰：六国互丧，率赂秦耶？曰：不赂者以赂者丧，盖失强援，不能独完。故曰：弊在赂秦也。 秦以攻取之外，小则获邑，大则得城。较秦之所得，与战胜而得者，其实百倍；诸侯之所亡，与战败而亡者，其实亦百
08-12 507
进行深拷贝的方法递归函数 （推荐使用，项目中使用的更多，更小，更安全）JSON.stringify() 和JSON.parse();(不推荐使用,如果遇到Function,Date等类型的变量容易出现一些意料之外的问题)第三方库lodash的cloneDeep()方法 （就情况而定，如果项目中原先就有lodash这个第三方库，可以使用，否则还是推荐使用递归函数。不然成本太高。）JQuery的extend()函数 (推荐在JQuery项目中使用，其他项目依然推荐是用递归函数)...
JavaScript——深拷贝
z_2532040197的博客
07-07 303
1.在JavaScript中基本数据类型保存在栈中，而复杂数据类型（引用数据类型）存放在堆中。2.拷贝:其实就是复制，在JavaScript中拷贝又分为浅拷贝和深拷贝。无论是浅拷贝还是深拷贝都只适合于对象或者数组这类复杂数据类型（引用数据类型）。3.浅拷贝和深拷贝的区别： 浅拷贝：只是拷贝数据的内存地址，让新的数组或者对象能够引用原数据。彼此之间的操作会互相影响。 深拷贝：是在内存中开辟一个新的存储空间，完完全全的拷贝一整个一模一样的对象（数组），将原对象的所有内容全部复制过来。
JavaScript深拷贝的一些坑
weixin_34390105的博客
06-15 374
前言 之前去一家公司面试的时候，面试官问了我一个问题，说:"如何才能深拷贝一个对象"。当时我心里有些窃喜，这么简单的问题还用想吗？于是脱口而出:"平时常用的有两种办法，第一种用JSON.parse(JSON.stringify(obj))，第二种可以使用for...in加递归完成"。面试官听了以后点了点头觉得挺满意的。 当时我也并没有太过在乎这个问题，直到前段时间又想起这个问题，发现上面说的两种...
JavaScript深拷贝—我遇到的应用场景
weixin_30483697的博客
09-09 338
简述 深拷贝即拷贝实例，其作用是为了不影响拷贝后的数组对起原数组造成影响。这时我们就需要进行深拷贝。（JavaScript的继承） 我遇到的应用场景 我是在用vue的element-ui做项目的时候遇到的，这是一个播放和暂停的按钮切换功能 代码： 图标就是代码中的a标签，下面是实现的js代码部分 //变换播放/暂停按钮 if (this.playClass[tagID] = '...
javascript 深拷贝
10-29
JavaScript中的深拷贝是一种创建一个全新对象的过程，这个新对象完全独立于源对象，拥有与源对象相同的属性和值，包括嵌套的对象和数组。在JavaScript中，浅拷贝（shallow copy）只是简单地复制对象引用，而深拷贝会...
JavaScript 中对象的深拷贝
10-20
在JavaScript中，对对象进行拷贝的场景比较常见。但是简单的复制语句只能对对象进行浅拷贝，即复制的是一份引用，而不是它所引用的对象。而更多的时候，我们希望对对象进行深拷贝，避免原始对象被无意修改
javascript深拷贝的原理与实现方法分析
10-20
JavaScript中的深拷贝是创建一个全新的对象，这个新对象与其原始对象具有相同的属性和值，但它们在内存中是独立的，互不影响。这与浅拷贝不同，浅拷贝只复制对象的引用，而不是创建完全独立的副本。在JavaScript中，...
Javascript 浅拷贝、深拷贝的实现代码
10-30
总结来说，浅拷贝和深拷贝是JavaScript中处理对象复制的关键概念，它们在处理复杂数据结构时尤为重要，特别是在需要保持原始数据不变性的场景下。了解和掌握这两种拷贝方式，能够帮助开发者更好地理解和控制对象之间...
详解JavaScript对象深拷贝
大菜鸟的博客
04-04 2402
详解JavaScript对象深拷贝 在几乎所有编程语言中，对象都以引用形式保存给变量、复制给其他变量。JavaScript语言也是如此。因此简单的进行赋值操作进行复制仅仅是对对象数据的引用地址进行一个传递，并不会将对象内部的所有属性进行一个完整的复制。也就是说，当修改其中一个对象，另一个变量也会发生改变，因为他们本质上指向了同一个对象引用。 let obj={ a:1 }; let cop...
Javascript深拷贝
weixin_34288121的博客
08-01 621
javascript深拷贝是初学者甚至有经验的开发者，都会经常遇到问题，并不能很好的理解javascript的深拷贝。 深拷贝(deepClone)? 与深拷贝相对的就是浅拷贝，很多初学者在接触这个感念的时候，是很懵逼的。 为啥要用深拷贝? 在很多情况下，我们都需要给变量赋值，给内存地址赋予一个值，但是在赋值引用值类型的时候，只是共享一个内存区域，...
4种JavaScript深拷贝的方法
热门推荐
qq_45272642的博客
05-18 1万+
浅拷贝与深拷贝 浅拷贝是创建一个新对象，这个对象有着原始对象属性值的拷贝。如果属性是基本类型，拷贝的就是基本类型的值，如果属性是引用类型，拷贝的是内存地址 。 如果不进行深拷贝，其中一个对象改变了对象的值，就会影响到另一个对象的值。 深拷贝是将一个对象从内存中完整的拷贝一份出来,从堆内存中开辟一个新的区域存放新对象,且修改新对象不会影响原对象。 1、JSON.parse(JSON.stringify(obj)) 一般情况下对普通对象需要进行深拷贝，可以使用这种方法进行深拷贝操作，这种是最简单且代码量
前端JS:什么是深拷贝？什么是浅拷贝？
weixin_34270606的博客
04-24 1695
追根溯源 javascript 数据类型： 值类型（基本数据类型）：String,Number,Boolean,Null,Undefined,Symbol 引用数据类型数据 Object,Array,Function,Date... 重点声明：Undefined 和 Null的区别； Undefined 表示变量不含有值； null：可以通过将变量的值设置为null来清空变量；...
彻底理解JavaScript中的深拷贝和浅拷贝
热爱思考、活力满满、开朗爱笑的年轻人
05-15 1448
基本类型和引用类型 深拷贝与浅拷贝 在说深拷贝与浅拷贝前，我们先看两个简单的实例： //案例1 var num1 = 1, num2 = num1; console.log(num1) //1 console.log(num2) //1 num2 = 2; //修改num2 console.log(num1) //1 console.log(num2) //2 //案例...
JavaScript中深拷贝与浅拷贝
yangyang的专栏
04-07 211
let a = { age: 1 } let b = a a.age = 2 console.log(b.age) // 2 let a = { age: 1 } let b = Object.assign({}, a) a.age = 2 console.log(b.age) // 1 let a = { age: 1 } let b = {...a} a.age = 2 console.l...
ES6-字符串模板
liujun2son
12-28 5786
1.普通字符串的拼接 普通字符串在与变量拼接时一般使用+号，这种适用于简单的拼接。 如果是复杂的拼接使用JSX中的字符串模板比较方便。 //1.普通字符串的拼接 var str='I bought an iphone '; var number=7; console.log(str+number+'s'); // I bou...
常用的正则表达式
liujun2son
09-26 1466
1.正则表达式 正则表达式，又称规则表达式**。（英语：Regular Expression，在代码中常简写为regex、regexp或RE），计算机科学的一个概念。正则表达式通常被用来检索、替换、验证表单、提取**那些符合某个模式(规则)的文本。 许多程序设计语言都支持利用正则表达式进行字符串操作。例如，在Perl中就内建了一个功能强大的正则表达式引擎。 正则表达式这个概念最初是由Unix中的工...
javascript 深拷贝浅拷贝
最新发布
05-28
在 JavaScript 中，深拷贝和浅拷贝是两种不同的对象复制方式。 浅拷贝是指将原对象的引用复制到新对象中，新对象只是原始对象的一个浅表副本。也就是说，对新对象所做的更改也会反映到原始对象中。JavaScript 中最...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值