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