JavaScript及ES6|JavaScript高级---（7）浅拷贝与深拷贝 html5|node.js|javascript

一、浅拷贝在JavaScript中，分为简单数据类型（数字、字符等）和复杂数据类型（对象、数组等），一般简单数据类型被存储在栈内存；而复杂数据类型存储在堆内存，其地址存储在栈内存里面。
所以一般将复杂数据类型赋值给其他变量的时候，一般是将其地址复制，如果对赋值后的数据进行操作，很容易改变原本的复杂数据类型。
我们举个例子，首先定义一个对象，里面有两个简单数据类型和另一个对象

var obj = {id: 1, name: "andy", msg: {age: 18 // 将地址拷贝 } }; var o = { }; for (var k in obj) {// k是属性名 o[k] = obj[k]; } console.log(o); o.msg.age = 20; console.log(o); console.log(obj);

【JavaScript及ES6|JavaScript高级---（7）浅拷贝与深拷贝】我们先打印对象o，发现赋值完成：

文章图片

接下来我们仅改变对象o里面age的属性，观察两个对象的age属性。

文章图片

我们明明只改变了o的age，为什么obj的也会随着改变呢？这是因为在浅拷贝的情况下，里面复杂数据类型的赋值是地址的值传递，修改一个对象的同时，另一个对象也会改变。下面这张图可以更直观的理解。

文章图片

js（es6）也为我们提供了浅拷贝的语法糖，同样可以实现浅拷贝，语法如下：
Object.assign(target, …sources)

Object.assign(o, obj); o.msg.age = 20; console.log(o); console.log(obj);

二、深拷贝深拷贝很简单理解了，就是将赋值后的每一个变量都单独指向，与原先的数据脱离，不再公用变量。
下图有助你的理解：

文章图片

原生JS递归实现深拷贝：

var obj = {id: 1, name: "andy", msg: {age: 18 }, color: ['red', 'pink']}; var o = { }; // 递归实现深拷贝 function deepCopy(newObj, oldObj) {for (var key in oldObj) {// 判断数据类型 item = oldObj[key]; if (item instanceof Array) {newObj[key] = []; deepCopy(newObj[key], item); } else if (item instanceof Object) {newObj[key] = { }; deepCopy(newObj[key], item); } else {newObj[key] = item; } } } deepCopy(o, obj); o.msg.age = 19; console.log(o); console.log(obj);