1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>数组的深拷贝与浅拷贝</title>
7 </head>
8 <body>
9 <script>
10 //数组的浅拷贝
11 var arr1= [1,23,5,1,3];
12 var arr2 = arr1;
13 arr1[0] = 99;
14 console.log(arr1[0]);
15 console.log(arr2[0]);
16 console.log(arr1);
17 console.log(arr2);
18 //数组的深拷贝
19 var arr3 = arr1.concat(); //连接数组，如果连接的是一个空，那么也是返回了新的本身的数组
20 console.log(arr3);
21 arr1[0]= 100;
22 console.log("arr1: "+arr1[0]);
23 console.log("arr3: "+arr3[0]);
24 console.log("arr1: "+arr1);
25 console.log("arr3: "+arr3);
26
27 var arr4 = arr1.slice(0); //从0开始到末尾截取数组，然后返回一个新的数组
28 arr1[0]= 88;
29 console.log("arr1: "+arr1[0]);
30 console.log("arr4: "+arr4[0]);
31 console.log("arr1: "+arr1);
32 console.log("arr4: "+arr4);
33
34 var arr5 = arr1.map(function(value){ //使用map方法遍历数组然后返回新的数组，里面的值不变
35 return value;
36 })
37 arr1[0]= 77;
38 console.log("arr1: "+arr1[0]);
39 console.log("arr5: "+arr5[0]);
40 console.log("arr1: "+arr1);
41 console.log("arr5: "+arr5);
42
43 var [...arr6] = arr1//ES6扩展运算符实现数组的深拷贝
44 arr1[0]= 66;
45 console.log("arr1: "+arr1[0]);
46 console.log("arr6: "+arr6[0]);
47 console.log("arr1: "+arr1);
48 console.log("arr6: "+arr6);
49
50 </script>
51 </body>
52 </html>
