处理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)

以免如上的问题。