一種深拷貝的解決思路

背景

最近在作數據處理的過程當中，遇到一個問題，以下：
後臺傳遞過來一組數據 Array，每一個數組元素裏面又包含了子對象，我要對這組數據進行處理，可是不想影響到原數組，同時原數組可能會要進行多個方向的數據格式化，爲了渲染不一樣的界面。

原始數據

let data = [
    {
        id: 1,
        name: 'luoxue',
        age: 25
    },
    {
        id: 2,
        name: 'kk',
        age: 22
    },
    {
        id: 3,
        name: 'qiuxia',
        age: 22
    }
];

處理方案

一、直接用 = 賦值

let myData = data; // 我要的數據
let yourData = data; // 你要的數據
myData[0].name = 'luoxue-xu'; // 我要修改爲個人名字
yourData[0].name = 'kk-z'; // 你要修改爲你的名字
console.log(data[0].name); // kk-z

無論是對 myData 仍是對 yourData 操做，都改變了原來的 data，我心慌啊，原數據怎麼能亂動呢，要是它主人追究怎麼辦？我又弱又餓，跑不過也打不過，冥思苦想，有了第二種思路。

二、用 slice 來實現數組的拷貝，先試試

let myData = data.slice(0); // 傳入0 表示截取所有
let yourData = data.slice(0); // 你家的
myData[0].name = 'luoxue-xu'; // 我要修改爲個人名字
console.log(data[0].name); // luoxue-xu

看到結果我又懵了，你這是幾個意思啊，我死了兩千多個腦細胞纔想出來的思路，居然仍是會改變，查詢的資料顯示 slice 確實能夠實現拷貝而不改變原數組的功能啊，難道看漏了。
再認真看了遍資料，有點思緒，slice 雖然返回的是一個新數組，可是元素若是是對象，該引用的仍是引用，原來如此。
slice 至關於數組的淺拷貝，若是數組中的元素是基本類型，那就能夠經過它來實現拷貝。

江湖走馬，風也好，雨也罷 ------《道君》

三、用 JSON 轉，先轉字符串，再轉回對象

let myData = JSON.parse(JSON.stringify(data)); // 我家的
let yourData = JSON.parse(JSON.stringify(data)); // 你家的
yourData[0].name = 'kk-z'; // 你名字帶走
console.log(data[0].name); // luoxue

咦，還有點靠譜的樣子，居然能夠，這麼簡單，不會有什麼坑吧，先用着試試，不過 jQuery.extend 也能夠實現，難道它也是這樣作的，不太可能，再思考思考。

四、本身寫個深拷貝的函數 clone

const clone = (b) => {
  if(Array.isArray(b)) {
    // 數組拷貝
    let obj = [];
    for(let i = 0; i < b.length; i++) {
      obj[i] = clone(b[i]);
    }
    return obj;
  }else if(b instanceof Object) {
    // 對象拷貝
    let obj = {};
    for(let attr in b) {
      obj[attr] = clone(b[attr]);
    }
    return obj;
  }else {
    return b;
  }
}
let myData = clone(data); // 我家的
let yourData = clone(data); // 仍是我家的
yourData[0].name = 'luoxue-kk'; // 仍是我家的
console.log(data[0].name); // 返回什麼，不告訴你，雖然報錯了.

有空能夠研究一下 Object.assign 的使用。