javascript的深复制和浅复制(深度拷贝和浅拷贝)

时间:2022-10-28 19:52:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js深度复制浅显复制</title>
</head>
<body>
<h1>js的深复制和浅复制</h1>
<h2>深复制和浅复制最根本的区别在于是否是真正获取了一个对象的复制实体,而不是引用,
1)深复制在计算机中开辟了一块内存地址用于存放复制的对象,
  2)而浅复制仅仅是指向被复制的内存地址,如果原地址中对象被改变了,那么浅复制出来的对象也会相应改变</h2>
<h2>因为浅复制只会将对象的各个属性进行依次复制,并不会进行递归复制,而 JavaScript 存储对象都是存地址的,所以浅复制会导致xin 和 jiu 指向同一块内存地址。</h2>
<p>JS中对象分为基本类型和复合(引用)类型,基本类型存放在栈内存,复合(引用)类型存放在堆内存。</p>
<p>堆内存用于存放由new创建的对象,栈内存存放一些基本类型的变量和对象的引用变量</p>
<p>而对于对象这种内存占用比较大的来说,直接让复制的东西等于要复制的,那么就会发生引用,因为这种复制,只是将复制出来的东西的指向指向了要复制的那个东西,简单的说,就是两个都同时指向了一个空间,如果改变其中一个,另一个也会发生变化。这就发生了引用。</p>
<p>引用只发生在对象的身上</p>
<p>那么对于数组,ES6我们复制有新的两种方法,不会发生引用。</p>
<p>Array.from(要复制的数组);</p>
<p>es6 复制方法1 </p>
<p>
<pre>
var arr1=[1,2,3];
var arr2=Array.from(arr1);
arr1.push(4);
alert(arr1);  //1234
alert(arr2);  //123
arr2.push(5);
alert(arr1);  //1234
alert(arr2);  //1235
</pre>
</p>
<p>方法2</p>
<p> var arr1=[1,2,3];
var arr2=[...arr1];</p>
<p>方法3或者是通过循环来复制:</p>
<p> for(var name in json1){
  json2[name]=json1[name];
}</p>
<script type="text/javascript">
// 直接拷贝的方法是浅拷贝
    var old = [1,2,3,4];
    var mynew = old;
    mynew[0]="11";
    console.log("老的数组是"+old); //[1,2,3,4];
    console.log("新的是"+mynew); //[1,2,3,4];
    // 这是浅复制,因为 新的和老的数组都是 一样改变的;
    // 当我们不想改变原来的数组的时候,可以使用js 自带的slice 和concat 等  他们 操作过后 原来的数组还是不变的
     //例如
     var oldarr = [1,2,3,4,5];
     var newarr = oldarr.slice(0,2);
     console.log("原来的数组是"+oldarr);// [1,2,3,4,5];
     console.log("新数组是"+newarr);//[1,2]
  // 对象de深浅拷贝
var a={name:'yy',age:26};
var b=new Object();
b.name=a.name;
b.age=a.age;
a.name='xx';
console.log(b);//Object { name="yy", age=26}
console.log(a);//Object { name="xx", age=26}


</script>
</body>
</html>