2. 程式人生 > 其它 >javascript 物件的深拷貝與淺拷貝

javascript 物件的深拷貝與淺拷貝

阿新 • • 發佈：2021-01-14

技術標籤：javascriptjavascriptjs

今天我們來談一談物件的深拷貝和淺拷貝吧

我們都知道，js資料型別主要分為兩大類 基礎資料型別和引用（複雜）資料型別。

  • 基礎資料型別存在於棧記憶體中，當被拷貝時，會建立一個完全相等的變數
  • 而引用資料型別存在於堆中，儲存的是一個記憶體空間，而賦值給變數的，僅僅是這個記憶體空間的一個引用而已。而就會出現一個問題，當我們將一個物件賦值給另一個變數時，賦值的是物件的引用，必然導致兩個變數都指向同一個記憶體空間，其中一個改變時，必然會影響到另一個。

淺拷貝和深拷貝的理解

什麼是淺拷貝

簡單理解就是
自己建立一個新的物件，來接受你要重新複製或引用的物件值。如果物件屬性是基本的資料型別，複製的就是基本型別的值給新物件；但如果屬性是引用資料型別，複製的就是記憶體中的地址，如果其中一個物件改變了這個記憶體中的地址，肯定會影響到另一個物件。

可以實現淺拷貝的方法
1、Object.assign（）

  • object.assign 是es6新增的一個方法
  • 用於合併多個物件到目標物件中
  • 第一個引數是目標物件，後面的引數是源物件
var obj = {}
var source1 = {
	name: '張三',
	age: 18,
	like: {
		music: '老鼠愛大米'
	}
}
Object.assign(obj, source1)
console.log(obj)
source1.like.music= "沙漠駱駝"
console.log(obj)
// 輸出
{ name: '張三', age: 18, like:
 
 { music: '老鼠愛大米' } }
{ name: '張三', age: 18, like: { music: '沙漠駱駝' } }

從上面可以看出，修改source1的like屬性下的music屬性值時，會對obj產生影響

2、擴充套件運算子

  • 擴充套件運算子可以展開物件或者陣列中的選項 obj = { …obj2 }
var obj = {}
var source1 = {
	name: '張三',
	age: 18,
	like: {
		music: '老鼠愛大米'
	}
}
obj = { ...source1 }
console.log(obj)
source1.like.
 
music= "沙漠駱駝"
console.log(obj)
// 輸出
{ name: '張三', age: 18, like: { music: '老鼠愛大米' } }
{ name: '張三', age: 18, like: { music: '沙漠駱駝' } }

可以發現，和Object.assign() 一樣的結果

同時，使用這兩種方式還需要注意

  • 它不會拷貝物件的繼承屬性
  • 它只能拷貝可列舉的屬性
  • 它可以拷貝 Symbol 型別的屬性
var obj = {
	name: '張三',
	age: 18,
	sym: Symbol(123)
}
Object.defineProperty(obj, 'aaa', {
    value: '這是一個不可列舉的屬性',
    enumerable: false // 設定為false代表此屬性不可列舉
})
var obj2 = { ...obj }
console.log(obj2)
// 輸出
{ name: '張三', age: 18, sym: Symbol(123) }

從上面可以看出，symbol屬性被拷貝了，但是屬性aaa並沒有被拷貝

3、陣列拷貝方法
concat ()
使用方法我就不多說了，不懂得看我上一篇文章吧

var arr = [{name: '張三'}, 2, {age: 18}]
var brr = arr.concat()
console.log(brr)
arr[0].name = '李四'
console.log(brr)
// 輸出
[ { name: '張三' }, 2, { age: 18 } ]
[ { name: '李四' }, 2, { age: 18 } ]

可以看出，concat（）也是淺拷貝

slice（）
使用方法見上一篇文章

var arr = [{name: '張三'}, 2, {age: 18}]
var brr = arr.slice()
console.log(brr)
arr[0].name = '李四'
console.log(brr)
// 輸出
[ { name: '張三' }, 2, { age: 18 } ]
[ { name: '李四' }, 2, { age: 18 } ]

和concat一樣，屬於淺拷貝

擴充套件運算子
陣列擴充套件運算子和物件得一模一樣，我就不另外說了

深拷貝

我們可能大多時候最常用到的深拷貝就是JSON.stringify() 了。相信大家都用過
原理就是先將物件轉為json字串，再轉換為物件。

var obj = {
    name: '張三',
    like: {
        music: '老鼠愛大米',
        color: 'red',
        animate: {
            name: '狗'
        }
    }
}
var obj2 = JSON.parse(JSON.stringify(obj))
obj.like.music = '沙漠駱駝'
obj.like.animate.name = '熊貓'
console.log(obj)
console.log(obj2)
// 輸出
{
  name: '張三',
  like: { music: '沙漠駱駝', color: 'red', animate: { name: '熊貓' } }
}
{
  name: '張三',
  like: { music: '老鼠愛大米', color: 'red', animate: { name: '狗' } }
}

