for in 遍历的兼容性问题探讨

(2012-12-23 17:03:29)

转载▼

标签：  兼容性   forin   浏览器   遍历   对象

分类： Javascript

            for in 用来数组和对象的遍历，确实比较方便，然作为前端开发者不得不注意是其对各种浏览器的兼容性。这里兼容性不是指 浏览器对for in遍历方法的支持，而是不同的浏览器的遍历顺序不同。

测试例子：

             var obj = { a: "40", b: '2', c: "15" }; 

            var str = "";

            delete obj['40'];

            obj['40'] = 40;

            for (var key in obj) {

                str += key + ",";

            }

            alert(str);

一 ：不同浏览器 对象的 delete    的方式不同。

        例：

             var obj = { a: "40", b: '2', c: "15" }; 

            var str = "";

            delete obj['a'];

            obj['a'] = 40;

            for (var key in obj) {

                str += key + ",";

            }

            alert(str);

        这里对对象obj的obj.a 进行了delect ，然后再为对象赋值。在这个过程，不同的浏览器的表现是不同的，

         火狐 谷歌  在delect时，是注销掉obj.a，在为对象赋值时，是在对象后面增加了一个新的obj.a，故其顺序为 b,c,a。

        而IE 在delect时，是清空obj.a的属性值， 在为对象赋值时，则是为obj.a赋值。故其顺序依然为a,b,c。

        这是在理解forin顺序差异第一个重要问题，浏览器的机制差异。

二： 如果key 是非数字（不包括“数字“），它的顺序在不同浏览器的顺序是一致的，按照先后顺序。

        例：

             var obj = { a: "40", b: '2', c: "15" }; 

            var str = "";

            for (var key in obj) {

                str += key + ",";

            }

            alert(str);

        谷歌，火狐，IE浏览器均为 a,b,c。

三： 如果key 是数字（包括“数字“），它的顺序在不同浏览器的顺序是不同的。

        例：

             var obj = { 40: "40", 2: '2', 15: "15" }; 

            var str = "";

            for (var key in obj) {

                str += key + ",";

            }

            alert(str);

        火狐依然是按照顺序。其结果 40,2,15.

         IE 7,8,9 chrome 按照key的大小 ,从小到大排序 结果为 2,15,40.

四：如果 key 是数字（包括“数字“），而且使用了 delete  

        首先是按照不同浏览器的的delete的机制，然后再按照上面二，三的规则的顺序输出。

总结： JS先驱者都告诫过我们不要对数组对象使用for in语句进行遍历。在遍历数组时，尽量避免使用for in ，而是采用原生的for方法。在遍历对象时，而且对顺序要求不高，可以for in 。