angularJS深拷貝詳解
在了解angular深拷貝之前，首先看下邊的代碼。
var a = 1; var b = a; b = 2; console.log(a + " " + b);
很顯然，輸出的a的值是1，b的值是2。接下來再看一段代碼。
var a = [1,2,3,4]; var b = a; b.push(5); console.log(a + " " + b);
很顯然，輸出a的值是[1,2,3,4,5]，b的值是[1,2,3,4,5]。再來看下一段代碼。
var a = {
name:"zhangsan",
age:20
}
var b = a;
b.name = "lisi";
b.age = 30;
console.log(a + " " + b);
很顯然，輸出的a和b的值都是{name:"lisi",age:30}。這是為什么呢？
在JavaScript或者其他語言中，都有深拷貝和淺拷貝這兩個(gè)名詞。在第一段代碼中，a和b都是基本數(shù)據(jù)類型，當(dāng)復(fù)制彼此的值之后，再改變值。此時(shí)a的值并沒有隨著b的值的改變而改變，這就是深拷貝。當(dāng)數(shù)據(jù)類型為數(shù)組或者對(duì)象這些復(fù)雜數(shù)據(jù)類型時(shí)，復(fù)制到數(shù)組或者對(duì)象之后，再改變數(shù)組或者對(duì)象的值，a的值也隨著b的值改變而改變，這就是淺拷貝。
怎樣解決深拷貝這個(gè)問題呢？
數(shù)組數(shù)據(jù)類型：使用concat()方法。b = a.concat();此時(shí)改變b的值，a的值就不會(huì)隨著b的值的改變而改變。
對(duì)象數(shù)據(jù)類型：b.name = a.name; b.age = a.age;此時(shí)，改變b的值，a的值就不會(huì)隨著b的值的改變而改變。但是，該方法需要知道a對(duì)象里邊都有哪些字段。一個(gè)一個(gè)的復(fù)制，特別麻煩。
AngularJS的深拷貝
使用angular的同學(xué)可能都忽略了angularJS自帶的封裝好的方法。angular.isString(), angular.isNumber()，angular.isArray() , angular.isFunction() 等等。其中解決深拷貝的方法angular.copy(),能夠解決深拷貝的問題。如下：
var a = {
name :"zhangsan",
age : 20
}
var b = angular.copy(a);
此時(shí)，改變b的值，a的值就不會(huì)隨著b的值的改變而改變，也就解決了深拷貝的問題。
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Angular 2使用路由自定義彈出組件toast操作,結(jié)合實(shí)例形式分析了Angular2使用路由操作彈出組件toast相關(guān)定義與使用技巧,需要的朋友可以參考下2019-05-05
下面小編就為大家?guī)硪黄钊肜斫鈇ngularjs過濾器。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-05-05
利用VS Code開發(fā)你的第一個(gè)AngularJS 2應(yīng)用程序
這篇文章主要給大家介紹了關(guān)于利用VS Code如何開發(fā)你的第一個(gè)AngularJS 2應(yīng)用程序的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友下面來一起看看吧。2017-12-12
下面小編就為大家?guī)硪黄獪\談angularjs中響應(yīng)回車事件。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-04-04
AngularJS使用angular.bootstrap完成模塊手動(dòng)加載的方法分析
這篇文章主要介紹了AngularJS使用angular.bootstrap完成模塊手動(dòng)加載的方法,結(jié)合實(shí)例形式分析了angular.bootstrap函數(shù)手動(dòng)加載模塊的步驟與相關(guān)操作技巧,需要的朋友可以參考下2017-01-01
AngularJS select加載數(shù)據(jù)選中默認(rèn)值的方法
下面小編就為大家分享一篇AngularJS select加載數(shù)據(jù)選中默認(rèn)值的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-02-02
這篇文章主要介紹了angularJS 中$scope方法使用指南,需要的朋友可以參考下2015-02-02
angular8.5集成TinyMce5的使用和詳細(xì)配置(推薦)
這篇文章主要介紹了angular8.5集成TinyMce5的使用和詳細(xì)配置,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-11-11
Angular4學(xué)習(xí)教程之HTML屬性綁定的方法
這篇文章主要給大家介紹了關(guān)于Angular4學(xué)習(xí)教程之HTML屬性綁定的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2018-01-01
解決ng-repeat產(chǎn)生的ng-model中取不到值的問題
今天小編就為大家分享一篇解決ng-repeat產(chǎn)生的ng-model中取不到值的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-10-10