JavaScript中的新數組切片表示法——array[start:stop:step]
使用這種新的切片表示法,我們將不再編寫如下的 slice() 代碼:
圖片
而是可以像這樣編寫代碼:
圖片
這種寫法不僅更簡潔、可讀性更強,而且更直觀。
更棒的是,我們不必等到它正式發布——現在就可以使用它。你可以通過擴展 Array 類來實現這個功能:
圖片
處理未指定的結束索引
如果我們省略第二個數字(即 end 參數),數組會切片到最后一個元素嗎?
圖片
它不會這樣做?
圖片
這是因為 end 被賦值為空字符串,而 Number('') 的結果是 0,所以我們得到了 arr.slice(n, 0),它總是返回一個空數組。
為了解決這個問題,我們可以對 r() 方法進行升級,使其能夠正確處理這種情況:
圖片
圖片
處理負索引
這個新方法能處理負索引嗎?
圖片
當然可以!
圖片
負的 start 或 end 值會直接傳遞給 slice(),因為它已經內置了對負索引的支持。
起始-結束-步長
我們再次升級,支持 array[start:stop:step],也就是支持以固定的間隔跳過數組中的元素。
正如我們在 Python 中所見的那樣:
圖片
然而,slice() 本身并不支持步長,所以我們需要使用一個 for 循環來快速遍歷數組:
圖片
圖片
Array.reduce() 以不可變的方式完成了完全相同的任務。我認為,在數據轉換的過程中,函數式編程的流動性使得它顯得格外優雅。
可讀性受到影響了…
圖片
反向步長
如果我們想要反向遍歷數組呢?
當然 Python 有它:
圖片
在這種情況下,start 應該大于 stop,因為你是從右向左計數,所以 start 應該更大一些。
圖片
我們需要再次調整 slice() 的使用方式,當 step 為負數時交換 absStart 和 absEnd:
圖片
slice() 在 end > start 時會返回一個空數組,這樣我們就能夠使用它進行一些基礎操作。
圖片
綜合實現
現在,讓我們將所有功能組合在一起:
圖片
圖片
圖片
回顧一下我們是如何開始的:
圖片
這不僅簡化了代碼,而且成功將 Python 中的酷炫數組切片語法帶入了 JavaScript。
當然,代碼中我們還沒有添加對錯誤類型和邊界情況的檢查,花了不少時間調試這些問題。如果我們進一步添加多維數組支持,比如 numpy,代碼會變得更加復雜,但這也是值得嘗試的。
圖片
通過這個新的 Array r() 方法,我們成功地將 Python 的數組切片語法引入了 JavaScript。