可以看出，更改obj 不會影響到拷貝出來的obj2

但是這種方法也存在很多問題

  1. 拷貝的物件的值中如果有函式、undefined、symbol 這幾種型別，經過 JSON.stringify 序列化之後的字串中這個鍵值對會消失，導致無法拷貝到
  2. 拷貝 Date 引用型別會變成字串
  3. 無法拷貝不可列舉的屬性
  4. 拷貝 RegExp 引用型別會變成空物件
  5. 物件中含有 NaN、Infinity 以及 -Infinity，JSON 序列化的結果會變成 null
var obj = {
    base: {
        name: '張三'
    }
}
obj.date = new Date(0)
obj.un = undefined
obj.nu = null
obj.infinity = Infinity
obj.nan = NaN
obj.sym = Symbol(123)
obj.reg = /^123/
Object.defineProperty(obj, 'aaa', {
    value: '這是一個不可列舉的屬性',
    enumerable: false // 設為false代表不可列舉
})
var obj2 = JSON.parse(JSON.stringify(obj))
console.log(obj)
console.log(obj2)

// 輸出
{
  base: { name: '張三' },
  date: 1970-01-01T00:00:00.000Z,
  un: undefined,
  nu: null,
  infinity: Infinity,
  nan: NaN,
  sym: Symbol(123),
  reg: /^123/
}
{
  base: { name: '張三' },
  date: '1970-01-01T00:00:00.000Z',
  nu: null,
  infinity: null,
  nan: null,
  reg: {}
}

從上面可以看出

  • Date物件變成字串了
  • infinity 和 NaN 變成null了
  • un屬性的值是undefined，並沒有被拷貝到，因為這個屬性在序列號時消失了，sym屬性也是一樣消失了
  • RegExp引用型別變成空物件了
  • aaa這個不可列舉的屬性也沒有被拷貝到

那麼，如何實現一個完整的深拷貝方法呢，那就要看我們該如何一一來解決以上問題了

  • 拷貝引用型別屬性時，我們可以通過遞迴來迴圈拷貝
  • 如果屬性是簡單資料型別，包括undefined，infinity 和 NaN, 則直接遞迴賦值
  • 拷貝Date物件時，我們可以直接重新生成一個新的Date例項返回
  • 拷貝RegExp型別時，也是一樣，直接生成一個新的RegExp例項返回
  • 拷貝Symbol屬性和不可列舉的屬性時，使用Reflect.ownKeys (什麼是Reflect.ownKeys)方法
function isObject (obj) {
    if ((typeof obj === 'object' || typeof obj === 'function') && (obj !== null)) {
        return true
    }
}
function deepClone (obj) {
    if (obj.constructor === Date) {
        return new Date(obj) // 返回一個新例項
    }
    
    if (obj.constructor === RegExp) {
        return new RegExp(obj) // 返回一個新例項
    }

    let allDesc = Object.getOwnPropertyDescriptors(obj)
    // 遍歷傳入引數所有鍵的特性
    let cloneObj = Object.create(Object.getPrototypeOf(obj), allDesc)

    for (let key of Reflect.ownKeys(obj)) { 
        cloneObj[key] = (isObject(obj[key]) && typeof obj[key] !== 'function') ? deepClone(obj[key]) : obj[key]
    }

    return cloneObj
}
var obj = {
    base: {
        name: '張三'
    }
}
obj.date = new Date(0)
obj.un = undefined
obj.nu = null
obj.infinity = Infinity
obj.nan = NaN
obj.sym = Symbol(123)
obj.reg = /^123/
Object.defineProperty(obj, 'aaa', {
    value: '這是一個不可列舉的屬性',
    enumerable: false // 設為false代表不可列舉
})

var obj2 = deepClone(obj)
console.log(obj)
console.log(obj2)

// 輸出
{
  base: { name: '張三' },
  date: 1970-01-01T00:00:00.000Z,
  un: undefined,
  nu: null,
  infinity: Infinity,
  nan: NaN,
  sym: Symbol(123),
  reg: /^123/
}
{
  base: { name: '張三' },
  date: 1970-01-01T00:00:00.000Z,
  un: undefined,
  nu: null,
  infinity: Infinity,
  nan: NaN,
  sym: Symbol(123),
  reg: /^123/
}

從結果可以看出，我們實現的深拷貝函式確實實現了物件的一個深拷貝功能。

