JS的深拷贝和浅拷贝

已于 2022-04-19 19:32:36 修改
阅读量3k 收藏 35
点赞数 9
分类专栏： JavaScript基础知识 文章标签： javascript
于 2022-04-16 23:15:49 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/baidu_33438652/article/details/124219924
版权

JS的浅拷贝和深拷贝是绕不过去的一环节,今天就做个整理.

一.JS的数据类型

要介绍深浅拷贝,首先先了解一下数据类型.

数据类型分为两种:

  • 基本数据类型
  • 引用数据类型

1.1 基本数据类型

基本类型常见6种

  • String
  • Boolean
  • Number
  • Undefined
  • null
  • symbol (es6新增)

1.2 引用数据类型

引用数据类型主要3种

  • Object
  • Array
  • Function

还有其他引用类型,包括Date、RegExp、Map、Set等

1.3 两者区别

两种类型区别在于:存储位置的不同

  1. 内存地址分配:
  • 基本数据类型:将值存储在栈中 ,栈中存放的是对应的值
  • 引用数据类型:将对应的值存储在堆中,栈中存放的是指向堆内存的地址
  1. 赋值变量：
  • 基本数据类型: 是生成相同的值，两个对象对应不同的地址
  • 引用数据类型: 是将保存对象的内存地址赋值给另一个变量。也就是两个变量指向堆内存中同一个对象

1.3.1 基本类型赋值方式

let a = 10;
let b = a; // 赋值操作
b = 20;
console.log(a); // 10值

a是基本类型,存储在栈中;把a赋值给b,虽然两个变量的值相等，但是两个变量保存了两个不同的内存地址

在这里插入图片描述

1.3.2 引用类型赋值方式

var obj1 = {}
var obj2 = obj1;
obj2.name = "Xxx";
console.log(obj1.name); // xxx

obj1是引用类型,将数据存放在堆内存中,而栈中存放的是内存地址.在obj1赋值给obj2，实际是将obj1的引用地址复制了一份给了obj2，实际上他们共同指向了同一个堆内存对象，所以更改obj2会对obj1产生影响

在这里插入图片描述

二. 浅拷贝

说完数据类型,开始介绍浅拷贝.

2.1 定义

浅拷贝是指创建新的数据，这个数据有着原始数据属性值的一份精确拷贝.

更明确来说:

  • 基本数据类型拷贝的是基本类型的值
  • 引用数据类型拷贝的是内存地址

更简单来说:

  • 浅拷贝就是拷贝一层,引用类型的深层次还是共享内存地址(详细可见第一部分的例子)

2.2 js 常见的浅拷贝方法

浅拷贝方法还是很多,这里就列举几个面试爱问的浅拷贝方法吧

  • Object.assign()
  • 扩展运算符
  • Array.concat()
  • Array.slice()

2.2.1 Object.assign()

let oldObj = {
    inObj: {a: 1, b: 2}
  }
  let newObj = Object.assign({}, oldObj)
  newObj.inObj_2 = {a: 1, b: 2}
  
  newObj.inObj.a = 2
  
  console.log(oldObj) // { inObj: { a: 2, b: 2 } }
  console.log(newObj) // { inObj: { a: 2, b: 2 }, inObj_2: { a: 1, b: 2 } }

2.2.2 扩展运算符

let oldObj = {
    inObj: {a: 1, b: 2}
  }
  let newObj = {...oldObj}
  newObj.inObj_2 = {a: 1, b: 2}
  newObj.inObj.a = 2
  console.log(oldObj) // { inObj: { a: 2, b: 2 } }
  console.log(newObj) // { inObj: { a: 2, b: 2 }, inObj_2: { a: 1, b: 2 } }

const oldArr = ["One", "Two", "Three",{name:"Four"}]
const newArr = [...oldArr]
newArr[1] = "love";
newArr[3].name = 'Five'
console.log(oldArr) //  ['One', 'Two', 'Three', { name: 'Five' } ]
console.log(newArr) // [ 'One', 'love', 'Three', { name: 'Five' } ]

2.2.3 Array.concat()

const oldArr = ["One", "Two", "Three",{name:"Four"}]
const newArr = oldArr.concat(["Six"])
newArr[1] = "love";
newArr[3].name = 'Five'
console.log(oldArr) //  ['One', 'Two', 'Three', { name: 'Five' } ]
console.log(newArr) // [ 'One', 'love', 'Three', { name: 'Five' }, 'Six'  ]

