js的淺拷貝和深拷貝和應用場景

lavor 發布于2019-08-01 18:40 / 1521人閱讀

摘要：而大多數實際項目中，我們想要的結果是兩個變量初始值相同互不影響。所以就要使用到拷貝分為深淺兩種深淺拷貝的區別淺拷貝只復制一層對象的屬性，而深拷貝則遞歸復制了所有層級。

為什么會用到淺拷貝和深拷貝

首先來看一下如下代碼

let a = b = 2
a = 3
console.log(a)
console.log(b)
let c = d = [1,2,3]
let e = f = {a:1,b:2,c:3}
c[0] = 2
e.a = 2
console.log(d[0])
console.log(f.a)

你會發現，同一個Array或者Object賦值給兩個不同變量時，變量指向的是同一個內存地址，所以就會造成其中一個變量改變屬性值，同時改變了另外一個變量的對應屬性值。

而大多數實際項目中，我們想要的結果是兩個變量（初始值相同）互不影響。所以就要使用到拷貝（分為深淺兩種）

深淺拷貝的區別

淺拷貝只復制一層對象的屬性，而深拷貝則遞歸復制了所有層級。
淺拷貝有效性針對的是單一層級對象 [1,2,3]或者{a:1,b:2}
深拷貝有效性針對的是單層或者多層級對象 [1,2,3]或者{a:1,b:2}或者[1,[1],{a:1}]或者{a:[1],b:{c:2}}

淺拷貝

如何實現

// 數組
let a = [1,2]
let b = a.slice()
// {}
let e = {a:[1],b:{d:1},2}
let f = Object.create(e)
function shallowCopy (obj) {
    if (typeof obj === "object" && obj !== null) {
        if (Array.isArray(obj)) {
            return obj.slice()
        } else {
            let result = {}
            Object.keys(obj).forEach((item,i) = > {
                console.log(i)
                result[item] = obj[item]
            })
            return result
        }
    } else {
        return obj
    }
}

應用場景
對于一層結構的Array和Object想要拷貝一個副本時使用
vue的mixin是淺拷貝的一種復雜型式

深拷貝

如何實現

// 利用JSON（它能正確處理的對象是Number, String, Boolean, Array, 扁平對象）
let g = JSON.parse(JSON.stringify(obj))
// 適用于
function deepCopy (obj) {
  if (typeof obj === "object" && obj !== null) {
    let objKeys = Object.keys(obj)
    let result
    if (Array.isArray(obj)) {
      result = []
    } else {
      if (obj.constructor === Object) {
        result = {}
      } else {
        return obj
      }
    }
    objKeys.forEach((item) => {
      if (typeof obj[item] === "object" && obj[item] !== null) {
        switch (obj[item].constructor) {
          case Array:
            result[item] = deepCopy(obj[item])
            break
          case Object:
            result[item] = deepCopy(obj[item])
            break
          case Date:
            result[item] = new Date(obj[item])
            break
          case RegExp:
            let attributes = ""
            attributes += obj[item].global ? "g" : ""
            attributes += obj[item].ignoreCase ? "g" : ""
            attributes += obj[item].multiline ? "g" : ""
            result[item] =  new RegExp(obj[item].source, attributes);
            break
          default:
            result[item] = obj[item]
            break
        }
      } else {
        result[item] = obj[item]
      }
    })
    return result
  } else {
    return obj
  }
}

應用場景
復制深層次的object數據結構

對深拷貝的應用想法
在實際工作中是不是用繼承來實現更好？需要大家來討論，提意見

GPU云服務器云服務器深拷貝和淺拷貝 js拷貝內存數據庫 cdn和應用場景后拷貝預拷貝

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/51965.html

js的淺拷貝和深拷貝和應用場景

摘要：而大多數實際項目中，我們想要的結果是兩個變量初始值相同互不影響。所以就要使用到拷貝分為深淺兩種深淺拷貝的區別淺拷貝只復制一層對象的屬性，而深拷貝則遞歸復制了所有層級。為什么會用到淺拷貝和深拷貝首先來看一下如下代碼 let a = b = 2 a = 3 console.log(a) console.log(b) let c = d = [1,2,3] let e = f = {a:...

MartinDai 2019-08-30 14:08 評論0 收藏0
js的淺拷貝和深拷貝和應用場景

摘要：而大多數實際項目中，我們想要的結果是兩個變量初始值相同互不影響。所以就要使用到拷貝分為深淺兩種深淺拷貝的區別淺拷貝只復制一層對象的屬性，而深拷貝則遞歸復制了所有層級。為什么會用到淺拷貝和深拷貝首先來看一下如下代碼 let a = b = 2 a = 3 console.log(a) console.log(b) let c = d = [1,2,3] let e = f = {a:...

nemo 2019-08-22 15:17 評論0 收藏0
JavaScript中的淺拷貝和深拷貝

摘要：在中可以通過添加一個參數來實現遞歸，調用就可以實現一個深拷貝。利用序列化實現一個深拷貝在JavaScript中，對于Object和Array這類引用類型值，當從一個變量向另一個變量復制引用類型值時，這個值的副本其實是一個指針，兩個變量指向同一個堆對象，改變其中一個變量，另一個也會受到影響。這種拷貝分為兩種情況：拷貝引用和拷貝實例，也就是我們說的淺拷貝和深拷貝淺拷貝（shallow...

ernest.wang 2019-08-21 11:34 評論0 收藏0
實現JS中的淺拷貝和深拷貝

摘要：淺拷貝和淺拷貝的問題，不僅在日常應用中需要注意，而且在面試和筆試中也常被用來考察應聘者，屬于文體兩開花的。基本數據類型引用數據類型等等基本數據類型是按值訪問的，對其的拷貝會直接復制其值保存在新變量中。方法手工遍歷法方法方法方法方法淺拷貝和淺拷貝的問題，不僅在日常應用中需要注意，而且在面試和筆試中也常被用來考察應聘者，屬于文體兩開花的points。什么是深拷貝和淺拷貝呢？名稱 ...

huangjinnan 2019-08-26 13:38 評論0 收藏0