js深拷贝和浅拷贝的方法（js中深浅拷贝）

在js中，数据类型分两种: ‘基本数据类型’ 和 ‘引用数据类型’

js中深浅拷贝

‘基本类型数据’ 存在于 栈内存 中，'引用数据类型’ 的属性存在于 栈内存中，值存在与 堆内存中，通过指针来指向对应值

所以，深浅拷贝主要出现在引用数据类型中

如下图，就是浅拷贝，拷贝出来的变量 copyArray，只是拷贝指针，指向的还是同一个堆内存中的数据，所以，其中一个值改变，另外一个值相应改变

如下图，就是深拷贝，拷贝出来的值，在堆内存中另外开辟空间，存储新值，通过指针指向。当改变新拷贝的值时，原值不会被改变。

JSON.prase( JSON.string() )

var arr = [1,2,3,4,5];var copyArray = JSON.parse( JSON.stringify(arr) );copyArray[0] = 0;console.log( arr  )     // [1, 2, 3, 4, 5]console.log( copyArray ) // [0, 2, 3, 4, 5]

但是 JSON.parse来转译深拷贝，真的就没问题吗？

先多层嵌套，试一下是否还能深拷贝

var arr = [1, [2,3] , {name: '1'} ];var copyArray = JSON.parse( JSON.stringify(arr) );copyArray[1][1] = 0;console.log( arr ); // [1, [2,3] , {name: '1'} ]console.log( copyArray ) ;  // [1, [2,0], {name: "1"} ]

从上面代码可以看出，多层嵌套时，也能深拷贝。当数据里含有function是否可以依然深拷贝？

var obj = { name: "1" , f: function(){ alert(1) } };var copyObj = JSON.parse( JSON.stringify(obj) );console.log( obj ); // {name: "1", f: ƒ}console.log( copyObj ) ;   //  {name: "1"}

从上面代码可以总结出：JSON.parse进行深拷贝时，能够满足部分数据需求，能够进行多层次数据的拷贝，但是会忽略function，undefined，symbo，所以在使用时，要注意数据结构

循环递归深拷贝

function copy( obj ){        // 定义常量        const newCopy = obj.constructor === Array ? [] : {};        // 循环数据        for( var key in obj ){                    // 判断是否有这个变量            if( obj.hasOwnProperty(key) ){                // 判断当前属性是否有值，并且属不属于Array和object (typeOf,不管array还是object都返回object)                if( !!obj[key] && typeof obj[key] === 'object' ){                    // 属于Array或者object，并且有值，调用自身，重新循环                     newCopy[key] = copy(obj[key]);                }else {                    // 不属于或者没值，直接赋值                    newCopy[key] = obj[key]                }            }                    }        // return出深拷贝数据        return newCopy;    };     // 调用一下var demoObj = {     name: {          val:"1",          val2:"2",          val3:"3"     } ,      arr: [1,2,3,4],      f: function(){ alert(2) }}var cloneDemoObj = copy(demoObj);cloneDemoObj.f = function(){   alert(6);}demoObj.f();  // 弹出2cloneDemoObj.f(); // 弹出6cloneDemoObj.arr[0] = 6;cloneDemoObj.name.val = "6";console.log( demoObj );     //  {name: {val:"1",val2:"2",val3:"3"} , arr: [1,2,2,4], f:f{} }console.log( cloneDemoObj); // {name: {val:"6",val2:"2",val3:"3"} , arr: [6,2,2,4], f:f{} }

concat() , slice()，都不改变原数组，新建数据，经测试，只能深拷贝首层数据

var arr = [1,2,3];var copyArr = arr.concat();copyArr[0] = 2;console.log( arr );       // [1, 2, 3]console.log( copyArr  ); //  [2, 2, 3]var arr1 = [1, [1,1,1], 2];var copyArr1 = arr1.concat();copyArr1[0] = 0;copyArr1[1][0] = 0; //深层次数据没有深拷贝，被改变，如下console.log( arr1 );       //  [1, [0,1,1], 2];console.log( copyArr1);    //  [0, [0,1,1], 2];

上面就是小居数码小编今天给大家介绍的关于（js中深浅拷贝）的全部内容，希望可以帮助到你，想了解更多关于数码知识的问题，欢迎关注我们，并收藏，转发，分享。

94%的朋友还想知道的：

• 如何将微信的文章保存为word方法（微信文章如何保存为pdf）
• 分割pdf文件最简单的方法（怎样分割pdf文件）
• pdf文件里面的文字修改方法（pdf里面的文字如何修改）
• ps给衣服换颜色的方法自学教程（ps给衣服换颜色）

（542）个朋友认为回复得到帮助。