2.2.4 Array.slice()

const oldArr = ["One", "Two", "Three",{name:"Four"}]
const newArr = oldArr.slice(0)
newArr[1] = "love";
newArr[3].name = 'Five'
console.log(oldArr) //  ['One', 'Two', 'Three', { name: 'Five' } ]
console.log(newArr) // [ 'One', 'love', 'Three', { name: 'Five' } ]

三.深拷贝

3.1 定义

深拷贝开辟一个新的栈，两个对象属性相同，但是对应两个不同的地址，修改一个对象的属性，不会改变另一个对象的属性

简单来说:就是完全独立的双胞胎,彼此之间不会影响

3.2 js 常见的深拷贝方法

  • _.cloneDeep()
  • JSON.stringify()
  • 手写递归方法

3.2.1 _.cloneDeep()


const _ = require('lodash');
let oldObj = {
    a: 1, b: 2,c:{value:3}
}
let newObj = _.cloneDeep(oldObj)
newObj.a = 2
newObj.c.value = 4
console.log(oldObj) // { a: 1, b: 2, c: { value: 3 } }
console.log(newObj) // { a: 2, b: 2, c: { value: 4 } }

3.2.2 JSON.stringify()

const oldObj = {
    name: 'A',
    name1: {value:3}
}
const newObj = JSON.parse(JSON.stringify(oldObj));
newObj.name = 'B'
newObj.name1.value = 4
console.log(oldObj) 
// {name: 'A',name1: { value: 3 }}
console.log(newObj) 
// { name: 'B', name1: { value: 4 } }
3.2.2.1 JSON.stringify() 深拷贝弊端

先看个例子:

const map = new Map()
map.set('arr',['a'])
const oldObj = {
    name1: 'A',
    name2: undefined,
    name3: function() {},
    name4:  Symbol('A'),
    date: new Date('1990/01/01'),
    type: NaN,
    type1: Infinity,
    type2: null,
    map: map,
    reg: new RegExp('\\w+'),
    err: new Error('error message')
}
const newObj = JSON.parse(JSON.stringify(oldObj)); 
console.log(map.propertyIsEnumerable('arr'))// false
// {name1: 'A',name2: undefined,name3: [Function: name3],name4: Symbol(A),date: 1989-12-31T16:00:00.000Z,type: NaN,type1: Infinity,type2: null,map: Map { 'arr' => [ 'a' ],reg:new RegExp('\\w+'),err:Error: error message }}
console.log(oldObj) 
// {name1: 'A',date: '1989-12-31T16:00:00.000Z',type: null,type1: null,type2: null,map: {},reg:{},err:{} }}
console.log(newObj) 

var obj1 = {
    x: 1, 
    y: 2
  };
  obj1.z = obj1;
  var obj2 = JSON.parse(JSON.stringify(obj1)); //  Converting circular structure to JSON 栈溢出，抛出错误

从上面例子能看出,JSON.stringify() 会存在以下问题:

  • 忽略undefined、symbol和函数
  • Date 日期调用了 toJSON() 将其转换为了 string 字符串（Date.toISOString()），因此会被当做字符串处理
  • NaN 和 Infinity 格式的数值及 null 都会被当做 null
  • RegExp、Error对象会返回空；
  • 其他类型的对象，包括 Map/Set/WeakMap/WeakSet，仅会序列化可枚举的属性。
  • 对包含循环引用的对象（对象之间相互引用，形成无限循环）执行此方法，会抛出错误。
3.2.2.2 JSON.stringify() 深拷贝的原理

原理: JSON.parse(JSON.stringify())方法本质就是先将js对象进行序列化,然后再反序列化还原js对象.

那么什么是序列化?

  • 简单说法: 将对象转为字符串
  • 高端说法: 将对象的状态信息转换为可以存储或传输的形式的过程(百度的)

为什么需要序列化?

  • 对象本身存储的是一个地址映射,简单的说，对象obj就是我们的程序在电脑通电时在内存中维护的一种东西，如果我们程序停止了或者电脑断电了，对象obj将不复存在。所以需要把对象obj序列化转换成一个字符串的形式，然后再保存在磁盘上。(也就是存储).
  • 当我们通过HTTP协议把对象obj的内容发送到客户端时候,还是需要先把对象obj序列化，然后客户端根据接收到的字符串再反序列化解析出相应的对象.。(也就是传输).
