React二維數(shù)組的幾種聲明和使用過程
React二維數(shù)組的幾種聲明和使用
React中對(duì)二維數(shù)組的聲明和使用的方式有多種,其中存在一些常見的錯(cuò)誤使用情況。
例如const map=[[]] 這樣定義二維數(shù)組,本篇文章給大家解析一下react數(shù)組使用的正確方法和錯(cuò)誤使用的錯(cuò)誤原因。
如果我們要使用的二維數(shù)組是有默認(rèn)值的,那我們可以直接在聲明時(shí)賦值,例如這樣:
const map = [[1,2],[3,4],[5,6]];
這個(gè)map變量的值是可變的,但是它的結(jié)構(gòu)是不可變的,要修改它可以這樣寫:
map[0] = [1,2,3]
但是,如果我們這樣寫就會(huì)報(bào)錯(cuò):
map[3] = [1,2,3]
因?yàn)槲覀儗?duì)map的定義初始化的時(shí)候,按照react的語法,只要值不為空,那么數(shù)組的大小就是不可變的,但是數(shù)組的值是可變的。所以我們給map[3]賦值,這個(gè)map[3]并不存在,map只有0到2三個(gè)值,就會(huì)報(bào)錯(cuò)。
但是對(duì)于map[0],[1,2]是它的一個(gè)值,這個(gè)值可以被整體替換為 [1,2,3],沒有問題。
按這個(gè)道理
如果我們這樣做也是會(huì)報(bào)數(shù)組溢出的:
map[3][4] = 1;
如果我們想要數(shù)組的大小動(dòng)態(tài)可變?cè)趺崔k呢,我們可以這樣來初始化:
const map = []
這里把map首先定義為一個(gè)數(shù)組,這個(gè)時(shí)候[]內(nèi)沒有值,就代表這是一個(gè)沒有初始值的數(shù)組,其數(shù)組大小不是0,而是不確定,可以動(dòng)態(tài)賦值,例如:
map[0] = []
這里我們給map加了一個(gè)0號(hào)元素,值也是一個(gè)不確定大小的未初始化數(shù)組,這個(gè)數(shù)組也可以被動(dòng)態(tài)添加值:
map[0] [0] = 1;
但是我們要注意,當(dāng)map[0]被賦值時(shí),map的大小才會(huì)擴(kuò)展為1,如果沒有給map[0]賦值,直接給map[1]賦值時(shí)是不能成功的:
按照這個(gè)理論
如果我們要初始化一個(gè)動(dòng)態(tài)擴(kuò)展的二維數(shù)組,我們應(yīng)該這樣做:
const map = [];
//在使用時(shí),動(dòng)態(tài)擴(kuò)展
for(var i=0;i<count;i++){
map[i] = [];
}
我們要給map定義為一個(gè)一維數(shù)組,然后動(dòng)態(tài)添加數(shù)組元素作為其元素值。
注意,不能這樣寫:
const map = [[]];
看似定義了一個(gè)空的二維數(shù)組,實(shí)則不然,這個(gè)寫法的意思是定義了一個(gè)數(shù)組,數(shù)組中只有一個(gè)數(shù)組類型的元素,外層[]中的[]代表了一個(gè)元素,相當(dāng)于給了外層數(shù)組初始值,這個(gè)數(shù)組就不是動(dòng)態(tài)可擴(kuò)展的了,而是外層只能有一個(gè)元素,這時(shí)map[1]就是不存在也不可賦值的。
總結(jié)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
react源碼層分析協(xié)調(diào)與調(diào)度
本文主要介紹了深入理解React協(xié)調(diào)與調(diào)度(Scheduler)原理,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2022-10-10
詳解React中的useMemo和useCallback的區(qū)別
React中的useMemo和useCallback是兩個(gè)重要的Hooks。常常被用于優(yōu)化組件的性能。雖然這兩個(gè)Hooks看起來很相似,但它們彼此之間還是有很大的區(qū)別的,隨著小編一起來學(xué)習(xí)吧2023-04-04
React實(shí)現(xiàn)PDF預(yù)覽功能與終極優(yōu)化
在前端開發(fā)中,PDF 預(yù)覽是個(gè)常見需求,本文主要來帶大家認(rèn)識(shí)一個(gè)基于 react-pdf 的自定義 PDF 預(yù)覽組件 PDFView,感興趣的小伙伴可以了解下2025-05-05
詳解react如何實(shí)現(xiàn)復(fù)合組件
在一些react項(xiàng)目開發(fā)中,常常會(huì)出現(xiàn)一些組合的情況出現(xiàn),這篇文章主要為大家介紹了復(fù)合組件的具體實(shí)現(xiàn),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-10-10
react實(shí)現(xiàn)頭部導(dǎo)航,選中狀態(tài)底部出現(xiàn)藍(lán)色條塊問題
這篇文章主要介紹了react實(shí)現(xiàn)頭部導(dǎo)航,選中狀態(tài)底部出現(xiàn)藍(lán)色條塊問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
React實(shí)現(xiàn)雙滑塊交叉滑動(dòng)
這篇文章主要為大家詳細(xì)介紹了React實(shí)現(xiàn)雙滑塊交叉滑動(dòng),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09
React關(guān)于antd table中select的設(shè)值更新問題
這篇文章主要介紹了React關(guān)于antd table中select的設(shè)值更新問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
React?實(shí)現(xiàn)具備吸頂和吸底功能組件實(shí)例
這篇文章主要為大家介紹了React?實(shí)現(xiàn)具備吸頂和吸底功能組件實(shí)例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-02-02

