4个方面彻底说清JS的深拷贝/浅拷贝

首先,本文适用于业务需要,急需知道如何深拷贝JS对象的开发者。第二类,希望扎实JS基础,将来好去面试官前秀操作的好学者。

第一类

你只需要一行黑科技代码就可以实现深拷贝

var copyObj = {
    name: ‘ziwei‘,
    arr : [1,2,3]
}

var targetObj = JSON.parse(JSON.stringify(copyObj))

此时 copyObj.arr !== targetObj.arr  已经实现了深拷贝

别着急走,利用window.JSON的方法做深拷贝存在2个缺点:

如果你的对象里有函数,函数无法被拷贝下来

无法拷贝copyObj对象原型链上的属性和方法

当然,你明确知道他们的缺点后,如果他的缺点对你的业务需求没有影响,就可以放心使用了,一行原生代码就能搞定。

目前我在开发业务场景中,大多还真可以忽略上面2个缺点。往往需要深拷贝的对象里没有函数,也不需要拷贝它原型链的属性。

第二类

下面我会尽可能全面的讲解清楚JS里对象的拷贝,要讲清楚拷贝,你需要一点点前置知识

你需要的前置知识:

理解JS里的引用类型和值类型的区别,知道Obj存储的只是引用

对原型链有基本了解

关于对象拷贝的全部:

  • 1.深拷贝、浅拷贝是什么
  • 2.深拷贝、浅拷贝在业务里的最常见的应用场景
  • 3.深拷贝和浅拷贝的实现方式
  • 4.总结与建议

对web开发技术感兴趣的小伙伴,欢迎加入:前端学习圈,不管你是小白还是大牛我都欢迎

1.深拷贝、浅拷贝是什么

我们讨论JS对象深拷贝、浅拷贝的前提

只有对象里嵌套对象的情况下,才会根据需求讨论,我们要深拷贝还是浅拷贝。

比如下面这种对象

var obj1 = {
    name: ‘ziwei‘,
    arr : [1,2,3]
}

因为,如果是类似这样{name: ‘ziwei’},没有嵌套对象的对象的话,就没必要区分深浅拷贝了。只有在有嵌套的对象时,深拷贝和浅拷贝才有区别

浅拷贝是什么样子的 (我们暂时不管具体如何实现,因为下面会单讲)

调用shallowCopy()后,obj2拷贝obj1所有的属性。但是obj2.arr和obj1.arr是不同的引用,指向同一个内存空间

var obj2 = shallowCopy( obj1 , {})

 console.log( obj1 !== obj2 )                   // true    无论哪种拷贝,obj1和obj2一定都是2个不同的对象(内存空间不同)

 console.log( obj2.arr === obj1.arr )            // true   他们2个对象里arr的引用,指向【相同的】内存空间

所以, 2个obj经过拷贝后,虽然他们属性相同,也的确是不同的对象,但他们内部的obj都是指向同一个内存空间,这种我们叫浅拷贝

深拷贝是什么样子的 (我们暂时不管具体如何实现,因为下面会单讲)

调用deepCopy()后,obj2拷贝obj1所有的属性,而且obj2.arr和obj1.arr是指向不同的内存空间,

2个obj2除了拷贝了一样的属性,没有任何其他关联。

var obj2 = deepCopy( obj1 , {})

 console.log( obj1 !== obj2 )                   // true    无论哪种拷贝,obj1和obj2一定都是2个不同的对象(内存空间不同)

 console.log( obj2.arr === obj1.arr )            // false   他们2个对象里arr的引用,指向【不同的】内存空间

所以, 2个obj经过拷贝后,除了拷贝下来相同的属性之外,没有任何其他关联的2个对象,这种我们叫深拷贝

2.深拷贝在业务里的最常见的应用场景

举个栗子,业务需求是 : 一个表格展示商品各种信息,点击【同意】时,是可以弹出对话框调整商品数量的。

这种业务需求下,我们就会用到对象的深拷贝。因为【商品表格】的属性和【调整商品表格】的属性几乎一样,我们需要拷贝。

下面的伪代码和图片就是展示使用浅拷贝存在的问题

这样得到的adjustTableArr和tableArr里,内部对象都是相同的,所以就出现了图中红线标注的情况,

当我们修改【调整商品表格】里的商品数量时,【商品表格】也跟着改变了,这并不是我们想要的

// 表格对象的数据结构
var tableArr = [
        {goods_name : ‘长袖腰背夹‘ , code : ‘M216C239E0864‘ , num : ‘2‘},
        {goods_name : ‘长袖腰背夹‘ , code : ‘M216C240B0170‘ , num : ‘3‘},
        {goods_name : ‘短塑裤‘ , code : ‘M216D241C04106‘ , num : ‘3‘},
    ]

