最近在作數據處理的過程當中,遇到一個問題,以下:
後臺傳遞過來一組數據 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
的使用。引用