一、现象
前段时间在做一个基于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)
}
网友评论