前文JavaScript由什么组成中讲述了JavaScript 的数据类型分为根本类型和援用类型，而辨别两则的根据是根本类型是”轻量“的，它存在栈内存中，而援用类型比拟重，它存在堆内存重。所以当根本类型拷贝时，能间接拷贝，援用类型拷贝时，拷贝的不是对象（援用类型有且只有一个数据类型——对象），而是该对象在内存中的地址
在所有皆对象中，咱们已经清晰地表白一个观点，在 JavaScript 的世界里，除去 undefined、null外，所有皆对象。对象在应用过程中频繁用到的一点是赋值拷贝，而当你拷贝出错时，状况会很蹩脚。所以咱们这节就是为解说对象中的拷贝而生
注释
首先 JavaScript 没有不可变数据结构，不可变数据结构是函数式编程中必备的
可变的益处是节俭内存或是利用可变性做一些事件，然而在简单的开发中它的副作用远比益处大得多，于是有了浅拷贝和深拷贝
笔者这里有几个自问自答的解释
对象为什么是拷贝地址？
- 为了性能（节俭内存），试想如果每个对象都是拷贝值，那对象一大/多，占用的内存就会几何回升
如何拷贝对象的值
- Object.assign
- 扩大运算符
- slice（数组办法）
- concat（数组办法）
- JSON.stringify
这五种办法都能拷贝对象的值，而前四者是浅拷贝，JSON.stringify 是深拷贝
什么是浅拷贝？什么又是深拷贝？
浅拷贝是创立一个新对象，这个对象对原始对象属性值进行复制
- 属性是根底类型，拷贝的就是根本类型的值，批改内容不影响
- 属性是援用类型，拷贝的就是内存地址，批改内容相互影响
- 深拷贝：整个对象拷贝到另一个内存中，批改内容互不影响
说得直白点，浅拷贝只拷贝一层，深拷贝间接复制对象
为什么要有浅拷贝，间接深拷贝代替不久好了。当然，这个问题同样有网友提出——JS的浅拷贝到底有什么作用？，尽管笔者没找到相干材料，但狐疑还是因为性能，浅拷贝能应酬很多场景，非不必要不必深拷贝。在设计上让开发者少用，无形中进步开发体验
Object.assign
Object.assign()办法能够把任意多个原对象本身的可枚举属性拷贝给指标对象，而后返回指标对象
它拷贝的是对象的属性的援用，而不是对象自身
是 ES6 中 Object 对象新增的办法
参数：
target：指标对象
sources: 任意多个原对象。
返回值：指标对象会被返回
实用对象：Object
案例一：
var obj1 = { a: 10, b: 20, c: 30 };var obj2 = Object.assign({}, obj1);obj2.b = 100;console.log(obj1); // {a: 10, b: 20, c: 30}console.log(obj2); // {a: 10, b: 100, c: 30}案例二：
var obj = { a: { a: 'hello', b: 21 } };var initialObj = Object.assign({}, obj);initialObj.a.a = 'changed';console.log(obj.a.a); // "change"能够看出，Object 只能拷贝第一层对象，如果再往深一层拷贝，就有问题了。所以Object.assign 是浅拷贝
扩大运算符（...）
扩大运算符，能够在函数调用/数组结构时，将数组表达式或者 string 在语法层面开展；还能够在结构字面量对象时，将对象表达式按 key-value 的形式开展
城然，咱们都晓得开展运算符的作用并不是为了拷贝。但无可非议，浅拷贝也是开展运算符的性能点之一
实用对象：Object/Array
案例一：一维数组
var arr = [1, 2, 3];var arr2 = [...arr];arr2.push(4);// arr2 [1, 2, 3, 4]// arr1 不受影响案例二：多维数组
var a = [ [1, 2], [3, 4], [5, 6],];var b = [...a];b.shift().shift();// b [[3, 4], [5, 6]]// a [[2], [3, 4], [5, 6]]扩大运算符也是浅拷贝
slice
slice() 办法返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的原数组的浅拷贝（包含 begin不包含 end ）。原始数组不会被扭转
实用对象：Array
案例：
const family = [ 'father', 'mother', 'brother', ['sister0', 'sister1', 'sister2'],];const copyFamily = family.slice();copyFamily[0] = 'father1';copyFamily[3][1] = 'brother1';console.log(family); // ['father', 'mother', 'brother', ['sister0' , 'brother1', 'sister2']]console.log(copyFamily); // ['father1', 'mother', 'brother', ['sister0' , 'brother1', 'sister2']]// 复制一层，第二层开始援用如上案例，slice 只能复制一层，第二层就是复制援用地址了，slice 也是浅拷贝
concat
concat() 办法用于合并两个或多个数组。此办法不会扭转现有数组，而是返回一个新数组
实用对象：Array
const array1 = ['a', 'b', ['c0', 'c1', 'c2']];const array2 = array1.concat();array2[1] = 'B';array2[2][1] = 'C1';console.log(array1); // ['a', 'b', ['c0', 'C1', 'c2']]console.log(array2); // ['a', 'B', ['c0', 'C1', 'c2']]// 复制一层，第二层开始援用concat 同 slice，都是针对数组的浅拷贝
如何实现浅拷贝
简略来说，浅拷贝只复制一层对象的属性
hasOwnProperty 的作用是判断对象本身属性中是否具备指定的属性
function shallowClone(source) { if (typeof target === 'object' && target !== null) { var target = Array.isArry(source) ? [] : {}; for (let prop in source) { if (source.hasOwnProperty(prop)) { target[prop] = source[prop]; } } return target; } else { return source; }}综上剖析，JavaScript 的浅拷贝有 4 种，针对数组的浅拷贝有 slice、concat，针对对象的 Object.assign() ，还有就是实用数组和对象的扩大运算符(...)
深拷贝的原理
浅拷贝只是创立一个新的对象，复制了原有对象的根本类型的值，而援用类型只拷贝了一层属性，再深层的就无奈拷贝。深拷贝则不同，它会在堆内存中开拓一块内存地址，将原有对象齐全复制过去
深拷贝的是将一个对象从内存中残缺地拷贝进去一份给指标对象，并从堆内存中开拓一个全新的空间寄存新对象，且新对象的批改并不会扭转元对象，二者实现真正的拆散
简略演绎：深拷贝是递归复制了所有层级中对象的属性
JSON.stringify
var arr = [1, 2, 3, 4, { value: 5 }];var arr1 = JSON.parse(JSON.stringify(arr));arr[4].value = 6;console.log(arr1); //[1, 2, 3, 4, { value: 5 }]var obj = { name: "johan", address: {city: "shanghai"}}var obj1 = JSON.parse(JSON.stringify(obj));obj.address.city = "beijing";console.log(obj1); //{name: "johan", address:{city: "shanghai"}尽管 JSON.stringify 能实现对数组和对象的深拷贝，但它却又几个坑
- 它无奈实现对函数、RegExp 等非凡对象的克隆
- 它会摈弃对象的 constructor，所有的构造函数会指向 Object
- 对象有循环援用，会报错
咱们来测试一下这几个坑，
// 构造函数function Person(name) { this.name = name;}const Elaine = new Person('elaine');// 函数function say() { console.log('hi');}const oldObj = { a: say, b: new Array(1), c: new RegExp('ab+c', 'i'), d: Elaine,};const newObj = JSON.parse(JSON.stringify(oldObj));// 无奈复制函数console.log(newObj.a, oldObj.a); // undefined [Function: say]// 稠密数组复制谬误console.log(newObj.b[0], oldObj.b[0]); // null undefined// 无奈复制正则对象console.log(newObj.c, oldObj.c); // {} /ab+c/i// 构造函数指向谬误console.log(newObj.d.constructor, oldObj.d.constructor); // [Function: Object] [Function: person]咱们能够看到在对函数、正则对象。稠密数组等对象克隆时会发生意外，构造函数指向也会产生谬误
const oldObj = {};oldObj.a = oldObj;const newObj = JSON.parse(JSON.stringify(oldObj));console.log(newObj.a, oldObj.a); // TypeError: Converting circular structure to JSON对象的循环援用回抛出谬误
JSON.stringify 深拷贝能解决事实中的大部分场景，但缺点也让其成了面试中的常客，当初咱们挑战下手写深拷贝
手写深拷贝
深拷贝的要领是递归+深拷贝
咱们先实现一个针对数组和对象的深拷贝
function deepClone(source) { // 针对根本数据类型 if (typeof source !== 'object' || source === null ) { return source } // 判断它是数组还是对象 // 或者 let target = source instanceof Array ? [] : {} let target = Array.isArray(source) ? [] : {} // 循环遍历复制每个属性 for (let prop in source) { // 自有属性才做拷贝 if (source.hasOwnProperty(prop)) { // 判断自有属性是否是对象 target[prop] = typeof source[prop] === 'object' ? deepClone(source[prop]) : source[prop] } } return target}以上是简略的深拷贝，与 JSON.stringify 的深拷贝成果大差不差。它们同样存在的毛病是：
- 对蕴含循环援用的对象（对象之间相互援用，造成有限循环）执行此办法，会抛出谬误
- 以 Symbol 类型为属性值的属性都会被疏忽掉
- 短少针对其余的内置构造函数的兼容，如 Function、RegExp、Date、Set、Map
咱们应用 WeakMap 来解决循环援用，如要其余数据类型，加上便是
这里阐明一下为什么用 WeakMap 来解决循环援用，以及它与 Map 的区别
要想解决循环援用问题，能够额定开拓一块存储空间，来存储以后对象和拷贝对象的对应关系，当拷贝时，先从空间中找，找到间接返回，没有的话失常拷贝
而这类数据结构能够用 map、WeakMap 。两者的区别在于
- WeakMap 对象是一组键/值对的汇合，其中的键是弱援用。其键必须是对象，而值能够是人始终。Map的键能够是人始终，包含函数、对象或任意根本类型
- WeakMap 是弱援用，能够被垃圾回收。Map 的键与内存绑定
- Map 能够被遍历，WeakMap 不能被遍历
简略来说，因为 WeakMap 是弱援用，所以在没有其余援用存在时垃圾回收能失常进行
function deepClone(source, storage = new WeakMap()) { // 针对根本数据类型 if (typeof source !== 'object' || source === null) { return source } // 是否是日期 if (source.constructor === Date) { return new Date(source) } // 是否是正则 if (source.constructor === RegExp) { return new RegExp(source) } // 是否是数组 let target = source instanceof Array ? [] : {} // 循环援用 返回存储的援用数据 if (storage.has(source)) return storage.get(source) // 开拓存储空间设置长期存储值 storage.set(source, target) // 是否蕴含 Symbol 类型 let isSymbol = Object.getOwnPropertySymbols(source) // 蕴含 Symbol 类型 if (isSymbol.length) { isSymbol.forEach((item) => { if (typeof source[item] === 'object') { target[item] = deepClone(source[item], storage); return } target[item] = source[item] }) } // 不蕴含 Symbol for(let key in source) { if (source.hasOwnProperty(key)) { target[key] = typeof source[key] === 'object' ? deepClone(sourcep[key], storage) : source[key] } } return target;}笔者的这个深拷贝必定不是最全的，非大佬写出的让面试官惊艳的深拷贝可比。笔者只能说提供一丢丢深拷贝的思路
总结
深拷贝是前端面试中必考的一项，他若问你怎么手写，你若是只写了 JSON.parse(JSON.stringify(source))必定是不合格的。写 hasOwnProperty 也只能靠边站，而如果解决循环援用、Symbol、各个数据类型拷贝等问题，能力阐明你明确了深拷贝
参考资料
- 应用 slice 和 concat 对数组的深拷贝和浅拷贝
- 如何写出一个惊艳面试官的深拷贝
- 闲庭信步聊前端 - 一文摸清 ES 拷贝的深浅
- 如何写出一个惊艳面试官的深拷贝?
系列文章
- 深刻了解JavaScript-开篇
- 深刻了解JavaScript-JavaScript 是什么
- 深刻了解JavaScript-JavaScript 由什么组成
- 深刻了解JavaScript-所有皆对象
- 深刻了解JavaScript-Object（对象）
- 深刻了解JavaScript-new 做了什么
- 深刻了解JavaScript-Object.create