之前在寫微信小程式專案時，里面有一個“城市選擇”的功能，筆者用的是 <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,key,value);
}
});
}
實驗一下：
行舟客
CSDN認證博客專家
ECMAScript 6
Node.js
CSS
CSDN認證博客專家
ECMAScript 6
Node.js
CSS
江湖人稱“云小夢”，一個大前端路上還未“畢業”的“小學生”，愛好分享、執著探索、樂于開源；曾參與過中大型微信小程式專案前端開發，并主導過一些官網（原生）開發；著迷于vue、node、css以及原生js技術，熱衷研究現有技術的成型創新應用，目前對前端AI和RTC感興趣，開源且目前維護的有：微信小程式擴展組件庫—— https://github.com/1314mxc/yunUI ，歡迎star！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/246868.html
標籤：其他