JS數(shù)組索引檢測中的數(shù)據(jù)類型問題詳解
之前在寫微信小程序項目時,里面有一個“城市選擇”的功能,筆者用的是 <picker-view> 組件,這個組件比較特別,因為它的 value 屬性規(guī)定是 數(shù)組 格式的。比如: value="[1]"。
因為當時對JS變量類型轉(zhuǎn)換的不了解,筆者在代碼中寫下了這樣的幾行判斷:(這是嚴謹?shù)模?/p>
let val_one=typeof this.data.pIndex=="number"?[this.daya.pIndex]:this.data.pIndex
(:項目中存取元素是動態(tài)的!
上面這是因為要使下標動態(tài)跟隨用戶選擇,并反饋到wxml里的 value 屬性上展示。
但是在這之前還需要做一層判斷 —— 因為有的地區(qū)是省級市或者直轄市,而且要防止用戶“騷操作”,比如一直上拉或者猛的拉出去,這時候再微信小程序中是會報錯找不到對應(yīng)數(shù)據(jù)的:
let length=placeArray[val_one].sub.length
if(val[0]>=length){
val=[length-1]
}else if(val[0]<0){
val=[0]
}
之后我再回過頭優(yōu)化這個項目代碼時發(fā)現(xiàn)這里(強制使用時將數(shù)組轉(zhuǎn)為數(shù)字,反饋時將數(shù)字轉(zhuǎn)為數(shù)組)其實大可不必:

JavaScript似乎對數(shù)據(jù)有自己“獨特”的處理方式,但是目前筆者還沒找到相關(guān)資料~~
如何判斷一個值能不能作為數(shù)組下標(索引)
但是可以肯定的是:為整數(shù)屬性鍵賦值是數(shù)組才有的特例,因為它們與非整數(shù)鍵的處理方式不同。要判斷一個屬性是否能作為數(shù)組的索引,筆者找到了ES6規(guī)范文檔中的一段話:
當前僅當
ToString(ToUint32(P))等于P,并且ToUint32(P)不等于2^32-1時,字符串屬性名稱P才是一個數(shù)組索引。
這個操作用JS可以這樣實現(xiàn):
function toUint32(value){
return Math.floor(Math.abs(Number(value))) % Math.pow(2,32);
}
function isArrayIndex(key){
let numericKey=toUint32(key);
return String(numericKey) == key && numericKey < (Math.pow(2,32)-1);
}
toUint32() 函數(shù)通過規(guī)范中描述的算法將給定的值轉(zhuǎn)換為無符號32位整數(shù);isArrayIndex() 函數(shù)中先將鍵轉(zhuǎn)換為uint32結(jié)構(gòu),然后進行兩次比較(toString()后等不等于原數(shù)并且是否小于 2^32-1 )
有了這個基礎(chǔ),我們就可以基于此去簡單模仿一下 new Array() 的行為 —— 其中最重要的還是關(guān)于length的描述:

function createArray(length=0){
return new Proxy({ length },{
set(trapTarget,key,value){
let currentLength=Reflect.get(trapTarget,"length");
if(isArrayIndex(key)){
let numericKey=Number(key);
if(numericKey >= currentLength){
Reflect.set(trapTarget,"length",numericKey+1);
}
}else if(key === "length"){
if(value < currentLength){
for(let index=currentLength-1;index >= value;index--){
Reflect.deleteProperty(trapTarget,index);
}
}
}
// 無論key是什么類型都要執(zhí)行這段代碼
return Reflect.set(trapTarget,key,value);
}
});
}
實驗一下:

總結(jié)
到此這篇關(guān)于JS數(shù)組索引檢測中的數(shù)據(jù)類型問題詳解的文章就介紹到這了,更多相關(guān)JS數(shù)組索引檢測的數(shù)據(jù)類型內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- JS中檢測數(shù)據(jù)類型的幾種方式及優(yōu)缺點小結(jié)
- 淺談javascript的數(shù)據(jù)類型檢測
- 關(guān)于JS數(shù)據(jù)類型檢測的多種方式總結(jié)
- js數(shù)據(jù)類型檢測總結(jié)
- JavaScript中檢測數(shù)據(jù)類型的四種方法
- javascript基本數(shù)據(jù)類型及類型檢測常用方法小結(jié)
- 在javaScript中檢測數(shù)據(jù)類型的幾種方式小結(jié)
- JavaScript數(shù)據(jù)類型檢測代碼分享
- js學習總結(jié)_基于數(shù)據(jù)類型檢測的四種方式(必看)
- js中各種數(shù)據(jù)類型檢測和判定的實戰(zhàn)示例
相關(guān)文章
文字溢出實現(xiàn)溢出的部分再放入一個新生成的div中具體代碼
說文字溢出,如何實現(xiàn)溢出的文字放入一個新生成的div中,原理就是判斷是否能在div里放下,如果不能,則在應(yīng)該斷開的地方,差入到新的div中2013-05-05
JS 滾動事件window.onscroll與position:fixed寫兼容IE6的回到頂部組件
這篇文章主要介紹了JS 滾動事件window.onscroll與position:fixed寫兼容IE6的回到頂部組件的相關(guān)資料,需要的朋友可以參考下2016-10-10
分享JavaScript獲取網(wǎng)頁關(guān)閉與取消關(guān)閉的事件
這篇文章主要介紹了JavaScript獲取網(wǎng)頁關(guān)閉與取消關(guān)閉的事件,有需要的朋友可以參考一下2013-12-12
JavaScript循環(huán)鏈表實現(xiàn)方法
這篇文章主要給大家介紹了關(guān)于JavaScript循環(huán)鏈表實現(xiàn)的相關(guān)資料,循環(huán)鏈表和單向鏈表很相似,唯一的區(qū)別是循環(huán)鏈表的尾節(jié)點是指向頭節(jié)點的,需要的朋友可以參考下2023-07-07
webpack學習--webpack經(jīng)典7分鐘入門教程
這篇文章主要介紹了webpack學習--webpack經(jīng)典7分鐘入門教程,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-06-06
JS生態(tài)系統(tǒng)加速一次一庫PostCSS SVGO的重構(gòu)源碼和性能優(yōu)化探索
這篇文章主要介紹了JS生態(tài)系統(tǒng)加速一次一庫PostCSS SVGO的重構(gòu)源碼和性能優(yōu)化探索,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2024-01-01

