<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> // 浅拷贝 // 1、基本的赋值 = let a = [0, 1, 2, 3, 4], b = a; console.log(a === b); //true a[0] = 1; console.log(a, b); //[1,1,2,3,4] // 2、Object.assing() let obj = { name: 'chen', age: '18' } let obj2 = { hobby: 'music' } let obj3 = Object.assign(obj2, obj) console.log(obj3) console.log(Object.assign({}, obj)) // 深拷贝 let test = { name: 'chen', message: { age: '18', } } let test2 = {} // 1、封装函数 function deepClone(newObj, oldObj) { for (var k in oldObj) { let item = oldObj[k]; if (item instanceof Array) { // 先判断是否是数组 newObj[k] = []; deepClone(newObj[k], item) } else if (item instanceof Object) { // 再判断是否是对象 newObj[k] = {}; deepClone(newObj[k], item) } else { // 基本的数据类型就直接赋值即可 newObj[k] = item } } } deepClone(test2, test) console.log(test2) test2.message.age = '20' console.log('--', test); console.log('--', test2); // 2、除了递归，我们还可以借用JSON对象的parse和stringify let o1 = { name: 'chen', message: { age: '18', } } let o2 = JSON.parse(JSON.stringify(test)) o2.message.age = '20' console.log('o2--', o2); console.log('o1--', o1); // 3.除了上面两种方法之外，我们还可以借用JQ的extend方法。 需要依赖JQ库。 $.extend([deep], target, object1[, objectN]) // deep表示是否深拷贝，为true为深拷贝，为false，则为浅拷贝 // target Object类型 目标对象，其他对象的成员属性将被附加到该对象上。 // object1 objectN可选。 Object类型 第一个以及第N个被合并的对象。 let a = [0, 1, [2, 3], 4]; b = $.extend(true, [], a); a[0] = 1; a[2][0] = 1; console.log(a, b); // 4、slice var arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G']; var aCopy = arr.slice(); //没有参数表示从头截取到尾部 console.log(aCopy); // ['A', 'B', 'C', 'D', 'E', 'F', 'G'] console.log(aCopy === arr); // false arr[0] = 'a' aCopy[0]='1' console.log(arr); // false console.log(aCopy); // false </script> </body> </html>