【js】js中的for-in(你让我情何以堪)

最近在写一个小demo，码前端的时候发现一个js中很深的坑：

  因为前端收到服务器端传来的数据是一串用“，”隔开的字符串，在处理的时候直接用string.spilt()方法给断成了一个字符串数组，以便食用；所以在取数组元素的时候想到了用for-in去遍历（python的禅念入骨已深）。

然鹅！

然鹅！

然鹅！

  我还是太年轻了！完全不知道自己已经陷入了一个巨大（zhi zhang）的陷阱！本来完美无缺（bu shi hen lan）的代码突然变得焦躁起来，大家似乎都对我有不同的意见，争先恐后的抱起了八阿哥。呜呜呜，不说了，浪费半天时间……
上代码！

一开始我是这么搞的：

var arr = ["please", "dont", "cast", "my", "type"];

for (var a in arr) {
    document.getElementById(a).value = a;
}

原代码比较繁琐，上面是示例代码，大概就是这么个操作。
然后就一直报错啊，提示信息如下：
Uncaught TypeError: Cannot set property 'value' of null at :2:38
  到这基本上就知道是因为dom元素没有被拿到了，就在循环体里面的第一行加了句console.log(document.getElementById(a))，打出来是null没错，但想来想去还是不明白为什么（压根就没怀疑for-in这奇葩的语句）。
  折腾了半天没办法，只好再前置了一句console.log(a)想着试一试。诶？？？为什么输出的是些奇怪的东西？

var arr = ["please", "dont", "cast", "my", "type"];

for (var a in arr) {
    console.log(a);
    //document.getElementById(a).value = a;
}
//
 0
 1
 2
 3
 4
 shuffle

这是把arr的索引给遍历出来了吗？再查看一下a的类型：

var arr = ["please", "dont", "cast", "my", "type"];

for (var a in arr) {
    console.log(typeof a);
    //document.getElementById(a).value = a;
}
6 string

这什么鬼？难道for-in是用来遍历对象的索引的？
验证一下吧：

//
> var ob = {1:"aa", 2:"bb", 3:"cc"}
< undefined
> ob
< {1: "aa", 2: "bb", 3: "cc"}
  1: "aa"2: "bb"3: "cc"__proto__: Object
> for (var o in ob) {
      console.log(o);
  }
> 1
> 2
> 3
> undefined

//
> var oc = {"a1": "aaa", "a2": "bbb", "a3": "ccc"}
< undefined
> oc
< {a1: "aaa", a2: "bbb", a3: "ccc"}
  a1: "aaa"a2: "bbb"a3: "ccc"__proto__: Object
> for (var o in oc) {
      console.log(o);
  }
> a1
> a2
> a3
< undefined

看来，对于“对象”，for-in语句遍历出来的是属性没错了。

!!!但是，对于数组，不要用for-in去遍历它的索引，因为会出现莫名其妙的东西，比如上面遍历数组的代码，最后一个遍历出的是shuffle，这个是数组原型链中的一个属性，在这里被莫名其妙的搞出来了。

如果想遍历数组元素，可以用for-of语句，也可以用forEach语句。

最后，看来代码不是想当然那么简单啊，语言之间是有那么些共通的地方，但更多的是多姿多彩又各自不同的差异，路漫漫其修远兮，我还是那个沉迷于各种语言的我。