Javascript深浅拷贝 #57

Wscats · 2016-10-13T06:35:55Z

Javascript有六种基本数据类型（也就是简单数据类型），它们分别是：Undefined，Null，Boolean，Symbol，Number和String。还含有一种复杂数据类型，就是对象

注意Undefined和Null的区别，Undefined类型只有一个值，就是undefined，Null类型也只有一个值，也就是null
Undefined其实就是已声明未赋值的变量输出的结果
null其实就是一个不存在的对象的结果

var c;
console.log(c)//undefined

console.log(document.getElementById('wsscat'))//没有id为wsscat的节点,输出null

简单的数据类型和复杂的数据类型有以下重要的区别

对于简单数据类型

它们值在占据了内存中固定大小的空间，并被保存在栈内存中。当一个变量向另一个变量复制基本类型的值，会创建这个值的一个副本，还有就是不能给基本数据类型的值添加属性

var a = 1;
var b = a;
a.attr = 'wsscat';
console.log(a.attr)//undefined

上面代码中a就是简单数据类型（Number），b就是a的副本，它们两者都占有不同位置但相等的内存空间

对于复杂的数据类型

复杂的数据类型即引用类型，它的值是对象，保存在堆内存中，包含引用类型值的变量实际上包含的并不是对象本身，而是一个指向该对象的指针。从一个变量向另一个变量复制引用类型的值，复制的其实是指针，因此两个变量最终都指向同一个对象。

var obj = {
    name:'wsscat',
    age:0
}
var obj2 = obj;
obj2['c'] = 5;
console.log(obj);//Object {name: "wsscat", age: 0, c: 5}
console.log(obj2);////Object {name: "wsscat", age: 0, c: 5}

我们可以看到obj赋值给obj2后，当我们更改其中一个对象的属性值，两个对象都发生了改变，究其原因局势因为obj和obj2这两个变量都指向同一个指针，赋值只是复制了指针，所以当我们改变其中一个的值就会影响另外一个变量的值

浅拷贝

其实这段代码就是浅拷贝，有时候我们只是想备份数组，但是只是简单让它赋给一个变量，改变其中一个，另外一个就紧跟着改变，但很多时候这不是我们想要的

var obj = {
    name:'wsscat',
    age:0
}
var obj2 = obj;
obj2['c'] = 5;
console.log(obj);//Object {name: "wsscat", age: 0, c: 5}
console.log(obj2);////Object {name: "wsscat", age: 0, c: 5}

深拷贝

数组
对于数组我们可以使用slice()和concat()方法来解决上面的问题
slice

var arr = ['wsscat', 'autumns', 'winds'];
var arrCopy = arr.slice(0);
arrCopy[0] = 'tacssw'
console.log(arr)//['wsscat', 'autumns', 'winds']
console.log(arrCopy)//['tacssw', 'autumns', 'winds']

concat

var arr = ['wsscat', 'autumns', 'winds'];
var arrCopy = arr.concat();
arrCopy[0] = 'tacssw'
console.log(arr)//['wsscat', 'autumns', 'winds']
console.log(arrCopy)//['tacssw', 'autumns', 'winds']

对象
对象我们可以定义一个新的对象并遍历新的属性上去实现深拷贝

var obj = {
    name:'wsscat',
    age:0
}

var obj2 = new Object();
obj2.name = obj.name;
obj2.age = obj.age

obj.name = 'autumns';
console.log(obj);//Object {name: "autumns", age: 0}
console.log(obj2);//Object {name: "wsscat", age: 0}

当然我们可以封装好一个方法来处理对象的深拷贝，代码如下

var obj = {
    name: 'wsscat',
    age: 0
}
var deepCopy = function(source) {
    var result = {};
    for(var key in source) {
        if(typeof source[key] === 'object') {
            result[key] = deepCopy(source[key])
        } else {
            result[key] = source[key]
        }
    }
    return result;
}
var obj3 = deepCopy(obj)
obj.name = 'autumns';
console.log(obj);//Object {name: "autumns", age: 0}
console.log(obj3);//Object {name: "wsscat", age: 0}

The text was updated successfully, but these errors were encountered:

Wscats · 2016-11-05T11:11:47Z

Javascript数组存放函数

在javascript中函数也是一种数据，能够像操作一个对象对它进行操作。并且javascript不进行数据类型检查，数组可以存放任何东西，在下面代码中我们不但在数组中存放了函数，并且也可以在存放一个执行函数的返回值，所以数组前两个数据存放都是函数执行返回值

var funcA = function() {
    console.log("funcA");
    return "hello funA";
}
var funcB = function() {
    console.log("funcB");
    return "hello funB";
}
var funcC = function() {
    console.log("funcC");
    return "hello funC";
}
var arr = [funcA(), funcB(), funcC];
console.log(arr);
arr[2]();

