js中的賦值 淺拷貝和深拷貝詳細(xì)
前言:
在學(xué)習(xí)下面文章前我們簡單了解一下的內(nèi)存的知識,以下先簡要提一下
1、js內(nèi)存
js內(nèi)存,或者說大部分語言的內(nèi)存都分為棧和堆?;緮?shù)據(jù)類型的變量值分配在棧上,引用數(shù)據(jù)類型的變量值分配在堆上,棧中只是存儲具體堆中對象的地址。
2、賦值
對于基本數(shù)據(jù)類型,賦值操作是拷貝,即新舊變量不會相互影響。
var a = 1; var b = a; b = 2; console.log(b); // 2
對于引用數(shù)據(jù)類型,賦值操作只是在棧中新增一個指向堆中對象的變量,即復(fù)制引用地址。新舊變量之間會互相影響,即在新變量上改變對象值,舊變量對應(yīng)值也會改變。
var a = { name: "mike" }; var b = a; b.name = "jack"; console.log(a); // {name: "jack"}
3、淺拷貝
對于基本數(shù)據(jù)類型和不具有嵌套對象的數(shù)據(jù),均是拷貝操作,新舊變量之間不會相互影響。
var a = { name: "mike" }; var b = {}; b.name = a.name; b.name = "jack"; console.log(a) // {name: "mike"}
但是對于具有嵌套對象的數(shù)據(jù),淺拷貝只拷貝第一層對象,深層次的值仍然是復(fù)制引用地址。
var a = { name: "mike", language: { first: "english", second: "chinese" } }; var b = {}; b.name = a.name; b.name = "jack"; b.language = a.language; b.language.first = "japanese" console.log(a) // { language : {first: "japanese", second: "chinese"}}
js實現(xiàn)淺拷貝,思想:遍歷target
的每個屬性,將起屬性名和值賦值給新變量。
如果你明白了賦值的含義,那么在代碼的第四行,當(dāng)此時的target[key]
的值是對象的時候,通過賦值賦予新變量,本質(zhì)上是復(fù)制引用數(shù)據(jù)類型在堆中的地址,就不難理解為什么淺拷貝對于是否是嵌套對象的有不同結(jié)果了。
function shallowCopy(target) { let result = {}; for (const key in target) { result[key] = target[key]; } return result; }
4、深拷貝
深拷貝是完完全全的拷貝,新舊變量之間不會相互影響。
對于參數(shù)是否是對象有不同的處理方法,如果是對象,對于對象的每個屬性和值賦值然后遞歸處理; 否則直接返回。
function clone(target) { if (typeof target === "object") { //判斷是否是數(shù)組 let result = Array.isArray(target)? [] : {}; for (const key in target) { result[key] = clone(target[key]); } return result; } else { return target; } }
到此這篇關(guān)于js中的賦值 淺拷貝和深拷貝詳細(xì)的文章就介紹到這了,更多相關(guān)js中的賦值 淺拷貝和深拷貝內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript前端學(xué)算法題解LeetCode最大重復(fù)子字符串
這篇文章主要為大家介紹了JavaScript前端學(xué)算法題解LeetCode最大重復(fù)子字符串,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-09-09前端利用jsencrypt.js進(jìn)行RSA加密示例詳解
這篇文章主要為大家介紹了前端利用jsencrypt.js進(jìn)行RSA加密示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08lodash內(nèi)部方法getData和setData實例解析
本篇章我們將了解lodash里內(nèi)部關(guān)于Data的操作方法,重點關(guān)注getData、setData兩個內(nèi)部方法,同時由實現(xiàn)上引申其他內(nèi)部封裝的方法,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-08-08