PS:本文整理的為部分物件的淺拷貝與深拷貝(與基本資料型別的概念不一樣,eg:就淺拷貝來說,如果屬性是基本型別,拷貝的就是基本型別的值,如果屬性是參考型別,拷貝的就是記憶體地址 ,所以如果其中一個物件改變了這個地址,就會影響到另一個物件,)
淺拷貝
Object.assign():
方法用于將所有可列舉屬性的值從一個或多個源物件復制到目標物件,它將回傳目標物件,如果目標物件中的屬性具有相同的鍵,則屬性將被源物件中的屬性覆寫,后面的源物件的屬性將類似地覆寫前面的源物件的屬性,

語法:Object.assign(target, ...sources)
target:目標物件
sources: 源物件
回傳值: 目標物件
Object.assign 方法只會拷貝源物件自身的并且可列舉的屬性到目標物件(淺拷貝),該方法使用源物件的[[Get]]和目標物件的[[Set]],所以它會呼叫相關 getter 和 setter,因此,它分配屬性,而不僅僅是復制或定義新的屬性,如果合并源包含getter,這可能使其不適合將新屬性合并到原型中,為了將屬性定義(包括其可列舉性)復制到原型,應使用Object.getOwnPropertyDescriptor()和Object.defineProperty() ,
String型別和 Symbol 型別的屬性都會被拷貝,
在出現錯誤的情況下,例如,如果屬性不可寫,會引發TypeError,如果在引發錯誤之前添加了任何屬性,則可以更改target物件,
注意,Object.assign 不會在那些source物件值為 null 或 undefined 的時候拋出錯誤,

深拷貝
使用JSON.parse(),JSON.stringify()實作對物件的深拷貝(此處不講遍歷)
概念:根據不包含參考物件的普通陣列深拷貝得到啟發,不拷貝參考物件,拷貝一個字串會新辟一個新的存盤地址,這樣就切斷了參考物件的指標聯系,
var test={
a:"ss",
b:"dd",
c:[
{dd:"css",ee:"cdd"},
{mm:"ff",nn:"ee"}
]
};
var test1 = JSON.parse(JSON.stringify(test));//拷貝陣列,注意這行的拷貝方法
console.log(test);
console.log(test1);
test1.c[0].dd="change"; //改變test1的c屬性物件的d屬性
console.log(test); //不影響test
console.log(test1);
根據測驗結果,test1已經從test復制一份,并且test1改變其中屬性的值時,對原來的物件test沒有造成影響,
JSON.parse(),JSON.stringify()兼容性問題
可以通過為IE7以及IE7以下版本的IE瀏覽器引入json2.js,使用json2.js來解決JSON的兼容性問題
<!--[if lt IE 7]>
<script src="https://www.cnblogs.com/Carmena/p/具體放路徑/json2.js"></script>
<![endif]-->
json2.js的github地址為:https://github.com/douglascrockford/JSON-js
JSON.stringify()的作用是將 JavaScript 物件轉換為 JSON 字串,
JSON.parse()可以將JSON字串轉為一個物件,
PS:本文所介紹的物件的深拷貝與淺拷貝并不完整,之后如有新內容會更新整理,
轉載請註明出處,本文鏈接:https://www.uj5u.com/qiye/229739.html
標籤:JavaScript
上一篇:vue axios簡單封裝
