在了解深淺拷貝之前，我們先一起來簡單來了解一下，JavaScript 數據存儲的方式，以及數據類型（）。

JavaScript 中數據存儲分為 簡單數據類型和復雜數據類型（引用數據類型） 其中 5 種 基本數據類型

基本數據是直接存在棧里

Boolean（布爾值 ） String (字符型) number （數字型，不區分浮點型和double） undefined （定義了變量 但未給值） Null (定義了變量 但賦值為 Null)

和幾種常見的 引用數據類型

Object Array RegExp Date null **// 以上幾種都為 引用數據類型**

至于null 為什么是個對象，這時由于 JavaScript 早期數據在底層存儲以二進制方式進行存儲 如果二進制的前三位為 0
則JavaScript 會認為該數據是個對象即object所以 null 的前三位均為 0 即 null 又是基本數據類型 又是
引用數據類型。

而引用數據類型我們都知道它是通過 內存地址找到對象的

接下來知道復雜數據類型是通過內存地址存儲的，我們就能夠明白，下一次將 obj的值賦給新對象，其實是將內存地址賦予了新對象

const OldObj = {name: '張三',age: 18,hobby: ['size', 'color'],Around: {page: 10,size: '100KB'}}//將原對象賦值 新對象const newsObj = OldObj// 更改新對象的值 newsObj.name = '我更改了新對象的數據newsObj'//原對象console.log(OldObj);//新對象console.log(newsObj); **此時會發現 我將新對象的name更改 但 原對象值也發生了改變，這就是因為內存地址的問題，因為它們一起引用的是同一個地址**

淺拷貝

將整個對象進行拷貝（可以理解為在棧內存中開辟了一個新的地址）

實現淺拷貝的四種式。

1：使用Object 對象原型上的 ** assign（）**方法
assign（對象）

const obj = { a: 1 };
const copy = Object.assign({}, obj);
console.log(copy); // { a: 1 }

#方式二

利用 ES6 展開運算符，將對象展開，可以看到基本數據類型未發生更改

方式三：通過循環遍歷

方式四 利用lodash 組件庫調用

loadsh 官網 https://www.lodashjs.com/

引入 loadsh var objects = [{ 'a': 1 }, { 'b': 2 }];var shallow = _.clone(objects); console.log(shallow[0] === objects[0]); // => true

實現深拷貝的四種方式

方式1 ：也是最簡單的方式 將對象通過JSON轉換為字符串

const obj = {uname: 'pink',age: 18,hobby: ['乒乓球', '足球'],family: {baby: '小貝貝'}}// 把對象轉換為 JSON 字符串const o = JSON.parse(JSON.stringify(obj))//輸出新對象console.log(o)// 進行數據更改 o.family.baby = '123'console.log(obj)

方式二 通過遞歸函數實現深拷貝

邏輯分析

// 1: indicates receiving parameters
// * 2: The type of the object passed in generates an instance object through the constructor reflection
// * 3: check that the passed object cannot be empty and is of an object type. Otherwise, return the current passed value
// * 4: iterate over every bit passed in if it can prove to be an object type
// * Check whether each attribute in an object is its own, not inherited attributes
// * 5: deep copy if object attribute is object type, shallow copy otherwise
// */
// }
// 1 ： 接收參數
// // * 2 ： 傳遞進來的對象的類型 通過constructor反射 new 出一個實例對象
// // * 3 ： 判斷傳進來的對象不能為空 并且 是一個對象類型才能進行遍歷 否則直接返回當前傳進來的值
// // * 4 ： 如果能遍歷證明是一個 對象類型 則 遍歷傳進來的每一位
// // * 判斷對象里的每個屬性是不是自己本身的，不能是通過繼承獲得的屬性
// // * 5 ： 能夠執行下來，再進行深入判斷 如果對象屬性 是對象類型則進行深拷貝，否則則進行淺拷貝

**// 方法 1** function deepClone (obj) {// 通過 constructor 反射 創建實例let ObjClone = new obj.constructor()if (obj && typeof (obj) === 'object') {// 遍歷原來的對象for (key in obj) { > // 判斷對象的屬性是不是本身的屬性（不能是通過原型鏈繼承獲取過來），如果是則進行下一步if (obj.hasOwnProperty(key)) {// 對象的每一位不能為空 為空無法進行拷貝if (obj[key] && typeof (obj[key]) === 'object') {// 如果是復雜數據類型 則進行遞歸深拷貝 否則則進行淺拷貝ObjClone[key] = deepClone(obj[key])}else {// 淺拷貝ObjClone[key] = obj[key]}}}}return ObjClone}// 將 拷貝的對象賦值 const NewsObject = deepClone(OldObj)// 更改 復雜數據類型數據NewsObject.Around.page = 1000// 源對象 console.log(OldObj);// 新對象console.log(NewsObject);

深拷貝第三種方式，是博主的世交好寫的一篇文章，有興趣的可以去詳細閱讀一下哦

https://juejin.cn/post/7085346393535201294 這是原文地址鏈接。

總結

以上是生活随笔為你收集整理的JS（JavaScript）中实现深浅拷贝的几种方式（详细阅读 非常重要）。的全部內容，希望文章能夠幫你解決所遇到的問題。

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