JavaScript浅拷贝和深拷贝 javascript

想要讲明白 JS 中对象的浅拷贝和深拷贝，需要从它的数据类型说起。

JavaScript中的数据类型一般我们说到JS的数据类型指的是它的原始(Primitive types)数据类型(共有6种)：

String
Number
Boolean
Symbol(ES6新增)
Null
Undefined

这些类型可以直接操作保存在变量中的实际值。
此外，JS中还有引用数据类型：对象(Object)、数组(Array)、函数(Function)。在JS中除了基本数据类型以外的都是对象，数组是对象，函数是对象，正则表达式是对象，日期也是对象...
栈(stack)和堆(heap) stack为自动分配的内存空间，它由系统自动释放；而heap则是动态分配的内存，大小不确定。
基本数据类型是指存放在栈中的简单数据段，数据大小确定，内存空间大小可以分配，它们是直接按值存放的，所以可以直接按值访问:

var a = 10; var b = a; b = 20; console.log(a); // 10 console.log(b); // 20

被重新赋值的b并没有影响a的值。
引用类型是存放在堆内存中的对象，变量其实是保存的在栈内存中的一个指针（保存的是堆内存中的引用地址），这个指针指向堆内存。

var obj1 = new Object(); var obj2 = obj1; obj2.description = "Hello World"; console.log(obj1.name); // Hello World

说明这两个引用数据类型指向了同一个堆内存对象。
引用传递和值传递在变量复制的过程中，对象的复制是引用传递, 基础类型是值传递。

在将一个保存着原始值的变量复制给另一个变量时，会将原始值的副本赋值给新变量，此后这两个变量是完全独立的，他们只是拥有相同的value而已。
引用值：在将一个保存着对象内存地址的变量复制给另一个变量时，会把这个内存地址赋值给新变量，也就是说这两个变量都指向了堆内存中的同一个对象，他们中任何一个作出的改变都会反映在另一个身上。

浅拷贝 【JavaScript浅拷贝和深拷贝】当我们想要拷贝一个对象时，如果它的属性是对象或数组时，这时候我们传递的也只是一个地址。因此子对象在访问该属性时，会根据地址回溯到父对象指向的堆内存中，即父子对象发生了关联，两者的属性值会指向同一内存空间。

const obj = { name: "bird", abilities: ["fly","sing"]}function copy(target){ var objNew ={}; for (var i in target){ objNew[i] = target[i] } return objNew; }const objCopy = copy(obj) console.log(objCopy) // { name: "bird", abilities: ["fly","sing"]}objCopy.name = "bird01" // 修改原始类型的属性 console.log(objCopy) // {name: 'bird01', abilities: ["fly","sing"]}objCopy.abilities.push("lay eggs") // 修改引用类型的属性 console.log(objCopy) // {name: 'bird01', abilities: ["fly","sing", 'lay eggs']}console.log(obj) //{name: 'bird', abilities: ["fly","sing", 'lay eggs']}

可以看到obj的abilities属性随着objCopy的改变而改变，两个对象之间发生了关联。需要注意的是Object.assign()或者是Spread Operator都是浅拷贝：

const obj = { name: "bird", abilities: ["fly","sing"]} const objCopy = Object.assign({}, obj) // { name: "bird", abilities: ["fly","sing"]} objCopy.abilities.push("lay egg") console.log(obj) // { name: "bird", abilities: ["fly","sing","lay egg"]}const objCopy2 = {...obj} // { name: "bird", abilities: ["fly","sing","lay egg"]} objCopy2.abilities.pop() console.log(obj)//{ name: "bird", abilities: ["fly","sing"]}

这样的关联往往不是我们希望看到的，那么就有了深拷贝。
深拷贝使用JSON.parse/stringify可以复制属性中含有数组的情况：

const a = { arr: ["Google","Baidu"]} const clone = JSON.parse(JSON.stringify(a)) clone.arr.pop() console.log(a) // { arr: ["Google","Baidu"]}

可见clone的属性改变已经不再和a发生关联。不过对于其他类型的属性，在这个过程中可能会放生丢失：

const a = { string: 'string', number: 123, bool: false, nul: null, date: new Date(),// stringified undef: undefined,// lost inf: Infinity,// forced to 'null' re: /.*/,// lost }

所以借助一些第三方的库是个不错的选择，比如：

lodash - cloneDeep; can be imported separately via the lodash.clonedeep module and is probably your best choice if you're not already using a library that provides a deep cloning function

在不久以后也许你可以使用structuredClone
2021 update: The structuredClone global function is coming to browsers, Node.js, and Deno soon.
链接