摘要:原理中的數(shù)據(jù)類型分為兩類,簡單數(shù)據(jù)類型和復(fù)雜數(shù)據(jù)類型簡單數(shù)據(jù)類型包括數(shù)值,字符串布爾值復(fù)雜數(shù)據(jù)類型對象即屬性的集合先了解數(shù)據(jù)類型在計(jì)算機(jī)中的存儲簡單數(shù)據(jù)類型存儲的是對象的原始數(shù)據(jù)復(fù)雜數(shù)據(jù)類型對象的原型也是引用類型,對象類型的值多帶帶存放。
在js中將一個(gè)值a賦值給另一個(gè)值b,在什么情況下改變了b的值會影響a的值?在知道哪種類型賦值后改變值會影響原對象的情況下該怎么做才不會影響原對象?就是這里需要討論的問題。
首先是哪種類型賦值后改變賦值后的值會影響到被賦值的值?
let a = 1; let b = a; b = 2; console.log(a) // 1 let obj = {a: 1} let obj2 = obj; obj2.a = 2; console.log(obj) // {a: 2}
從這里我們可以知道:簡單數(shù)據(jù)類型的number賦值后就算改變賦值后的值也不會影響到其本身,但是對象復(fù)制后改變了賦值后的值就會影響到其本身。
原理:javaScript中的數(shù)據(jù)類型分為兩類,簡單數(shù)據(jù)類型和復(fù)雜數(shù)據(jù)類型;
1.簡單數(shù)據(jù)類型:包括數(shù)值,字符串、布爾值、null、undefined;
2.復(fù)雜數(shù)據(jù)類型:對象即屬性的集合(function、Array、Object);
先了解數(shù)據(jù)類型在計(jì)算機(jī)中的存儲;
1.簡單數(shù)據(jù)類型:存儲的是對象的原始數(shù)據(jù);
2.復(fù)雜數(shù)據(jù)類型:對象的原型也是引用類型,對象類型的值多帶帶存放。對象原型的方法和屬性放在內(nèi)存中,通過原型鏈的方式來指向這個(gè)地址;所以對象類型存儲的是對象的引用地址;
對象類型在復(fù)制的時(shí)候,只是將對象的引用復(fù)制了,將a對象的引用地址值賦值給了b
所以在b改變對象屬性值的時(shí)候,a的引用也發(fā)生了改變,它們在內(nèi)存中獲取的都是同一個(gè)對象;
如果想要復(fù)制一個(gè)復(fù)雜數(shù)據(jù)類型卻不想影響原對象,此時(shí)就需要用到深拷貝/淺拷貝。
淺拷貝:
首先由一個(gè)數(shù)組[1,2,3]或?qū)ο髙name:"porco", age:1},這樣的數(shù)組或?qū)ο笾械闹到y(tǒng)一不為[數(shù)組array]或[對象obj]的只有一層數(shù)據(jù)結(jié)構(gòu)的簡單對象,被稱為淺拷貝對象,如果單純的賦值使用例如let a = [1,2,3],如果改變了a,那么原數(shù)組也會相應(yīng)的被改變,對象也是一樣。所以遇到這種情況,想要復(fù)制的對象的改變不想影響到原對象,就需要淺拷貝方法:如下
/** * 淺拷貝對象: **/ let obj = {a:1,b:2} let obj2 = {}; /*方法1*/ for(let e in obj) { obj2[e] = obj[e] } /*方法2*/ Object.keys(obj).forEach(e => { obj2[e] = obj[e] }) obj2.a = 0; console.log(obj2) //{a:0, b:2} console.log(obj) //{a:1, b:2} /*這里還可以使用兩種es6淺拷貝方式*/ /*這是直接淺拷貝:*/ let obj2 = Object.assign({}, obj); /*以及直接使用拓展運(yùn)算符拷貝*/ let obj2 = {...obj} /*以上四種方式均可作為淺拷貝對象的方式*/ /***********************************/ /** * 淺拷貝數(shù)組: **/ let arr = [1,2,3] /*第一種淺拷貝數(shù)組方式*/ let arr2 = arr.slice(); /*第二種淺拷貝數(shù)組方式*/ let arr2 = arr.concat(); /*第三種淺拷貝數(shù)組方式*/ let arr2 = []; arr.forEach(e => { arr2.push(e) }) arr2.[0] = 0; console.log(arr2) //[0,2,3] console.log(arr) //[1,2,3]
深拷貝:
當(dāng)對象中的第一層級有一項(xiàng)是數(shù)組或?qū)ο螅瑴\拷貝失效,例如:let a = [{a:1}]或let a = {a:{aa:1}},這樣,使用上面的方法都會失效。這時(shí)必須使用深拷貝
1、最簡單的辦法
let BBB = JSON.parse(JSON.stringify(AAA))
這種方法簡單適用于普通場景,但是也會拋棄對象的constructor,不管之前的構(gòu)造函數(shù)什么樣,深拷貝后都會變成object.這種方法能正確處理的對象只有 Number, String, Boolean, Array, 并且能用jso格式直接表示的數(shù)據(jù)結(jié)構(gòu)。
2、一個(gè)遞歸方法:
function deepClone(obj) { let objClone = Array.isArray(obj) ? [] : {}; if(obj && typeof obj === "object") { for(let key in obj) { if(obj.hasOwnProperty(key)) { if(obj[key] && typeof obj[key] === "object") { objClone[key] = deepClone(obj[key]); } else { objClone[key] = obj[key]; } } } } return objClone }
以上就是討論了哪些值類型賦值不需要使用拷貝,哪些值類型賦值需要淺拷貝,哪些值類型賦值需要深拷貝
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/101662.html
摘要:前言里面淺拷貝和深拷貝是非常關(guān)鍵的知識點(diǎn),今天就來通過本文清楚的了解深淺拷貝以及該如何實(shí)現(xiàn)這兩種拷貝方式。對象的拷貝又分為淺拷貝和深拷貝。印證了上述所說的對于所有的基本類型,簡單的賦值已經(jīng)是實(shí)現(xiàn)了深拷貝。 前言 JavaScript里面淺拷貝和深拷貝是非常關(guān)鍵的知識點(diǎn),今天就來通過本文清楚的了解深淺拷貝以及該如何實(shí)現(xiàn)這兩種拷貝方式。 深淺拷貝的區(qū)別 拷貝:其實(shí)就是一個(gè)對象復(fù)制給另外...
摘要:引用類型參數(shù)的傳遞與引用類型的復(fù)制一樣,傳遞的是內(nèi)存地址。指向一個(gè)新的地址,與不再指向同一個(gè)地址官方解釋來一發(fā)中所有函數(shù)的參數(shù)都是按值傳遞的。總結(jié)很簡單,函數(shù)參數(shù)都是按值傳遞都是棧內(nèi)數(shù)據(jù)的拷貝。 基本類型與引用類型 值類型(基本類型):String,Number,Boolean,Null,Undefined。 引用類型:Array、Object、Function、Date等有多個(gè)值...
摘要:引用類型參數(shù)的傳遞與引用類型的復(fù)制一樣,傳遞的是內(nèi)存地址。指向一個(gè)新的地址,與不再指向同一個(gè)地址官方解釋來一發(fā)中所有函數(shù)的參數(shù)都是按值傳遞的??偨Y(jié)很簡單,函數(shù)參數(shù)都是按值傳遞都是棧內(nèi)數(shù)據(jù)的拷貝。 基本類型與引用類型 值類型(基本類型):String,Number,Boolean,Null,Undefined。 引用類型:Array、Object、Function、Date等有多個(gè)值...
摘要:它將返回目標(biāo)對象。有些文章說是深拷貝,其實(shí)這是不正確的。深拷貝相比于淺拷貝速度較慢并且花銷較大??截惽昂髢蓚€(gè)對象互不影響。使用深拷貝的場景完全改變變量之后對沒有任何影響,這就是深拷貝的魔力。 一、賦值(Copy) 賦值是將某一數(shù)值或?qū)ο筚x給某個(gè)變量的過程,分為: 1、基本數(shù)據(jù)類型:賦值,賦值之后兩個(gè)變量互不影響 2、引用數(shù)據(jù)類型:賦址,兩個(gè)變量具有相同的引用,指向同一個(gè)對象,相互之間有...
閱讀 1357·2021-09-02 10:19
閱讀 1100·2019-08-26 13:25
閱讀 2108·2019-08-26 11:37
閱讀 2413·2019-08-26 10:18
閱讀 2675·2019-08-23 16:43
閱讀 2988·2019-08-23 16:25
閱讀 775·2019-08-23 15:53
閱讀 3297·2019-08-23 15:11