js深拷贝,浅拷贝的解析以及解决方案
生活随笔
收集整理的這篇文章主要介紹了
js深拷贝,浅拷贝的解析以及解决方案
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
深、淺拷貝
簡單來說,淺拷貝簡單的處理簡單數據時候就很ok
到那時遇到復雜數據類型就可能有點吃了,比如數組,你賦值了個另一個變量,這樣會導致一個變量改,另一個數據也會發生改變,這或許導致很危險的東西。當然,有時候也會拋出異常,比如釋放了那塊內存空間,另一個數據去改變,去操作那塊地址空間,很有可能會拋出異常……
深拷貝解決了上述問題,
首先,對于簡單的一層的數據,我建議使用 ... 運算符
對于有多層的數據, 可是使用 JSON.parse(JSON.stringify(obj)) 來解決
局限性
- 會忽略 undefined
- 會忽略 symbol
- 不能序列化函數
- 不能解決循環引用的對象
如果你所需拷貝的對象含有內置類型并且不包含函數,可以使用 MessageChannel
使用的時候注意是一個異步的過程
function deepClone (obj) {return new Promise((resolve, reject) => {const { port1, port2 } = new MessageChannel() port2.onmessage = ev => resolve(ev.data)port1.postMessage(obj)}) } // 返回的是一個promise對象,記得使用async和await的promise 的語法糖去解決問題或者.then()loadsh 的深拷貝
我一般習慣使用自己寫的文檔來查。
當然 我挺喜歡遞歸的,因為遞歸簡單,可是耗費性能。但是前端能有多大的數據呢 ^-^
function deepClone(newObj, oldObj) { //(新數據,被拷貝數據)for (key in oldObj) {if (Array.isArray(oldObj[key])) {// 如果數據類型是數組,必須寫在最上面,// 因為 ( [1,2] instanceof Object === true)newObj[key] = []deepCopy(newObj[key], oldObj[key])} else if (oldObj[key] instanceof Object) {//如果數據是對象類型newObj[key] = {}deepCopy(newObj[key], oldObj[key])} else {//數據是基本數據類型newObj[key] = oldObj[key]}}return newObj }總結
以上是生活随笔為你收集整理的js深拷贝,浅拷贝的解析以及解决方案的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 炊饼是啥
- 下一篇: React中 useState在合成事件