为什么 for-in 还要遍历数组方法？

Question

在一个页面上，我使用与 google analitycs 代码类似的语法，将参数传递给另一个脚本。我遍历数组并尝试根据包含的脚本中的参数构造URL的查询部分。

问题是以下还遍历了 javascript 数组对象方法并弄乱了结果查询字符串。

index.html：

<script>
    var params = [];
    params['first'] = '1';
    params['second'] = '2';

    (function() {
          var vs = document.createElement('script');
          vs.async = true; vs.type = 'text/javascript';
          vs.src = 'http://my.domain.com/js/includedScript.js';
          var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(vs, s);
    })();
</script>

includedScript.js：

function(paramsArray) {
   tmpArray = [];
   for(i in paramsArray) {
      tmpArray.push(i + '=' + escape(paramsArray[i]));
   }
   var queryString = tmpArray.join('&');
}(params);

我得到（缩短）：

queryString == 'first=1&second=2&push&$family=function%20%28%29%20%7B%0A%20%20%20%20return%20lower%3B%0A%7D&$constructor=function%20Array%28%29%20%7B%0A%20%20%20%20%5Bnative%20code%5D%0A%7D&pop=function%20pop%28%29%20%7B%0A%20%20%20%20%5Bnative%20code%5D%0A%7D&push=function%20push%28%29%20%7B%0A%'

我希望：

queryString == 'first=1&second=2'

奇怪的是，在我的本地主机空白页上它运行良好。 index.html 页面上的其他一些 javascript 会与我的代码冲突吗？如何通过仅更改我的代码（最好只更改 includedScript.js 文件）来解决冲突？

提前致谢。

Answer 1

一个小改动：

var params = {}; // notice the difference here!
params['first'] = '1';
params['second'] = '2';

这里还有一个

for(i in paramsArray) {
  if(paramsArray.hasOwnProperty(i)){
    tmpArray.push(i + '=' + escape(paramsArray[i]));
  }
}

JavaScript 的Array 只能与数字索引一起使用。对于关联数组，请改用Object。还要确保您获得的属性是您添加的并且不属于原型使用hasOwnProperty。

请参阅the documentation on mozilla.org 了解更多信息。

数组是一组有序的值 与单个变量相关联 姓名。请注意，您不应该使用它 作为关联数组，使用 Object 而是。

您还可以阅读这篇文章： http://andrewdupont.net/2006/05/18/javascript-associative-arrays-considered-harmful/

---

注意：for ... in JavaScript 构造与Array 没有任何联系。它的目的是迭代 Object 属性，而不是 Array 元素。在 JavaScript 中 properties 还包括方法。

---

有趣的 JavaScript。

试试下面的代码，如果你感到惊讶，告诉我：

var x = [];
x['one'] = 1;
x['one'] = 2;
alert(x.length);

那就试试这个吧：

Object.prototype.myProp = 123;
var x = {one: 1, two: 2}
for(var prop in x){
  alert(x[prop]);
}

Answer 2

你想这样做

for (i in paramsArray) {
    if (paramsArray.hasOwnProperty(i)) {
        ....
    }
}

Answer 3

您不应该使用 for..in 来遍历数组元素。可以自动将事物原型化到对象上，以利用 DOM 方法或通过页面上的其他 javascript 以编程方式（如原型）。

您应该使用 .length 和普通的 for 循环来获取数组元素的计数。

var l = paramsArray.length;
for (var c = 0; c < l; c++) {
  // do stuff
} 

Answer 4

duncan 的回答是正确的，那是因为 for-in 循环将 paramsArray 视为对象，而不是数组。

正如 Alin 提到的，对于数组使用 for (var i = 0; i

Answer 5

这通常是使用 for...in 循环时出现的问题，从不真正推荐。

一种解决方法是使用.hasOwnProperty() 方法来确保您获得自己的变量：

for (var k in foo) {
    if (foo.hasOwnProperty(k)) {
       // do something with foo[k]
    }
}

或者按照其他人的建议，使用常规 for 循环：

for(var k = foo.lenght-1; k >= 0; --k) {
    // do something with foo[k]
}

哪个更有效（尤其是反转时）

Answer 6

我爱Array.forEach()。它接受一个函数作为参数。该函数接收元素、索引和原始列表作为参数。

["a","b","c"].forEach(function(item, index, list)
{
     console.log("the item at index " + index + " is " + item);
});

为了使其与旧版本的 IE 兼容，see here。