3.2.2.3 JSON.stringify() 深拷贝产生弊端缘由

JSON.stringify() 时候使用的JSON的语法,它并不能表示JavaScript中的所有值，对于JSON语法不支持的属性，序列化后会将其省略。其详细规则如下：

  • 对于JavaScript中的五种原始类型，JSON语法支持数字、字符串、布尔值、null四种，不支持undefined；

  • NaN、Infinity和-Infinity序列化的结果是null；

  • JSON语法不支持函数；

  • 除了RegExp、Error对象，JSON语法支持其他所有对象；

  • 日期对象序列化的结果是ISO格式的字符串，但JSON.parse()依然保留它们字符串形态，并不会将其还原为日期对象；

  • JSON.stringify()只能序列化对象的可枚举的自有属性；

3.2.3 手写递归方法

function cloneDeep(obj, hash = new WeakMap()){
    if(obj instanceof Date) return new Date(obj);
    if (obj instanceof RegExp) return new RegExp(obj);
    if(!obj || typeof obj !== 'object') return obj;
    if(hash.get(obj)) return hash.get(obj);
    // 找到的是所属类原型上的constructor,而原型上的 constructor指向的是当前类本身
    let newObj= new obj.constructor();
    hash.set(obj,newObj);
    for(let key in obj) {
        if(obj.hasOwnProperty(key)){
            newObj[key] = cloneDeep(obj[key],hash)
        }
    }
    return newObj
}

测试例子

const oldObj = {
    name: 'A',
    name1: {value:{type:'obj'}},
    name2: undefined,
    name3: function() {},
    name4:  Symbol('A'),
    type: NaN,
    type1: Infinity,
    type2: null,
    reg: new RegExp('\\w+'),
    err: new Error('error message')
}
oldObj.z = oldObj
const newObj = cloneDeep(oldObj)
newObj.name1.value.type = 'Number'

console.log(oldObj) 
// {name: 'A',name1: { value: { type: 'obj' } },name2: undefined,name3: [Function: name3],name4: Symbol(A),type: NaN,type1: Infinity,type2: null,reg: /\w+/,err: Error: error message, z: [Circular]
console.log(oldObj) }

console.log(newObj) 
// {name: 'A',name1: { value: { type: 'Number' } },name2: undefined,name3: [Function: name3],name4: Symbol(A),type: NaN,type1: Infinity,type2: null,reg: /\w+/,err: Error: error message, z: [Circular]
console.log(oldObj) }


const oldArr = ["One", "Two", "Three",{name:"Four"}]
const newArr = cloneDeep(oldArr)
newArr[2] = 'Five'
newArr[3].name = 'Six'

console.log(oldArr) // [ 'One', 'Two', 'Three', { name: 'Four' } ]
console.log(newArr) // [ 'One', 'Two', 'Five', { name: 'Six' } ]
3.2.2.1 手写递归弊端
  1. 需要考虑多种数据类型,不仅有Object,还有Map,Set等数据结构(上面代码不支持Map/Set这种)
  2. 需要考虑拷贝对象的循环引用
  3. 使用递归的方式可能会造成爆栈，解决办法就是采用迭代的方式(网上很多材料,就不写了,放一个链接大家可供参考迭代方法 )

四. 小结

  1. 浅拷贝和深拷贝都能创建出一个新的对象，
  • 但浅拷贝在复制引用类型时,只复制引用地址，新旧对象还是共享同一块内存，修改对象属性会影响原对象;
  • 而深拷贝会另外创造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象
  1. 浅拷贝常见方法
  • Object.assign()
  • 扩展运算符
  • Array.concat()
  • Array.slice()

3.深拷贝常见方法

  • _.cloneDeep()
  • JSON.stringify()
  • 手写递归方法
