浅谈javascript中for in 和 for each in的区别

两个循环结构在JavaScript中都被用来遍历对象，但它们之间存在显著的区别。尽管你可能会疑惑，为什么已经有了for..循环后还要引入for each in语句，这主要源于它们各自的应用场景和特点。

一、历史与兼容性

for..循环是JavaScript 1.0就发布的功能，它允许遍历对象的属性。而for each in语句则是作为E4X（一种XML处理标准）的一部分，在JavaScript 1.6中被引入，值得注意的是，它不是ECMAScript标准的一部分。这意味着在不同的浏览器中存在兼容性问题，特别是在一些旧版本的IE浏览器（如IE6、IE7、IE8等）中可能无法使用。

二、功能与应用

让我们通过一个具体的例子来进一步理解它们之间的差异。假设我们有一个对象长方形，其包含属性高和宽。

使用for..循环遍历对象时，可以获取到对象的属性名及其对应的值。当我们遍历上述的长方形对象时，会依次弹出“高，15”和“宽，25”。

使用for each in语句时，情况则有所不同。这个语句结构在遍历对象时，只能获取到对象的属性值，而无法获取到属性名。当我们尝试用for each in遍历上述的长方形对象时，会依次弹出“15，undefined”和“25，undefined”。这是因为for each in只能获取到属性的值，而无法知道这些值对应的是哪个属性。

三、使用建议

1. 当需要遍历普通数组时，推荐使用原生的for循环。这是因为for..和for each in在遍历数组时可能存在顺序问题，并且存在浏览器兼容性问题。

2. 当需要遍历对象时，由于普通的for循环无法提供理想的遍历效果，因此可以选择使用for..循环。相较于for each in，for..具有更大的优势，因为它可以同时获取属性名和属性值。而且，for each in在许多旧版浏览器中的支持情况并不理想。

这两种循环结构各有其特点和应用场景。在选择使用哪种循环时，需要根据具体的需求和场景来决定。也需要注意它们在不同浏览器中的兼容性问题。希望以上内容能对你有所帮助。