var adjustTableArr = []                  // 调整表格用的数组

for (var key in tableArr) {               // 浅拷贝
    adjustTableArr[key] = tableArr[key]
}

而实际上,我们希望这2个表格里的数据完全独立,互不干扰,只有在确认调整之后才刷新商品数量。

这种情况下我们就可以使用前面说的深拷贝的一行黑科技

var adjustTableArr = JSON.parse(JSON.stringify(tableArr))

还记得它的缺陷吗? 对象里的函数无法被拷贝,原型链里的属性无法被拷贝。这里就对业务没有影响,可以很方便的深拷贝。

3.深拷贝和浅拷贝的实现方式

其实JQ里已经有$.extend()函数,实现就是深拷贝和浅拷贝的功能。有兴趣的小伙伴也可以看看源码。

浅拷贝

浅拷贝比较简单,就是用for in 循环赋值

function shallowCopy(source, target = {}) {
        var key;
        for (key in source) {
            if (source.hasOwnProperty(key)) {        // 意思就是__proto__上面的属性,我不拷贝
                target[key] = source[key];
            }
        }
        return target;
    }

深拷贝的实现

  • 深拷贝,就是遍历那个被拷贝的对象
  • 判断对象里每一项的数据类型
  • 如果不是对象类型,就直接赋值,如果是对象类型,就再次调用deepCopy,递归的去赋值。

function deepCopy(source, target = {}) {
        var key;
        for (key in source) {
            if (source.hasOwnProperty(key)) {                         // 意思就是__proto__上面的属性,我不拷贝
                if (typeof(source[key]) === "object") {               // 如果这一项是object类型,就递归调用deepCopy
                    target[key] = Array.isArray(source[key]) ? [] : {};
                    deepCopy(source[key], target[key]);
                } else {                                            // 如果不是object类型,就直接赋值拷贝
                    target[key] = source[key];
                }
            }
        }
        return target;
    }

以上的无论深、浅拷贝,都用了source.hasOwnProperty(key),意思是判断这一项是否是其自有属性,是的话才拷贝,不是就不拷贝。

也就是说proto上面的属性,我不拷贝。这个其实你可以根据业务需求,来决定加上和这个条件

(JQ的$.extend()是会连proto上的属性也拷贝下来的,但是是直接拷贝到对象上,而不是放到之前的proto上)

4.总结与建议

虽然大家可能经常用框架提供的api来实现深拷贝。

这篇文章分享的目的,更多还是希望用一篇文章整理清楚深浅拷贝的含义、递归实现思路,以及小伙伴们如果使用了JSON.parse()这种黑科技,一定要清楚这样写的优缺点。

5.修正

上面的deepCopy方法有漏洞,没有考虑source一开始就是数组的情况

下面是一个修改后版本

function deepCopy( source ) {
    let target = Array.isArray( source ) ? [] : {}
    for ( var k in source ) {
        if ( typeof source[ k ] === ‘object‘ ) {
            target[ k ] = deepCopy( source[ k ] )
        } else {
            target[ k ] = source[ k ]
        }
    }
    return target
}

我们采集的是石头,但是必须时刻展望未来的大教堂。

持续做一些小改进,慢慢地你就会惊奇地发现你的经验得到了怎么样的发展,你的技能得到了怎样的提升。

这里推荐一下我的前端学习交流群:784783012 ,里面都是学习前端的,从最基础的HTML+CSS+JS【炫酷特效,游戏,插件封装,设计模式】到移动端HTML5的项目实战的学习资料都有整理,送给每一位前端小伙伴。最新技术,与企业需求同步,好友都在里面学习交流,每天都会有大牛定时讲解前端技术!

点击:加入

原文地址:https://blog.51cto.com/14227711/2373882

时间: 2024-11-09 10:38:39

4个方面彻底说清JS的深拷贝/浅拷贝的相关文章

js对象深拷贝浅拷贝

对象的深拷贝于浅拷贝 对于基本类型,浅拷贝过程就是对值的复制,这个过程会开辟出一个新的内存空间,将值复制到新的内存空间.而对于引用类型来书,浅拷贝过程就是对指针的复制,这个过程并没有开辟新的堆内存空间,只是将指向该内存的地址进行了复制.然而对引用类型的浅拷贝会出现一个问题,那就是修改其中一个对象的属性,则另一个对象的属性也会改变.产生了问题那必然有相对解决的方法, 就这样深拷贝就开始入场了,深拷贝会开辟新的栈,两个对象对应两个不同的地址,这样一来,改一个对象的属性,也不会改变另一个对象的属性.

JS 中深拷贝的几种实现方法

