作者：奚杰

拷貝是寫代碼中經常使用的方法。淺拷貝與深拷貝是指拷貝的兩種情況。本文將深入探究JS的賦值、淺拷貝與深拷貝。

數據類型

在探究深拷貝與淺拷貝之前，我們先梳理一下JS的數據類型。在JavaScript中，數據類型有兩大類。一類是基本數據類型，一類是引用數據類型。

基本數據類型有五種：number、string、boolean、null、undefined。基本數據類型存放在棧中。存放在棧中的數據具有數據大小確定，內存空間大小可以分配、直接按值存放的特點。所以存放在棧中的數據可以直接訪問。在JavaScript中，基本的數據類型值是不可更改的。可能這一點不符合我們平常的使用認知。我們在修改字符串或其他基本數據類型變量時，實際上是返回了一個新的值，而不是【改變】原始值。

而對于引用數據類型，是存放在堆內存中。引用數據類型的變量并不是存放的實際值，而是一個存放在棧內存的指針，該指針指向堆內存中的某個地址。每個數據所占的空間大小不一致，需要根據情況進行特定的分配。與基本數據類型不同，引用類型的值是可以改變的。

賦值：傳值與傳址

有了對JavaScript數據類型的一定了解后，我們接下來看看不同類型的數據類型在賦值時的區別。

對于基本數據類型來說，當我們進行賦值操作（=）時，實際上是在內存中新開一段棧內存，然后再將值賦值到新的棧中。

舉個例子：

let a = 1 let b = a a = 5 console.log(a) // 5 console.log(b) // 1

對于上述語句，b變量雖然是a變量的復制，但與a變量是獨立互不影響的變量。

而對于引用數據類型來說，在進行賦值操作時，實際上是把變量的地址傳給了另一個變量，所以稱為傳址。傳址之后，兩個變量就指向同一個地址，兩者的操作是互有影響的。

例：

let a = { age: 12 } let b = aa.age = 13 console.log(a.age) // 13 console.log(b.age) // 13b.age = 14 console.log(a.age) // 14 console.log(b.age) // 14

淺拷貝與深拷貝

只有當拷貝引用數據類型時，拷貝才存在淺拷貝與深拷貝之分。

淺拷貝

淺拷貝就是指創建一個新對象，該對象擁有原始對象第一層屬性的精確拷貝。即：如果原始對象的屬性是基本類型數據，則拷貝的就是基本數據類型的值；如果原始對象的屬性是引用類型，則拷貝的是內存地址。當原始對象的引用類型屬性發生改變時，拷貝對象的對應屬性值也會發生變化。這里需要強調一下，淺拷貝與賦值是有所區別的，賦值時與原數據指向同一對象，而淺拷貝則指向了不同對象。

讓我們來實現一個淺拷貝方法。

function shallowCopy(src) {const dist = {}for (let prop in src) {if (src.hasOwnProperty(prop)) {dist[prop] = src[prop]}}return dist }

深拷貝

淺拷貝是對原始對象第一層屬性的精確拷貝，而深拷貝則是對原始對象所有層級屬性的遞歸精確拷貝。

深拷貝的實現

JSON

function deepCopy (src) {let temp = JSON.stringify(src)let dist = JSON.parse(temp)return dist }

遞歸實現

function deepCopy (src) {if (typeof src !== 'object') {return src}if (src == null) {return null}let dist = Array.isArray(src) ? [] : {}if (src && typeof src === "object") {for (let prop in src) {if (src.hasOwnProperty(prop)) {// 如果子屬性為引用數據類型，遞歸復制if (src[prop] && typeof src[prop] === "object") {dist[prop] = deepCopy(src[prop])} else {// 如果是基本數據類型，只是簡單的復制dist[prop] = src[prop]}}}}return dist } 新人創作打卡挑戰賽發博客就能抽獎！定制產品紅包拿不停！

總結

以上是生活随笔為你收集整理的js 浅拷贝直接赋值_JS中的赋值、浅拷贝与深拷贝的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。