蔡姐
关注
专栏目录
JS深拷贝与浅拷贝
weixin_50313248的博客
06-06 622
1.基本概念 (1)深拷贝和浅拷贝针对的是引用类型。基本类型的名值存储在栈中，当复制时，栈内存会开辟一个栈内存。所以二者修改时，彼此不会影响。 (2)浅拷贝复制的是指向对象的指针，并没有开辟新的栈内存，原对象和新对象还是共享同一块内存，修改新对象自然会影响原对象。 深拷贝会开辟新的栈内存，原对象和新对象不共享同一块内存，修改新对象不会影响到原对象。 2.实现方式 2.1深拷贝的实现方式 2.1.1 JSON.parse(JSON.stringify()) 说明： 1.用JSON.str
js深拷贝和浅拷贝
weixin_34162695的博客
07-10 164
一、数组的深浅拷贝 在使用JavaScript对数组进行操作的时候，我们经常需要将数组进行备份，事实证明如果只是简单的将它赋予其他变量，那么我们只要更改其中的任何一个，然后其他的也会跟着改变，这就导致了问题的发生。 var arr = ["One","Two","Three"]; var arrto = arr; arrto[1] = "test"; document.writ...
JS中的深拷贝和浅拷贝
最新发布
xllllll___的博客
07-16 803
浅拷贝实现的是对基础数据类型的拷贝，并且数据 只有单一的一层，而深拷贝用来拷贝具有嵌套层级的引用数据类型。对于基本数据类型来说，深拷贝和浅拷贝实现的效果一样；而对于引用数据类型来说，深拷贝可以实现操作该数据，并且不会影响到源数据的效果。
JavaScript的深拷贝与浅拷贝
hsany330的专栏
06-27 564
在使用JavaScript对数组进行操作的时候，我们经常需要将数组进行备份，事实证明如果只是简单的将它赋予其他变量，那么我们只要更改其中的任何一个，然后其他的也会跟着改变，这就导致了问题的发生。 var arr = ["One","Two","Three"];     var arrto = arr; arrto[1] = "test";
js深拷贝与浅拷贝
09-01 109
1 基础知识：基本类型与引用类型 JS中可以把变量分成两部分，基本类型和引用类型。 基本类型包括：Undefined、Null、Boolean、Number和String；引用类型值可能由多个值构成的对象。 在对基础类型数据进行拷贝时，实际相当于创建新的相同数据'hello'，赋值给b var a='hello'; var b = a; b = 'world'; ...
JS深拷贝和浅拷贝
小白成长史
01-21 3591
浅拷贝只是拷贝一层,更深层次对象级别的只拷贝引用。 浅拷贝是拷贝的内存地址，使新对象指向拷贝对象的内存地址。深拷贝是重新开辟一块内存空间，用来存放sources对象的值。 浅拷贝可以用for in 来实现，也可用es6新增方法Object.assign(target,...sources) 来实现，target为目标对象，sources为原对象(要进行拷贝的对象) 浅拷贝后改变target中的值，sources也会进行改变。深拷贝不会这样 深拷贝可以基于函数封装的方法来进行实现。 <b...
JavaScript深拷贝和浅拷贝概念与用法实例分析
01-19
js中的浅拷贝和深拷贝，只是针对复杂数据类型(Objcet，Array)的复制问题。简单来讲浅拷贝和深拷贝都可以实现在原有对象的基础上再生成一份的作用。但是根据新生成的对象能否影响到原对象可以分为浅拷贝和深拷贝。 ...
javascript深拷贝和浅拷贝详解
10-20
在JavaScript中，深拷贝和浅拷贝是两种不同的复制对象或数组的方式，它们在处理复杂数据结构时尤其重要，因为它们决定了原数据和副本之间的关联关系。本文将详细解释这两种拷贝的区别以及如何实现它们。 **一、数组...
javascript深拷贝、浅拷贝和循环引用深入理解
10-18
JavaScript中的深拷贝和浅拷贝是编程中常见的概念，主要涉及到对象和数组的复制。在JavaScript中，数据类型分为基本数据类型（如Number、String、Boolean等）和引用数据类型（如Object、Array等）。基本类型直接存储...
Object对象的浅拷贝与深拷贝方法详解
weixin_34356138的博客
10-15 460
/* ===================== 直接看代码 ===================== */ <!DOCTYPE html> <html> <head> 　　<meta charset="UTF-8"> 　　<title></title> </head> <body&g...
js 深拷贝和浅拷贝
我是莫得钱
03-22 380
文章目录前言深拷贝和浅拷贝的区别浅拷贝1.直接赋值2.for...in3.Object.assign总结深拷贝1.JSON.parse(JSON.stringify())2.递归总结 前言 本文介绍js中深拷贝和浅拷贝的几种方法，以及深拷贝和浅拷贝的区别 深拷贝和浅拷贝的区别 深拷贝（复杂）：复制变量值，对于非基本类型的变量，则递归至基本类型变量后，再复制; 浅拷贝：复制一份引用，所有引用对象都指向一份数据，并且都可以修改这份数据 深拷贝和浅拷贝只针对像 Object, Array 这样的复杂对象。
JS的深拷贝与浅拷贝
ZHXT__的博客
09-24 347
浅谈深拷贝和浅拷贝 深拷贝和浅拷贝的区别 1.浅拷贝： 将原对象或原数组的引用直接赋给新对象，新数组，新对象／数组只是原对象的一个引用 2.深拷贝： 创建一个新的对象和数组，将原对象的各项属性的“值”（数组的所有元素）拷贝过来，是“值”而不是“引用” 为什么要使用深拷贝？ 我们希望在改变新的数组（对象）的时候，不改变原数组（对象） 深拷贝的要求程度 我们在使用深拷贝的时候，一定要弄清楚我们对深拷贝...
js深拷贝浅拷贝
m0_49789433的博客
07-15 407
一、数据类型 数据分为基本数据类型(String, Number, Boolean, Null, Undefined，Symbol)和对象数据类型。 1、基本数据类型的特点：直接存储在栈(stack)中的数据 2、引用数据类型的特点：存储的是该对象在栈中引用，真实的数据存放在堆内存里 引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址。当解释器寻找引用值时，会首先检索其在栈中的地址，取得地址后从堆中获得实体。 堆内存 二、浅拷贝与深拷贝 深拷贝和浅拷贝是只针对Object
js浅拷贝和深拷贝
qq_39232387的博客
04-12 3079
1、JS数据类型 基本数据类型：Boolean、String、Number、null、undefined 引用数据类型：Object、Array、Function、RegExp、Date等 2、深拷贝与浅拷贝 深拷贝和浅拷贝都只针对引用数据类型， 浅拷贝会对对象逐个成员依次拷贝，但只复制内存地址，而不复制对象本身，新旧对象成员还是共享同一内存；深拷贝会另外创建一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象。 区别：浅拷贝只复制对象的第一层属性，而深拷贝会对对象的属性进行递归
JavaScript深拷贝与浅拷贝
weixin_60297362的博客
01-23 3519
文章目录一、理解二、浅拷贝1.用Js实现浅拷贝2. 浅拷贝语法糖2.1 写法2.3 应用三、深拷贝用Js实现深拷贝 一、理解 浅拷贝：只是拷贝一层，更深层次对象级别的只拷贝了地址 深拷贝：层层拷贝，每一级别的数据都会拷贝 二、浅拷贝 1.用Js实现浅拷贝 var obj = { id:1, name:'Andy', msg: { age:18 } } var newObj = {} for(var key in obj) { //key是当前属性名， obj[k]是当前属性值 ne
js 深拷贝/浅拷贝
日常笔记/总结/系列知识梳理
01-02 260
原生js: var newArr=[]; var oldArr=[1,2,3]; Object.assign(newArr,oldArr); jquery实现： var newArr=[]; var oldArr=[1,2,3]; newArr = $.extend(true,[],oldArr) 相关文章：深拷贝的三种实现方式 ...
js深拷贝浅拷贝以及解决方案
lishuangcsdn的博客
07-31 471
为什么会出现深拷贝和浅拷贝： 首先谈一谈，js的数据类型，基本类型有:Number，String，null，undefined，boolean；引用类型有：Array，Object，Function；当基本类型赋值时，是直接增加了内存空间，相互独立了；但是当引用类型赋值或则复制时直接改变了指针方向，好比两个人有了同一间房子的钥匙，都指向了同一内存，所以是相互影响的。 举个简单的例子：1：，b是没有变的。2：，当变成引用类型时，a改变时b也随着改变了。这个赋值可以简单的理解...
javascript 深拷贝和浅拷贝
04-19
好的，关于 Javascript 的深拷贝和浅拷贝的问题，我可以回答。这两种拷贝方式都是针对对象的，浅拷贝只是复制了对象的引用，而深拷贝则是复制了对象本身，包括对象内部嵌套的子对象。常见的浅拷贝方法有 Object.assign() 和扩展运算符(...), 而深拷贝则需要使用递归或者第三方库比如 lodash 的 cloneDeep 方法来实现。需要注意的是，深拷贝会消耗更多的内存和处理时间，所以建议根据实际情况选择使用哪种拷贝方式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值