資訊專欄INFORMATION COLUMN
摘要：為何寫最近在研究深淺拷貝，找了很多資料，感覺不是很滿意，所以自己就整理了一份。深拷貝如果給放到新的內存中，將的各個屬性都復制到新內存里，就是深拷貝。安全的值是指能夠呈現為有效格式的值。參考文檔冴羽的專題之深淺拷貝深拷貝與淺拷貝的實現
為何寫：
最近在研究深淺拷貝，找了很多資料，感覺不是很滿意，所以自己就整理了一份。廢話不多說，我們來一起復習一下吧，也希望留下您寶貴意見。
何為深淺拷貝？深拷貝和淺拷貝是只針對Object和Array這樣的復雜類型的
1.淺拷貝：
我們先來看2個栗子：
let a = {
name: "azi"
}
let b = a;
b.name = "zhangsan";
console.log(a.name); // zhangsan
console.log(b.name); // zhangsan
let a = ["hello","world"] let b = a; b[1]= "azi"; console.log(a); // ["hello", "azi"] console.log(b); // ["hello", "azi"]
從栗子中可以看出：
a和b指向同一塊內存，所以修改其中任意的值，另一個值都會隨之變化，這就是淺拷貝。
2.深拷貝：
如果給b放到新的內存中，將a的各個屬性都復制到新內存里，就是深拷貝。
換句話說，也就是b的屬性改變時，a的屬性不會跟著變化。
常用的實現方法有哪些？1.淺拷貝：
數組：
Array.slice()、 Array.concat()、 ...
對象：
Object.assign()、 ...
栗子：
// concat concat方法不會改變this或任何作為參數提供的數組，而是返回一個淺拷貝，它包含與原始數組相結合的相同元素的副本 let arr = ["old", 1, true, null, undefined]; let new_arr1 = arr.concat(); new_arr1[0] = "new"; console.log(arr) // ["old", 1, true, null, undefined] console.log(new_arr1) // ["new", 1, true, null, undefined] // slice slice()方法返回一個從開始到結束（不包括結束）選擇的數組的一部分淺拷貝到一個新數組對象 let new_arr2 = arr.slice(); new_arr2[0] = "new"; console.log(arr) // ["old", 1, true, null, undefined] console.log(new_arr2) // ["new", 1, true, null, undefined] // ... 擴展運算符 復制數組時候, 拓展語句只會進行淺復制, 因此如下所示, 它并不適合復制多維數組 (與Object.assign() 相同 let new_arr3 = [...arr]; new_arr3[0] = "new"; console.log(arr) // ["old", 1, true, null, undefined] console.log(new_arr3) // ["new", 1, true, null, undefined]
// Object.assign() Object.assign方法只會拷貝源對象自身的并且可枚舉的屬性到目標對象
let obj1 = {a:0, b:{c:0}};
let obj2 = Object.assign({},obj1);
obj2.b.c =2 ;
obj2.a =2 ;
console.log(obj1); // {a:0,b:{c:2}}
console.log(obj2); // {a:2,b:{c:2}}
// ...
let obj3 = {...obj1};
obj3.b.c =3 ;
obj3.a =3 ;
console.log(obj1); // {a:0,b:{c:3}}
console.log(obj3); // {a:3,b:{c:3}}
2.深拷貝：
JSON.parse( JSON.stringify(arr) )
在使用JSON.stringify() 需要注意一下幾點：
1.JSON.stringify(..) 在將 JSON 對象序列化為字符串時和 toString() 的效果基本相同，只不過序列化的結 果總是字符串:
JSON.stringify( 42 ); // "42"
JSON.stringify( "42" ); // ""42""(含有雙引號的字符串)
JSON.stringify( null ); // "null"
JSON.stringify( true ); // "true"
2.所有安全的 JSON 值(JSON-safe)都可以使用 JSON.stringify(..) 字符串化。安全的 JSON 值是指能夠呈現為有效 JSON 格式的值。
3.undefined、function、symbol (ES6+)和包含循環引用(對象之間相互引用，形成一個無限循環)的對象都不符合 JSON結構標準，支持 JSON 的語言無法處理它們
4.JSON.stringify(..) 在對象中遇到 undefined、function 和 symbol 時會自動將其忽略，在
數組中則會返回 null(以保證單元位置不變)。
例如:
JSON.stringify( undefined ); // undefined
JSON.stringify( function(){} ); // undefined
JSON.stringify([1,undefined,function(){},4]); // "[1,null,null,4]"
JSON.stringify({ a:2, b:function(){} }) // "{"a":2}"
對包含循環引用的對象執行 JSON.stringify(..) 會出錯。
當然也可以用JQ的extend 函數的實現，這里就不具體說了。
參考文檔：
冴羽的JavaScript專題之深淺拷貝
Alloyteam深拷貝與淺拷貝的實現
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/107139.html
摘要：專題系列第六篇，講解深淺拷貝的技巧和以及實現深淺拷貝的思路前言拷貝也是面試經典吶數組的淺拷貝如果是數組，我們可以利用數組的一些方法比如返回一個新數組的特性來實現拷貝。所以我們可以看出使用和是一種淺拷貝。 JavaScript 專題系列第六篇，講解深淺拷貝的技巧和以及實現深淺拷貝的思路 前言 拷貝也是面試經典吶！ 數組的淺拷貝 如果是數組，我們可以利用數組的一些方法比如：slice、co...
摘要：動手實現深拷貝利遞歸來實現對對象或數組的深拷貝。遞歸思路對屬性中所有引用類型的值進行遍歷，直到是基本類型值為止。深拷貝只對對象自有屬性進行拷貝測試數據拷貝方式其實也是一種繼承的方式，當然繼承還是有其他方法的感謝支持 深淺拷貝 基本類型 & 引用類型 ECMAScript中的數據類型可分為兩種： 基本類型：undefined,null,Boolean,String,Number,Symb...
摘要：深拷貝相比于淺拷貝速度較慢并且花銷較大。所以在賦值完成后，在棧內存就有兩個指針指向堆內存同一個數據。結果如下擴展運算符只能對一層進行深拷貝如果拷貝的層數超過了一層的話，那么就會進行淺拷貝那么我們可以看到和展開原算符對于深淺拷貝的結果是一樣。 JS中數據類型 基本數據類型： undefined、null、Boolean、Number、String和Symbol(ES6) 引用數據類型：...
摘要：專題系列共計篇，主要研究日常開發中一些功能點的實現，比如防抖節流去重類型判斷拷貝最值扁平柯里遞歸亂序排序等，特點是研究專題之函數組合專題系列第十六篇，講解函數組合，并且使用柯里化和函數組合實現模式需求我們需要寫一個函數，輸入，返回。 JavaScript 專題之從零實現 jQuery 的 extend JavaScritp 專題系列第七篇，講解如何從零實現一個 jQuery 的 ext...
閱讀 824·2019-08-30 15:55
閱讀 1406·2019-08-30 13:55
閱讀 1983·2019-08-29 17:13
閱讀 2840·2019-08-29 15:42
閱讀 1329·2019-08-26 14:04
閱讀 1016·2019-08-26 13:31
閱讀 3271·2019-08-26 11:34
閱讀 828·2019-08-23 18:25
