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 13+開發(fā)模式慢的原因及構(gòu)建性能優(yōu)化解析
這篇文章主要為大家介紹了Angular 13+開發(fā)模式慢的原因及構(gòu)建性能優(yōu)化解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
promise是一種用異步的方式處理值的方法，promise是對(duì)象，代表了一個(gè)函數(shù)最終可能的返回值或者拋出的異常，在與遠(yuǎn)程對(duì)象打交道時(shí)我們可以把他看作是遠(yuǎn)程對(duì)象的一個(gè)代理，通過本文給大家介紹AngularJS中處理多個(gè)promise的方式及什么是promise，需要的朋友參考下2016-02-02
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
Angular實(shí)現(xiàn)的進(jìn)度條功能示例
這篇文章主要介紹了Angular實(shí)現(xiàn)的進(jìn)度條功能,結(jié)合實(shí)例形式較為詳細(xì)的分析了angular進(jìn)度條功能的相關(guān)界面布局、功能等操作技巧,需要的朋友可以參考下2018-02-02
Angularjs自定義指令實(shí)現(xiàn)三級(jí)聯(lián)動(dòng) 選擇地理位置
這篇文章主要介紹了Angularjs自定義指令實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)，選擇地理位置，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
Angular的Bootstrap(引導(dǎo))和Compiler(編譯)機(jī)制
這篇文章主要介紹了Angular的Bootstrap(引導(dǎo))和Compiler(編譯)機(jī)制的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-06-06
詳解封裝基礎(chǔ)的angular4的request請(qǐng)求方法
這篇文章主要介紹了詳解封裝基礎(chǔ)的angular4的request請(qǐng)求方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-06-06
@angular前端項(xiàng)目代碼優(yōu)化之構(gòu)建Api Tree的方法
這篇文章主要介紹了@angular前端項(xiàng)目代碼優(yōu)化之構(gòu)建Api Tree的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-12-12
angular實(shí)現(xiàn)spa單頁面應(yīng)用實(shí)例
本篇文章主要介紹了angular實(shí)現(xiàn)spa單頁面應(yīng)用實(shí)例，小本篇文章是對(duì)單頁面的一個(gè)簡單的基本邏輯操作，這個(gè)方法可以搭建基本的單頁面的邏輯結(jié)構(gòu)。一起跟隨小編過來看看吧2017-07-07
用AngularJS的指令實(shí)現(xiàn)tabs切換效果
這篇文章介紹的是寫一個(gè)通過指令嵌套實(shí)現(xiàn)tabs功能的指令模塊，這也是我在一個(gè)項(xiàng)目中應(yīng)用到的，現(xiàn)在分享給大家，有需要的可以參考借鑒。2016-08-08