之前在寫微信小程式專案時，裡面有一個“城市選擇”的功能，筆者用的是 <picker-view> 元件，這個元件比較特別，因為它的 value 屬性規定是 陣列 格式的。比如： value="[1]"。

因為當時對JS變數型別轉換的不瞭解，筆者在程式碼中寫下了這樣的幾行判斷：（這是嚴謹的）

let val_one=typeof this.data.pIndex=="number"?[this.daya.pIndex]:this.data.pIndex

（：專案中存取元素是動態的！

上面這是因為要使下標動態跟隨使用者選擇，並反饋到wxml裡的 value 屬性上展示。

但是在這之前還需要做一層判斷 —— 因為有的地區是省級市或者直轄市，而且要防止使用者“騷操作”，比如一直上拉或者猛的拉出去，這時候再微信小程式中是會報錯找不到對應資料的：

let length=placeArray[val_one].sub.length
if(val[0]>=length){
 val=[length-1]
}else if(val[0]<0){
 val=[0]
}

之後我再回過頭優化這個專案程式碼時發現這裡（強制使用時將陣列轉為數字，反饋時將數字轉為陣列）其實大可不必：

JavaScript似乎對資料有自己“獨特”的處理方式，但是目前筆者還沒找到相關資料~~

如何判斷一個值能不能作為陣列下標（索引）

但是可以肯定的是：為整數屬性鍵賦值是陣列才有的特例，因為它們與非整數鍵的處理方式不同。要判斷一個屬性是否能作為陣列的索引，筆者找到了ES6規範文件中的一段話：

當前僅當 ToString(ToUint32(P)) 等於P，並且 ToUint32(P) 不等於 2^32-1 時，字串屬性名稱P才是一個數組索引。

這個操作用JS可以這樣實現：

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() 函式通過規範中描述的演算法將給定的值轉換為無符號32位整數；isArrayIndex() 函式中先將鍵轉換為uint32結構，然後進行兩次比較（toString()後等不等於原數並且是否小於 2^32-1 ）

有了這個基礎，我們就可以基於此去簡單模仿一下 new Array() 的行為 —— 其中最重要的還是關於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是什麼型別都要執行這段程式碼
			return Reflect.set(trapTarget,value);
		}
	});
}

實驗一下：

總結

到此這篇關於JS陣列索引檢測中的資料型別問題詳解的文章就介紹到這了,更多相關JS陣列索引檢測的資料型別內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！