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或者其他語言中,都有深拷貝和淺拷貝這兩個名詞。在第一段代碼中,a和b都是基本數(shù)據(jù)類型,當(dāng)復(fù)制彼此的值之后,再改變值。此時a的值并沒有隨著b的值的改變而改變,這就是深拷貝。當(dāng)數(shù)據(jù)類型為數(shù)組或者對象這些復(fù)雜數(shù)據(jù)類型時,復(fù)制到數(shù)組或者對象之后,再改變數(shù)組或者對象的值,a的值也隨著b的值改變而改變,這就是淺拷貝。
怎樣解決深拷貝這個問題呢?
數(shù)組數(shù)據(jù)類型:使用concat()方法。b = a.concat();此時改變b的值,a的值就不會隨著b的值的改變而改變。
對象數(shù)據(jù)類型:b.name = a.name; b.age = a.age;此時,改變b的值,a的值就不會隨著b的值的改變而改變。但是,該方法需要知道a對象里邊都有哪些字段。一個一個的復(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);
此時,改變b的值,a的值就不會隨著b的值的改變而改變,也就解決了深拷貝的問題。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Angular 13+開發(fā)模式慢的原因及構(gòu)建性能優(yōu)化解析
這篇文章主要為大家介紹了Angular 13+開發(fā)模式慢的原因及構(gòu)建性能優(yōu)化解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-12-12
Angular.js中ng-if、ng-show和ng-hide的區(qū)別介紹
angularJS中的ng-show、ng-hide、ng-if指令都可以用來控制dom元素的顯示或隱藏。那么這篇文章就給大家主要介紹了Angular.js中ng-if、ng-show和ng-hide的區(qū)別,需要的朋友可以參考借鑒,下面來一起看看吧。2017-01-01
Angularjs自定義指令實現(xiàn)三級聯(lián)動 選擇地理位置
這篇文章主要介紹了Angularjs自定義指令實現(xiàn)三級聯(lián)動,選擇地理位置,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-02-02
Angular的Bootstrap(引導(dǎo))和Compiler(編譯)機(jī)制
這篇文章主要介紹了Angular的Bootstrap(引導(dǎo))和Compiler(編譯)機(jī)制的相關(guān)資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2016-06-06
詳解封裝基礎(chǔ)的angular4的request請求方法
這篇文章主要介紹了詳解封裝基礎(chǔ)的angular4的request請求方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
@angular前端項目代碼優(yōu)化之構(gòu)建Api Tree的方法
這篇文章主要介紹了@angular前端項目代碼優(yōu)化之構(gòu)建Api Tree的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
angular實現(xiàn)spa單頁面應(yīng)用實例
本篇文章主要介紹了angular實現(xiàn)spa單頁面應(yīng)用實例,小本篇文章是對單頁面的一個簡單的基本邏輯操作,這個方法可以搭建基本的單頁面的邏輯結(jié)構(gòu)。一起跟隨小編過來看看吧2017-07-07

