echart圖表開發中發現的JSON.parse(JSON.stringify())問題
阿新 • • 發佈:2020-10-22
現在的專案開發中,許多用到物件拷貝的問題都會使用JSON.parse(JSON.stringify()),最近專案中需要一個圖表如下圖
然而根據echarts官網的demo寫出來的是:
開發出來的效果字型顏色是統一的,而效果圖需要的字型顏色是隨機的,
實現的過程是: 公用方法裡匯出一個cloudTagOption物件,在頁面中通過這種形式複製
activeCloudLabelChart: JSON.parse(JSON.stringify(cloudTagOption))
1 // 匯出的物件 2 export const cloudTagOption = { 3 tooltip: {},4 series: [ 5 { 6 type: 'wordCloud', 7 gridSize: 10, 8 sizeRange: [12, 50], 9 rotationRange: [-90, 90], 10 // shape: 'circle', 11 // maskImage, 12 left: 'center', 13 top: 'center', 14 width: '80%', 15 height: '80%', 16 drawOutOfBound: true, 17 textStyle: { 18 normal: { 19 color() { 20 return 'rgb(' + [ 21 Math.round(Math.random() * 160), 22 Math.round(Math.random() * 160), 23 Math.round(Math.random() * 160) 24 ].join(',') + ')'; 25 }, 26 }, 27 emphasis: { 28 shadowBlur: 10, 29 shadowColor: '#333', 30 }, 31 }, 32 data: [], 33 }, 34 ], 35 }
打印出來發現複製的物件不包含color函式,查閱資料後發現
JSON.parse(JSON.stringify())拷貝出來物件時,如果json裡有 function,undefined,則序列化的結果會把 function,undefined 丟失。
此外JSON.parse(JSON.stringify())拷貝物件還有以下問題:
- 如果json裡面有時間物件,則序列化結果:時間物件=>字串的形式;
- 如果json裡有RegExp、Error物件,則序列化的結果將只得到空物件 RegExp、Error => {};
- 如果json裡有 function,undefined,則序列化的結果會把 function,undefined 丟失;
- 如果json裡有NaN、Infinity和-Infinity,則序列化的結果會變成null;
- 如果json裡有物件是由建構函式生成的,則序列化的結果會丟棄物件的 constructor
- 如果物件中存在迴圈引用的情況也無法實現深拷貝
參考文章:https://segmentfault.com/a/1190000020297508
那麼js深度複製一個物件最好的方法是什麼呢?
我一般都是使用lodash中的cloneDeep,你們還有什麼好的方法可以留言交流一下。