深拷貝與淺拷貝就寫到這了。有問題歡迎指出

相關推薦

javascript 物件的深拷貝與淺拷貝

技術標籤：javascriptjavascriptjs 今天我們來談一談物件的深拷貝和淺拷貝吧 我們都知道，js資料型別主要分為兩大類 基礎資料型別和引用（複雜）資料型別。

JavaScript中的深拷貝與淺拷貝

總結 ​ 深拷貝和淺拷貝最根本的區別在於是否完整獲取一個物件的複製實體，而不是引用。

JavaScript之淺談深拷貝與淺拷貝

這一章我們聊一下js中深拷貝與淺拷貝 深拷貝和淺拷貝的區別？ 1.淺拷貝： 將原物件或原陣列的引用直接賦給新物件，新陣列，新物件／陣列只是原物件的一個引用

Java clone() 方法克隆物件——深拷貝與淺拷貝

基本資料型別引用資料型別特點 1、基本資料型別的特點：直接儲存在棧(stack)中的資料

Java面向物件3-深拷貝與淺拷貝

深拷貝和淺拷貝最根本的區別在於是否真正獲取一個物件的複製實體，而不是引用。

Python的賦值、深拷貝與淺拷貝的區別詳解

在python中，給一個物件賦值，實際上就是物件對記憶體空間儲存的值的引用。當我們把物件賦值給另一個變數的時候，這個變數並沒有拷貝這個物件，而只是拷貝了這個物件的引用而已。

詳解JS深拷貝與淺拷貝

一、預備知識 1.1、JS資料型別 基本資料型別：Boolean、String、Number、null、undefined

Java拷貝——深拷貝與淺拷貝

深拷貝和淺拷貝 值型別 vs 引用型別 在Java中，像陣列、類Class、列舉Enum、Integer包裝類等等，就是典型的引用型別，所以操作時一般來說採用的也是引用傳遞的方式；

JS 深拷貝與淺拷貝

寫在前面: 　　在瞭解深淺拷貝之前,我們先來了解一下堆疊。 　　堆疊是一種資料結構，在JS中

java 深拷貝與淺拷貝

對於所有的基本型別都是淺拷貝,不論什麼方式; 但對於引用型別,當呼叫object的clone方法時,除String型別外,其他都為深拷貝;對於String物件型別要實現深拷貝必須要手動建立(new)一個新的String物件;

關於JS的深拷貝與淺拷貝問題處理

1 let obj1 = { 2a: 0, 3b: 0 4 } 5 let obj2 = \'\' 6 7 // obj2 = obj1 8 // obj2.a = 10 9 // console.log(obj1, obj2); //{ a: 10, b: 0 } { a: 10, b: 0 }

C#中的深拷貝與淺拷貝

淺拷貝和深拷貝之間的區別： 淺拷貝是指將物件中的數值型別的欄位拷貝到新的物件中，而物件中的引用型欄位則指複製它的一個引用到目標物件。如果改變目標物件中引用型欄位的值他將反映在原始物件中，也就是說原始物

Python 深拷貝與淺拷貝詳解

要說清楚Python中的深淺拷貝，需要搞清楚下面一系列概念: 變數-引用-物件(可變物件，不可變物件)-切片-拷貝(淺拷貝，深拷貝)

Java拷貝-深拷貝與淺拷貝

一、出現原因 在專案中經常需要複製一個完全一樣的物件，然後再對新物件進行更新等操作而不影響老物件。

深拷貝與淺拷貝的區別

我們常說的淺拷貝與深拷貝主要是針對Object,Array這樣的引用型別, 為什麼? 因為引用型別在JS裡面儲存的記憶體地址。

Python基礎筆記（六）深拷貝與淺拷貝

技術標籤：python 定義： 淺拷貝：不拷貝子物件的內容，只是拷貝子物件的引用；

深拷貝與淺拷貝Object.assign()

技術標籤：js 深拷貝與淺拷貝 Object.assign()會身拷貝一個複雜型別 <!DOCTYPE html>

深拷貝與淺拷貝（c++和python)

變數的深拷貝、淺拷貝是專案中重要且不能忽視的問題。 Python 　　在python中進行資料處理時，會不時用到陣列拷貝，如果不瞭解拷貝的陣列是陣列的別名還是深、淺拷貝，會花更多的時間排錯。

深拷貝與淺拷貝

技術標籤：C++c++指標 深拷貝與淺拷貝的區別 深拷貝和淺拷貝本質的區別在於淺拷貝獲取的是原物件的引用，深拷貝獲取的是原物件的複製實體。

python list列表的複製，深拷貝與淺拷貝總結

技術標籤：# 知識列表python資料結構程式語言 python list列表深拷貝與淺拷貝總結