如何使用JavaScript循环遍历数组？

Question

我有一个字符串，其中的数据由管道字符（|）分隔。

示例

var somestring = "data1|data2|data3";
var separated = somestring.split("|");

我知道如何使用 split() 函数分离数据。

但是，我不知道结果的 Array 中会有多少个管道符号。

在 jQuery 或 JavaScript 中，我该如何循环遍历返回的数组？

- coffeemonitor

---

刚刚问了5分钟，已经有7个答案了，我有时真的很喜欢Stack Overflow... - Billy Moon

Answer 1

在 jQuery 或 JavaScript 中，如何循环遍历每个分离的变量？

基本上，您只需要迭代结果 Array。

jQuery $.each 循环 此方法易于使用，并且受益于所使用的变量被封装。

$.each(separated, function(index, chunk) {
    // `chunk` is each member of the array.
});

jsFiddle。

当然，jQuery本质上也是JavaScript，因此下面的任何方法都可以使用。

JavaScript

for循环

这是推荐的方式。

for (var i = 0, length = separated.length; i < length; i++) {
    var chunk = separated[i];
    // `chunk` is each member of the array.
}

jsFiddle。

您也会注意到，length属性被缓存了，所以在每次迭代中不会被查找。有些浏览器已经对此进行了优化，但是IE似乎仍然从它的缓存中受益。这只需要5秒钟的时间，所以您可能也会让IE用户感到满意。

您可能希望在for循环之外定义i和chunk，因为JavaScript没有块级作用域（除非使用let），这些变量将存在于之前（声明提升）和之后（无块级作用域）。

for ( in ) 循环

通常不建议使用此循环，因为它应该仅用于迭代对象属性，而不是类数组成员属性。

for (var chunk in separated) {
     if ( ! separated.hasOwnProperty(chunk)) {
         continue;
     }
     // `separated[chunk]` is each member of the array.   
}

jsFiddle。

这个循环会遍历所有原型链上的属性，因此必须使用hasOwnProperty()。因此不建议用于数组。

for ( of )循环

这个循环在ECMA 6中标准化，能够遍历NodeList和迭代器。

for (var chunk of separated) {
     // `chunk` is each member of the array.   
}

jsFiddle

forEach() 方法

这个方法是ECMA-262标准的一个补充。它在IE8中不可用，但可以相对容易地shimmed。

separated.forEach(function(chunk, index) {
     // `chunk` is each member of the array.   
});

jsFiddle。

其他专用方法

如果您正在寻找特定目标的迭代，使用专用迭代器可能会很有用。请记住，这些迭代器在浏览器支持方面并不是最好的。

filter方法

创建一个新数组，其中包含相关回调返回的真值元素。

separated.filter(function(element) {
    return +element > 255;
});

reduce方法

从左到右，基于数组元素的缩减，创建一个新的值。

separated.reduce(function(accumulator, element) {
    return accumulator.concat(element);
}, "");

请参阅reduceRight方法。

map方法

创建一个新数组，将每个元素替换为相关回调函数的返回值。

separated.map(function(element) {
    return element.substr(0, 1);
});

every方法

返回一个布尔值，该值是数组中每个元素通过测试的结果。此方法进行短路处理，即当一个元素的回调函数未返回truthy时就立即返回。

separated.every(function(element) {
    return element.substr(0, 1) == "a";
});

some 方法

返回一个布尔值，该值是数组中某个元素是否通过测试的结果。该方法会进行短路处理，即当一个元素的回调函数通过测试后就会返回。

separated.some(function(element) {
    return element.substr(0, 1) == "a";
});

- alex

---

+1 对于 JavaScript 的 for 循环的学习，我今天学到了两件新事情，而且还没到午餐时间。 - Red Taz

是的，Alex！完美的答案！+1 - stecb

Answer 2

str.split() 返回一个值数组，所以在你的例子中，由于 'separated' 是一个数组，你可以：

for (var i=0, len=separated.length; i < len; i++) {
   // do something with separated[i]
}

- Rob Raisch

Answer 3

separated.length 应该就足够了。

- Daniel A. White

Answer 4

你可以用jQuery这样做

$.each(separated,function(key,item){ alert('here is ' + item + ' at position ' + key) })

- Billy Moon

Answer 5

如果你的问题确实是“如何循环遍历每个分离的变量？”，那么：

for (var i = 0; i < separated.length; i++)
{
 //Do something with separated[i];
}

//or  (apparently this is deprecated)

for(var a in separated)
{
  //Do something with a
}

- Ivan

---

for(var a in array)已经被弃用，不应该再使用。 - Rob Raisch

没意识到，我一直在想我通常在C#中如何做。我会编辑我的回答。 - Ivan

@Rob 它并没有被弃用，只是不是迭代Array的最佳循环方式。 - alex

@Alex，最佳实践规定应使用for-in来迭代对象的属性，而不是数组的元素。请参见https://developer.mozilla.org/en/JavaScript/Reference。 - Rob Raisch

@Rob 确实，但它在任何地方都没有被弃用吧？ - alex

你说得对。我应该使用比“弃用”更好的术语，例如“非法”，“误用”，“懒惰”或“充满危险”。无论如何，使用一个专门设计用于另一个不相关目的的语言特性来迭代数组是一件非常糟糕的事情。 - Rob Raisch

Answer 6

使用 FOR...NEXT 结构循环，就像大多数其他语言一样：

var somestring = "data1|data2|data3";
var separated = somestring.split("|");

for (i=0 ; i<separated.length; i++) {
 document.write(separated[i]);
 document.write("<br/>");
}

- Codecraft