JavaScript中浅拷贝和深拷贝的区别和实现

wenshi11019 发布于2019-08-23 12:10 / 3419人阅读

摘要：要理解中浅拷贝和深拷贝的区别，首先要明白的数据类型有两种数据类型，基础数据类型和引用数据类型基础数据类型保存在栈内存中的简单数据段，有，，，，引用数据类型，对象，保存在堆内存空间中存放在栈内存中与变量名与内存地址存储在栈内存中，与作为对象存

要理解 JavaScript中浅拷贝和深拷贝的区别，首先要明白JavaScript的数据类型

JavaScript有两种数据类型，基础数据类型和引用数据类型

基础数据类型：保存在栈内存中的简单数据段 ，有undefined，boolean，number，string，null
引用数据类型：Array，对象，Function  保存在堆内存空间中

var a1 = 0; var a2 = "this is str"; var a3 = null 存放在栈内存中
var c =[1,2,3] 与 var d = {m:20} 变量名与内存地址存储在栈内存中，[1,2,3]与{m:20} 作为对象存储在堆内存中

基础数据类型的复制（如var a = 20 var b = a）

引用数据类型的复制 ( var m ={a:10, b:20} var n = m)

解释：
m与n指向同一个内存空间，当m或者n改变时，另一个也跟着改变
如m.a = 80 ; console.log(n.a) // 80

怎么样使引用数据类型有各自独立的内存空间？

一、采用递归的方法复制拷贝对象

    function deepclone(obj) {
        let objClone = Array.isArray(obj) ? [] : {};
        if (obj && typeof obj === "object") {
            for (key in obj) {
                //if (obj.hasOwnProperty(key)) {   //也可以不加
                    if (obj[key] && obj[key] === "object") {
                        objClone[key] = deepclone(obj[key])
                    } else {
                        objClone[key] = obj[key]
                    }
                //}
            }
        }
        return objClone
    }
    var a = [1, 2, 3, 4];
    var b = deepclone(a);
    a[0] = 8
    console.log(a, b);

   Array.isArray(obj)：ECMAScript 5.1 (ECMA-262)   考虑到的兼容性，可以用下面的方法实现较好的兼容
   if (!Array.isArray) {
      Array.isArray = function(arg) {
    return Object.prototype.toString.call(arg) === "[object Array]";
     };
}

二、用JSON.stringify把对象转成字符串，再用JSON.parse把字符串转成新的对象。

   function deepclone(obj){
      var _obj = JSON.stringify(obj);
      var cloneObj = JSON.parse(_obj);
      return cloneObj
    }
    var a =[1,2,3,4];
    var b= deepclone(a);
    a[0]=8
    console.log(a,b);
    //可以用JSON.stringify与JSON.parse实现深拷贝的原因是JSON.stringify(obj)转换成字符串，变成基本数据类型，基本类型拷贝是直接在栈内存新开空间，直接复制一份名-值，不影响之前的对象

总结：

浅拷贝（shallow copy）：只复制指向某个对象的指针，而不复制对象本身，新旧对象共享一块内存；

深拷贝（deep copy）：复制并创建一个一摸一样的对象，不共享内存，修改新对象，旧对象保持不变；实现深拷贝主要有2种方法

（1）递归

（2）JSON.stringify结合JSON.parse

微信公众号：前端之攻略
发布前端与设计有关的内容，请扫描下面二维码

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98031.html

关于JavaScript的浅拷贝和深拷贝

摘要：引用类型值引用类型值是保存在堆内存中的对象，变量保存的只是指向该内存的地址，在复制引用类型值的时候，其实只复制了指向该内存的地址。前言要理解 JavaScript中浅拷贝和深拷贝的区别，首先要明白JavaScript的数据类型。JavaScript有两种数据类型，基础数据类型和引用数据类型。js的基本类型：undefined，null，string，boolean，number,s...

shenhualong 2019-08-26 12:23 评论0 收藏0
js中的浅拷贝深拷贝深入理解

摘要：举个例子来说明一下什么是浅拷贝什么是深拷贝浅拷贝得出的结果可以看出是浅拷贝非对象的属性值一个改变不影响另一个的值对象属性是引用赋值所以一个改变会影响另一个的改变出现这种情况的本质是对象是按引用赋值的深拷贝指的是拷贝一个对象，改变一个值不影响举个例子来说明一下什么是浅拷贝什么是深拷贝浅拷贝 var x = { a: 1, b: {f: { g: 1 ...

lastSeries 2019-08-21 16:43 评论0 收藏0
JS程序

摘要：设计模式是以面向对象编程为基础的，的面向对象编程和传统的的面向对象编程有些差别，这让我一开始接触的时候感到十分痛苦，但是这只能靠自己慢慢积累慢慢思考。想继续了解设计模式必须要先搞懂面向对象编程，否则只会让你自己更痛苦。 JavaScript 中的构造函数学习总结。知识只有分享才有存在的意义。是时候替换你的 for 循环大法了~ 《小分享》JavaScript中数组的那些迭代方法~ ...

melody_lql 2019-08-22 11:22 评论0 收藏0
JavaScript系列--浅析JavaScript解析赋值、浅拷贝和深拷贝的区别

摘要：它将返回目标对象。有些文章说是深拷贝，其实这是不正确的。深拷贝相比于浅拷贝速度较慢并且花销较大。拷贝前后两个对象互不影响。使用深拷贝的场景完全改变变量之后对没有任何影响，这就是深拷贝的魔力。一、赋值（Copy）赋值是将某一数值或对象赋给某个变量的过程，分为： 1、基本数据类型：赋值，赋值之后两个变量互不影响 2、引用数据类型：赋址，两个变量具有相同的引用，指向同一个对象，相互之间有...

laznrbfe 2019-08-26 13:48 评论0 收藏0
JavaScript之浅、深拷贝

摘要：前言里面浅拷贝和深拷贝是非常关键的知识点，今天就来通过本文清楚的了解深浅拷贝以及该如何实现这两种拷贝方式。对象的拷贝又分为浅拷贝和深拷贝。印证了上述所说的对于所有的基本类型，简单的赋值已经是实现了深拷贝。前言 JavaScript里面浅拷贝和深拷贝是非常关键的知识点，今天就来通过本文清楚的了解深浅拷贝以及该如何实现这两种拷贝方式。深浅拷贝的区别拷贝：其实就是一个对象复制给另外...

leanxi 2019-08-26 10:37 评论0 收藏0