vue ios9 下for in 数组遍历问题

一、现象

        前段时间在做一个基于vue的项目，在进行手机兼容性问题测试的时候，发现ios 9环境下关于数组遍历的问题。在此进行简单的复盘，并探讨解决方案。

        具体现象表现为：在vue 的data中声明一个数组,然后给个默认的初始化值，如

        data() { 

                     return {list: [2]}

         }

        这里声明了一个list数组，包含一个元素2。然后在ios9下用for... in...方式遍历数组的时候，发现了一个奇特现象（其他ios9和android系统并没有出现问题），即数组元素重复遍历了两次。测试代码如下：

        for (let i in this.list) {

                console.log("let in this.list = " +i)

        }

        这里的log将会打印两次。

二、原因

        对于上述现象，首先怀疑是ios9下的兼容性问题，但是本着探根究底的态度，想确认下到底是vue的问题还是ios9下的问题，于是又测试了一下代码：

        let list=[2]

        for (let i in list) {

                console.log("let in local list = " +i)

        }

        注意，这里是在方法体内声明了本地list，惊奇的是，在ios9下再次测试发现log并没有打印两次，而是一次，符合正确的程序运行预期。

        综上两次试验可以得知，这里并不能完全确认是ios9的问题还是vue的问题，但是因为方法体内for...in遍历是ok的，而data中的数组遍历却不正确，只能说明vue问题的可能性较大。具体是什么原因，有兴趣的读者可以自行研究下vue源码。

三、解决方案

    首先for...in这种遍历方法对于遍历数组、对象来说是不建议使用的。它会罗列出自身及原型链上所有可枚举的属性，这种情况下极易产生未知错误，请看下面例子：

        Array.prototype.test =function () {return "I am test";};

        var a = [1,2];

        for (let i in a) {

                console.log(i);

        }

    这里你会发现竟然打印了除了打印1、2外，还打印出了test 。所以这就是问题。

    针对于ios9 下vue  for...in循环的问题虽然不像上面问题产生的那么直观，但是确实是产生了 类似的现象，只不过是重复了标准的数字元素而已。因此解决方案可以采用普通的for循环即可解决：

        for (let i = 0; i < this.list.length; i++) {

                console.log(i)

        }