输出的结果如下

dcy0701 · 2016-12-16T05:59:26Z

对象中不含有函数的话。JSON解析反解析就行了

ghost · 2016-12-18T01:57:34Z

深拷贝

数组
对于数组我们可以使用slice()和concat()方法来解决上面的问题
silce
...

应该是手滑了吧，silce -> slice

Wscats · 2016-12-18T10:45:22Z

谢谢，已更正~

GreenMelon · 2016-12-18T15:12:31Z

ES6中有 Object.assign() 方法，应该也可以解决你对于深克隆的需求吧？

HeftyKoo · 2016-12-22T02:11:22Z

concat 和slice对对象数组没有效果的？

flynntsc · 2016-12-28T01:56:11Z

@GreenMelon Object.assign()方法不适于深拷贝，MDN上有说明

flynntsc · 2016-12-28T02:12:33Z

@yeyuqiudeng concat和slice主要是针对基本数据类型数组的深拷贝，牵涉到多层复杂数据类型即对象的就要再对{a:{b:1}进行深拷贝。有兴趣的话，可对Underscore、Lodash 和 JQuery的源码进行学习，相关文章《深入剖析 JavaScript 的深复制》

HeftyKoo · 2016-12-28T02:22:45Z

@flynntsc 嗯嗯，谢谢

specialCoder · 2017-01-17T03:51:39Z

我这里实现了对象包括数组的深拷贝：

Object.prototype.deepCopy=function(){
    var obj=null;//用于最后返回一个对象，这个对象是深复制的结果
    for(var attr in this){//遍历这个对象的每一个属性
        if(this.hasOwnProperty(attr)){//主要是递归自有属性
            if(typeof (this[attr]==='object')){//如果对象的属性是一个对象，就递归复制它的每一个属性
                if(this[attr]===null){//如果对象为null
                    obj[attr]=null;
                }else if(Object.prototype.toString(this[attr])==='[object Array]'){//如果是个数组
                    obj[attr]=[];
                    for(var i=0;i<this[attr].length;i++){
                        obj[attr].push(this[attr][i].deepCopy());
                    }
                }else{//object
                    obj[attr]=this[attr].deepCopy();
                }
            }else{
                obj[attr]=this[attr];
            }
        }
    }
    return obj;
}

Joephy2012 · 2017-03-02T10:16:25Z

test.html:12 Uncaught RangeError: Maximum call stack size exceeded
报错了 @specialCoder

radicalviva · 2017-03-30T15:16:13Z

基本类型在ES6还有一个Symbol，漏掉了

嗯嗯 by @Wscats

jiao852jiujiu · 2017-06-17T03:02:07Z

不错不错👍🏻

kokpapa · 2017-09-05T23:18:33Z

写得挺好的

huchenh · 2017-10-09T09:24:32Z

涨知识啦

yunbiji · 2018-03-30T12:13:00Z

没看到对循环引用的处理啊

plane-hjh · 2018-04-01T15:02:11Z

function deepCopy(jsonData){
return JSON.parse(JSON.stringify(jsonData));
};
这样也可以吧

LiuL0703 · 2018-04-08T11:13:57Z

@plane-hjh 这样有其他问题具体可以看我这篇文章

LiuL0703 · 2018-04-08T11:14:43Z

@kscript 循环引用解决方案可以看这个具体可以看这篇文章

AdamssBryan · 2018-04-10T08:09:07Z

slice、concat、assign都是浅拷贝，如果数据中没有函数，可以直接用JSON来实现拷贝，如果有函数，就得用递归来实现深拷贝，递归实现时，函数依然是公用的；
更高级的可以参考楼上的文章LiuL0703/blog#19

refanbanzhang · 2018-10-11T09:07:26Z

我这里实现了对象包括数组的深拷贝：

Object.prototype.deepCopy=function(){
    var obj=null;//用于最后返回一个对象，这个对象是深复制的结果
    for(var attr in this){//遍历这个对象的每一个属性
        if(this.hasOwnProperty(attr)){//主要是递归自有属性
            if(typeof (this[attr]==='object')){//如果对象的属性是一个对象，就递归复制它的每一个属性
                if(this[attr]===null){//如果对象为null
                    obj[attr]=null;
                }else if(Object.prototype.toString(this[attr])==='[object Array]'){//如果是个数组
                    obj[attr]=[];
                    for(var i=0;i<this[attr].length;i++){
                        obj[attr].push(this[attr][i].deepCopy());
                    }
                }else{//object
                    obj[attr]=this[attr].deepCopy();
                }
            }else{
                obj[attr]=this[attr];
            }
        }
    }
    return obj;
}

typeof 对array和object都返回object，所以没有必要加一层array的判断吧？

zpj4206 · 2018-11-28T02:29:38Z

function deepCopy(jsonData){
return JSON.parse(JSON.stringify(jsonData));
};
这样也可以吧
只适合对象吧这个

huchenh · 2018-12-11T14:58:45Z

js中函数也是一种引用类型数据，a，b指向两个不同的函数，执行的结果也是有区别的发自我的华为手机-------- 原始邮件 --------主题：Re: [Wscats/Good-Text-Share] Javascript深浅拷贝 (#57)发件人：燕睿涛收件人：Wscats/Good-Text-Share 抄送：陈虎 ,Comment function() {}也算基本数据类型吗 let a = function() {console.log(123);} let b = a b = function() {console.log(456);} 执行上面只有，a、b是不同的两个函数，按理说，函数应该存储的也是，求解 —You are receiving this because you commented.Reply to this email directly, view it on GitHub, or mute the thread.

tanf1995 · 2019-01-12T05:45:04Z

let deep_copy = function f(obj) {
    let new_value;
    if(typeof obj === 'object' && obj != null){
        if(obj instanceof Array){
            new_value = [];
            for(let i=0;i<obj.length;i++){
                if(typeof obj[i] !== 'object' || obj[i] === null){
                    new_value[i] = obj[i];
                }else{
                    new_value.push(f(obj[i]));
                }
            }
        }else{
            new_value = {};
            for(let item in obj){
                if(obj.hasOwnProperty(item)){
                    if(typeof obj[item] !== 'object' || obj[item] === null){
                        new_value[item] = obj[item];
                    }else{
                        Object.assign(new_value, { [item]: f(obj[item])});
                    }
                }
            }
        }
    }else{
        new_value = obj;
    }
 
    return new_value;
};

ZSH0A0 · 2019-02-13T09:47:36Z

我觉的你的理解有点问题，对象的赋值操作不能算是浅拷贝。在对对象进行浅拷贝时，对象中的基本数据类型会开辟新的空间，引用类型指向的还是同一个地址。而赋值操作，是将对象B的地址指向对象A。
举个例子

var obj1 = {
      name: 'zhangsan',
      num: [1, 2, 3]
}
// 赋值操作
var obj2 = obj1
obj2.name = 'lisi'
console.log(obj1) // {name: "lisi", num: [1, 2, 3] }
console.log(obj2) // {name: "lisi", num: [1, 2, 3] }
// 浅拷贝
var obj3 = Object.assign({}, obj1)
obj3.name = 'wanger'
console.log(obj1) // {name: "lisi", num: [1, 2, 3] }
console.log(obj3) // {name: "wanger", num: [1, 2, 3] }

tanf1995 · 2019-02-21T04:08:56Z

我同你认知的一样啊，将引用类型直接赋值给其他变量，只是传递了内存地址。获取 Outlook for Android<https://aka.ms/ghei36>

…

________________________________ From: gudongz <notifications@github.com> Sent: Wednesday, February 13, 2019 5:47:45 PM To: Wscats/Good-Text-Share Cc: 谭峰; Comment Subject: Re: [Wscats/Good-Text-Share] Javascript深浅拷贝 (#57) 我觉的你的理解有点问题，对象的赋值操作不能算是浅拷贝。在对对象进行浅拷贝时，对象中的基本数据类型会开辟新的空间，引用类型指向的还是同一个地址。而赋值操作，是将对象B的地址指向对象A。举个例子 var obj1 = { name: 'zhangsan', num: [1, 2, 3] } // 赋值操作 var obj2 = obj1 obj2.name = 'lisi' console.log(obj1) // {name: "lisi", num: [1, 2, 3] } console.log(obj2) // {name: "lisi", num: [1, 2, 3] } // 浅拷贝 var obj3 = Object.assign({}, obj1) obj3.name = 'wanger' console.log(obj1) // {name: "lisi", num: [1, 2, 3] } console.log(obj3) // {name: "wanger", num: [1, 2, 3] } ― You are receiving this because you commented. Reply to this email directly, view it on GitHub<#57 (comment)>, or mute the thread<https://github.com/notifications/unsubscribe-auth/AayVkmZtc8X140WL6dPazBDB1MYAYOLFks5vM99BgaJpZM4KViK->.

Rotten-Egg · 2019-11-27T08:34:44Z

如果需要深拷贝函数和正则呢

zhelingwang · 2020-07-23T10:00:29Z

ES6中有 Object.assign() 方法，应该也可以解决你对于深克隆的需求吧？

assign不是深克隆

Wscats changed the title ~~Javascript~~ Javascript基本数据类型 Oct 13, 2016

Wscats changed the title ~~Javascript基本数据类型~~ Javascript基本数据类型&&深浅拷贝 Oct 16, 2016

Wscats added the notes label Oct 16, 2016

Wscats changed the title ~~Javascript基本数据类型&&深浅拷贝~~ Javascript深浅拷贝 Oct 16, 2016

Wscats mentioned this issue Feb 12, 2017

webpack入门 Wscats/webpack#1

Open

JeromeYangtao mentioned this issue Nov 5, 2017

深浅拷贝 JeromeYangtao/blog#3

Open

LuoSK mentioned this issue Mar 4, 2020

我这里实现了对象包括数组的深拷贝： #89

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Javascript深浅拷贝 #57

Javascript深浅拷贝 #57

Wscats commented Oct 13, 2016 •

edited

Loading

Wscats commented Nov 5, 2016 •

edited

Loading

dcy0701 commented Dec 16, 2016

ghost commented Dec 18, 2016

Wscats commented Dec 18, 2016

GreenMelon commented Dec 18, 2016

HeftyKoo commented Dec 22, 2016

flynntsc commented Dec 28, 2016

flynntsc commented Dec 28, 2016

HeftyKoo commented Dec 28, 2016 •

edited by Wscats

Loading

specialCoder commented Jan 17, 2017 •

edited by Wscats

Loading

Joephy2012 commented Mar 2, 2017

radicalviva commented Mar 30, 2017 •

edited by Wscats

Loading

jiao852jiujiu commented Jun 17, 2017

kokpapa commented Sep 5, 2017

huchenh commented Oct 9, 2017

yunbiji commented Mar 30, 2018

plane-hjh commented Apr 1, 2018

LiuL0703 commented Apr 8, 2018

LiuL0703 commented Apr 8, 2018

AdamssBryan commented Apr 10, 2018 •

edited

Loading

refanbanzhang commented Oct 11, 2018 •

edited

Loading

zpj4206 commented Nov 28, 2018

huchenh commented Dec 11, 2018 via email •

edited by Wscats

Loading

tanf1995 commented Jan 12, 2019 •

edited by Wscats

Loading

ZSH0A0 commented Feb 13, 2019 •

edited

Loading

tanf1995 commented Feb 21, 2019 via email

Rotten-Egg commented Nov 27, 2019

zhelingwang commented Jul 23, 2020

Javascript深浅拷贝 #57

Javascript深浅拷贝 #57

Comments

Wscats commented Oct 13, 2016 • edited Loading

对于简单数据类型

对于复杂的数据类型

浅拷贝

深拷贝

Wscats commented Nov 5, 2016 • edited Loading

Javascript数组存放函数

dcy0701 commented Dec 16, 2016

ghost commented Dec 18, 2016

Wscats commented Dec 18, 2016

GreenMelon commented Dec 18, 2016

HeftyKoo commented Dec 22, 2016

flynntsc commented Dec 28, 2016

flynntsc commented Dec 28, 2016

HeftyKoo commented Dec 28, 2016 • edited by Wscats Loading

specialCoder commented Jan 17, 2017 • edited by Wscats Loading

Joephy2012 commented Mar 2, 2017

radicalviva commented Mar 30, 2017 • edited by Wscats Loading

jiao852jiujiu commented Jun 17, 2017

kokpapa commented Sep 5, 2017

huchenh commented Oct 9, 2017

yunbiji commented Mar 30, 2018

plane-hjh commented Apr 1, 2018

LiuL0703 commented Apr 8, 2018

LiuL0703 commented Apr 8, 2018

AdamssBryan commented Apr 10, 2018 • edited Loading

refanbanzhang commented Oct 11, 2018 • edited Loading

zpj4206 commented Nov 28, 2018

huchenh commented Dec 11, 2018 via email • edited by Wscats Loading

tanf1995 commented Jan 12, 2019 • edited by Wscats Loading

ZSH0A0 commented Feb 13, 2019 • edited Loading

tanf1995 commented Feb 21, 2019 via email

Rotten-Egg commented Nov 27, 2019

zhelingwang commented Jul 23, 2020

Wscats commented Oct 13, 2016 •

edited

Loading

Wscats commented Nov 5, 2016 •

edited

Loading

HeftyKoo commented Dec 28, 2016 •

edited by Wscats

Loading

specialCoder commented Jan 17, 2017 •

edited by Wscats

Loading

radicalviva commented Mar 30, 2017 •

edited by Wscats

Loading

AdamssBryan commented Apr 10, 2018 •

edited

Loading

refanbanzhang commented Oct 11, 2018 •

edited

Loading

huchenh commented Dec 11, 2018 via email •

edited by Wscats

Loading

tanf1995 commented Jan 12, 2019 •

edited by Wscats

Loading

ZSH0A0 commented Feb 13, 2019 •

edited

Loading