處理for-in用在數組上時候出現的詭異現象的問題

問題復現

var arr = ['a', 'b', 'c'];
var sid = ['Go'];
for (var key in arr) {
    sid[key + 1] = arr[key];
}
console.log(sid)

很簡單的問題，最後的輸出結果倒是：

[ 'Go', , , , , , , , , , , 'b', , , , , , , , , , 'c' ]

問題分析

經過上面的輸入結果咱們能夠發現這麼幾個問題：

1. sid裏面多了不少空項，length明顯的增多了

2. arr[0]的值在sid中沒有出現

問題1：sid裏面多了不少空項，length明顯的增多了

略過痛苦的分析步驟直接來重點內容：
經過打印key + 1咱們能夠找到問題的關鍵。經過打印咱們能夠獲得以下信息。
在第一次循環的時候key + 1的值爲01，此後依次爲：11,21。
經過這個咱們能夠判斷: 這個key實際上是一個String類型的。
因此上面的步驟至關於：

sid['01'] = arr[0];
sid['11'] = arr[1];
sid['21'] = arr[2];

究其緣由，我只能在淺層面做出解釋：
這多是由於for-in通常是用於對象的（狹義的對象），而對象的屬性是一個String類型，因此for-in的參數key被定義爲一個String類型。這並無考慮過數組的屬性名（下標）不是String類型，而是一個Number類型的狀況。因此就出現了上面的問題。此外在MDN的js語法關於for-in這塊出現過這樣的提示：

Note: for..in 不該該被用來迭代一個下標順序很重要的 Array .

可能就包含這種狀況吧。

問題2：arr[0]的值在sid中沒有出現

arr[0]的值其實經過sid['01']能夠取到。
此外，在node下打印sid的時候可能與在console中打印出現不一樣的結果。

問題解決

對於數組的遍歷，最好使用：forEach,map,some,filter,find等方法。尤爲是是這種牽扯到數組下標的儘可能不要使用for-in來處理，若是非要使用能夠作以下處理：

var arr = ['a', 'b', 'c'];
var sid = ['Go'];
for (var key in arr) {
    sid[parseInt(key) + 1] = arr[key];
}
console.log(sid)

以免如上的問題。