一種深拷貝的解決思路

背景

最近在作數據處理的過程當中,遇到一個問題,以下:
後臺傳遞過來一組數據 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,我心慌啊,原數據怎麼能亂動呢,要是它主人追究怎麼辦?我又弱又餓,跑不過也打不過,冥思苦想,有了第二種思路。code

二、用 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 至關於數組的淺拷貝,若是數組中的元素是基本類型,那就能夠經過它來實現拷貝。字符串

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

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

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 的使用。引用

相關文章
相關標籤/搜索