JS 中深拷贝的几种实现方法1.使用递归的方式实现深拷贝 //使用递归的方式实现数组.对象的深拷贝 function deepClone1(obj) { //判断拷贝的要进行深拷贝的是数组还是对象,是数组的话进行数组拷贝,对象的话进行对象拷贝 var objClone = Array.isArray(obj) ? [] : {}; //进行深拷贝的不能为空,并且是对象或者是 if (obj && typeof obj === "object") { for (key i

JS中深拷贝与浅拷贝的区别,实现深拷贝的几种方法

JS中深拷贝与浅拷贝的区别,实现深拷贝的几种方法 如何区分深拷贝与浅拷贝,简单点来说,就是假设B复制了A,当修改A时,看B是否会发生变化,如果B也跟着变了,说明这是浅拷贝,拿人手短,如果B没变,那就是深拷贝,自食其力. 此篇文章中也会简单阐述到栈堆,基本数据类型与引用数据类型,因为这些概念能更好的让你理解深拷贝与浅拷贝. 我们来举个浅拷贝例子: let a=[0,1,2,3,4], b=a; console.log(a===b); a[0]=1; console.log(a,b); 嗯?明明b复

js的深拷贝和浅拷贝

一.数组的深浅拷贝 在使用JavaScript对数组进行操作的时候,我们经常需要将数组进行备份,事实证明如果只是简单的将它赋予其他变量,那么我们只要更改其中的任何一个,然后其他的也会跟着改变,这就导致了问题的发生. var arr = ["One","Two","Three"]; var arrto = arr; arrto[1] = "test"; document.writeln("数组的原始值:" +

JS对象的浅拷贝与深度拷贝

1.js中的6个标准类型 原始类型:Undefined.Null.Boolean.String.Number 引用类型:Object ( 最简单的引用类型var obj={} ) 2.把标准类型分成了两类.这两种类型复制克隆有很大区别 原始类型:存储的是对象的实际数据( 存放在栈内存中 ) 引用类型:存储的是对象的引用地址( 栈内存中存放的堆内存的地址 ) 3.克隆概念 浅度克隆:原始类型为值传递.对象类型仍为引用传递 深度克隆:所有的元素与属性均完全复制.与原对象完全脱离关系( 对新对象的修改

【JS】深拷贝与浅拷贝的区别,实现深拷贝的几种方法

如何区分深拷贝与浅拷贝,简单点来说,就是假设B复制了A,当修改A时,看B是否会发生变化,如果B也跟着变了,说明这是浅拷贝,拿人手短,如果A没变,那就是深拷贝,自食其力. 此篇文章中也会简单阐述到栈堆,基本数据类型与引用数据类型,因为这些概念能更好的让你理解深拷贝与浅拷贝. 我们来举个浅拷贝例子: let a=[0,1,2,3,4], b=a; console.log(a===b); a[0]=1; console.log(a,b); 嗯?明明b复制了a,为啥修改数组a,数组b也跟着变了,这里我不

从JS的深拷贝与浅拷贝到jq的$.extend()方法

一.堆内存与栈内存 堆和栈都是内存中划分出来的用来存储的区域,栈为自动分配的内存空间,它由系统自动释放,堆为动态分配的内存,大小不定也不会自动释放. 二.js基本数据类型与引用类型的不同 基本数据类型(boolean,undefined,null,string,number) 1.基本数据类型存放在栈内存中 是存放在栈中的简单数据段,数据大小确定,内存空间大小可以分配,是直接按值存放的,所以可以直接访问. 2.基本数据类型值不可变 js中给基本类型赋值或操作基本类型数据时,并没有改变基本类型的原

js实现深拷贝

js的数据类型分为基本数据类型和引用数据类型.基本数据类型是直接赋值,引用数据类型分为浅拷贝和深拷贝.浅拷贝是复制对象的指针,深拷贝是复制对象所有属性再内存中独立存在. 浅拷贝如下: var obj = {a: 'test', b: {c: 0}} var obj1 = obj var obj2 = shallowCopy(obj); function shallowCopy(src) { var dst = {}; for (var prop in src) { if (src.hasOwnP

JS中深拷贝数组、对象、对象数组方法

我们在JS程序中需要进行频繁的变量赋值运算,对于字符串.布尔值等可直接使用赋值运算符 "=" 即可,但是对于数组.对象.对象数组的拷贝,我们需要理解更多的内容. 首先,我们需要了解JS的浅拷贝与深拷贝的区别. 我们先给出一个数组: var arr = ["a","b"]; 现在怎么创建一份arr数组的拷贝呢?直接执行赋值运算吗?我们来看看输出结果 var arrCopy = arr; arrCopy[1] = "c"; arr