JS專題之深淺拷貝
前言
在開發過程中，偶爾會遇到這種場景，拿到一個數據後，你打算對它進行處理，但是你又希望拷貝一份副本出來，方便資料對比和以後恢復資料。
那麼這就涉及到了 JS 中對資料的深淺拷貝問題，所謂深淺拷貝，淺拷貝的意思就是，你只是複製了物件資料的引用，並沒有把記憶體裡的值另外複製一份，那麼深拷貝就是把值完整地複製一份新的值。
在之前的文章《JS專題之資料型別和型別檢測》中我有講過，JS 中的資料型別分為兩種，基本資料型別和引用資料型別，基本資料型別是儲存在棧的資料結構中的,是按值訪問，所以不存在深淺拷貝問題。
而比如物件，陣列，函式，正則，時間物件這些都是引用資料型別，是儲存在堆中的。所以，引用資料型別的複製，是記憶體地址的傳遞，並沒有拷貝出一份新的資料。
那麼深拷貝，淺拷貝的區別是什麼呢？先給結論：
操作拷貝之後的資料不會影響到原資料的值拷貝 ，就是深拷貝，反正，有影響則為淺拷貝。
一、應用場景
日常開發中，JS 拷貝大多會在資料儲存，資料比對，資料同步 時出現，所以，當你在這些場景的時候，要記得裡面隱藏有一個數據深淺拷貝的問題。
二、淺拷貝
我們來看一下淺拷貝：
function clone(origin) {
var result = {};
for (var prop in origin) {
if (origin.hasOwnProperty(prop)) {
result[prop] = origin[prop];
}
}
return result;
}
var jay = {
name: "jayChou",
age: 40,
family: {
wife: "Quinlivan"
}
}
var otherJay = clone(jay);
otherJay.age = 18;
otherJay.family.wife = "otherGirl";
console.log(jay);
//
// {
//name: "jayChou",
//age: 40,// 沒被改變
//family: {
//wife: "otherGirl"// 同時被改變，說明是同一個引用
//}
// }
console.log(otherJay);
//
// {
//name: "jayChou",
//age: 18,
//family: {
//wife: "otherGirl"// 被改變了
//}
// }
我們發現，首先，淺拷貝不是直接賦值 ，淺拷貝新建了一個物件，然後將源物件的屬性都一一複製過來,複製的是值，而不是引用。
我們知道，物件都是按地址引用進行訪問的，淺拷貝的複製只複製了第一層的屬性，並沒有遞迴將所有的值複製過來，所以，操作拷貝資料，對原資料產生了影響，故而為淺拷貝。
進而，那些可以直接返回原陣列的方法就可以簡單實現陣列和物件淺拷貝。
// 1、 陣列淺拷貝 - slice
function shallowCopy1(origin) {
return origin.slice();
}
// 2、 陣列淺拷貝 - concat
function shallowCopy2(origin){
return origin.concat();
}
// 3、 陣列淺拷貝 - 遍歷
function shallowCopy3(origin){
var result = [];
for(var i = 0; i < origin.length; i++) {
result.push(origin[i]);
}
return result;
}
// 4、 物件淺拷貝 - Object.assign
function shallowCopy4(origin) {
return Object.assign({},origin)
}
// 5、 物件淺拷貝 - 擴充套件運算子
// 擴充套件運算子（...）用於取出引數物件的所有可遍歷屬性，拷貝到當前物件之中
function shallowCopy5(origin) {
return {
...origin
}
}
Object.assign 的拷貝，假如源物件的屬性值是一個指向物件的引用，它也只拷貝那個引用值。MDN 有相應的例項和解釋。
二、深拷貝
深拷貝就完整複製資料的值（而非引用），目的在於避免拷貝後資料對原資料產生影響。
目前深拷貝的實現方法主要有遞迴複製，JSON 正反序列化:
// 1. 深拷貝 - JSON 正反序列化
// 缺點就是無法拷貝 undefined、function、symbol 這類特殊的屬性值。
function deepClone1(origin) {
return JSON.parse(JSON.stringify(arr));
}
// 2. 深拷貝 - 遞迴;
function deepClone2(origin) {
const result = origin.constructor === Array ? [] : {};
for (let keys in origin) {
// 不遍歷原型鏈上的屬性
if (origin.hasOwnProperty(keys)) {
if (origin[keys] && typeof origin[keys] === "object") {
// 如果值是物件，就遞迴一下, 區分是一般物件還是陣列物件
result[keys] = origin[keys].constructor === Array ? [] : {};
// 如果是引用資料型別，會遞迴呼叫
result[keys] = deepClone(origin[keys]);
} else {
// 如果不是，就直接賦值
result[keys] = origin[keys];
}
}
}
return result;
}
JS 的深拷貝的應用，需要根據你的使用場景進行使用，首先是有無必要深拷貝，其次是資料型別，是否直接使用 JSON 的 API 其實就可以。
JS 深淺拷貝在日常開發中使用頻率還是較高的，其中考察的知識點，主要在於：
1、是否遇到過深淺拷貝的問題，裡面有什麼坑
2、是否瞭解 JS 的資料型別，資料在計算機中的儲存機制
3、是否瞭解陣列、物件的一些常用的 API
4、jquery、lodash、underscore 的相關工具函式使用
總結
深淺拷貝主要考察了開發者對 JS 資料型別的瞭解，陣列，物件常用方法的特點和應用，遞迴函式的封裝。
春節快樂！