浅拷贝和深拷贝理解
如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>简单数据的拷贝</title> 9 <script src="../lib/jquery.min.js"></script> 10 </head> 11 12 <body> 13 <script> 14 // 定义一个数组 15 var numbers = [1, 2, 3, 4, 5, { name: 'chenbin' }] 16 17 // 三个浅拷贝方法 18 // 1、使用Array.map()方法实现数据浅拷贝 19 // var Mapcopy = numbers.map(num => num) 20 // Mapcopy.push(6) 21 // console.log(Mapcopy); // [1, 2, 3, 4, 5, {name:'chenbin'}, 6] 22 // console.log(numbers); // [1, 2, 3, 4, 5, {name:'chenbin'}] 23 // numbers[5].name = 'hhh' // 改变数组中的数据 24 // console.log(Mapcopy); // [1, 2, 3, 4, 5, {name:'hhhhh'}, 6] 25 // console.log(numbers); // [9, 2, 3, 4, 5,{name:'hhhhh'}] 26 27 28 // 2、使用Array.from()方法实现数据浅拷贝 29 // let Fromcopy = Array.from(new Set(numbers)) 30 // Fromcopy.push(6) 31 // console.log(Fromcopy); // [1, 2, 3, 4, 5, {name:'chenbin'}, 6] 32 // console.log(numbers); // [1, 2, 3, 4, 5, {name:'chenbin'}] 33 // numbers[5].name = 'ccc' // 改变数组中的数据 34 // console.log(Fromcopy); // [1, 2, 3, 4, 5, {name:'ccc'}, 6] 35 // console.log(numbers); // [1, 2, 3, 4, 5, {name:'ccc'}] 36 37 38 // 3、 使用apply()方法实现数据浅拷贝 39 // let ApplyCopy = [] 40 // Array.prototype.push.apply(ApplyCopy,numbers) 41 // console.log(ApplyCopy); // [1, 2, 3, 4, 5, {name: "chenbin"}] 42 // console.log(numbers); // [1, 2, 3, 4, 5, {name: "chenbin"}] 43 // numbers[5].name='bbb' // 改变数组中的数据 44 // console.log(ApplyCopy); // [1, 2, 3, 4, 5, {name: "bbb"}] 45 // console.log(numbers); // [1, 2, 3, 4, 5, {name: "bbb"}] 46 47 // 三个实现深拷贝的方法 48 49 // 1、 使用递归的方式实现深拷贝 50 51 // function deepClone(obj) { 52 // var objClone = Array.isArray(obj) ? [] : {}; 53 // if (obj && typeof obj === "object") { 54 // for (key in obj) { 55 // if (obj.hasOwnProperty(key)) { 56 // if (obj[key] && typeof obj[key] === "object") { 57 // objClone[key] = deepClone(obj[key]); 58 // } else { 59 // objClone[key] = obj[key]; 60 // } 61 // } 62 // } 63 // } 64 // return objClone; 65 // } 66 // var copy = deepClone(numbers) 67 // console.log(copy); // [1, 2, 3, 4, 5, {name:'chenbin'}] 68 // numbers[5].name = 'mmm' 69 // console.log(numbers); // [1, 2, 3, 4, 5, {name:'mmm'}] 70 // console.log(copy); // [1, 2, 3, 4, 5, {name:'chenbin'}] 71 72 // 2、 使用jquery中的方法extend 73 74 // var copy = $.extend(true,[],numbers) 75 // console.log(copy); // [1, 2, 3, 4, 5, {name:'chenbin'}] 76 // numbers[5].name = 'ppp' 77 // console.log(numbers); // [1, 2, 3, 4, 5, {name:'ppp'}] 78 // console.log(copy); // [1, 2, 3, 4, 5, {name:'chenbin'}] 79 80 // 3、lodash函数库实现深拷贝 81 // lodash很热门的函数库，提供了 lodash.cloneDeep()实现深拷贝 82 83 /* 总结： 84 浅拷贝只复制了数据的的指向/路径，并没有复制数据的值。 85 当我们声明了一个对象或者数组，浅拷贝只复制了数据在栈中的地址指向（key），并没有复制值（val） 86 当我们改变数据源的值后，复制后的数据也随之改变 87 88 深拷贝不仅复制了栈中的路径指向，同事在内存中新开辟了一个空间存储新的值，当我们改变数据源的数据后，复制后的数据不会随之改变 89 */ 90 91 92 93 94 95 </script> 96 </body> 97 98 </html>
