如何使用JavaScript循环数组？

Question

我有一个字符串，其数据由竖线字符（|）分隔。

实施例

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

我知道如何使用split()分隔每个数据。

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

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

Answer 1

  

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

您基本上只需要迭代生成的Array。

的jQuery

$.each loop

这种方法易于使用，并且在封装的变量中也有好处。

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

jsFiddle

当然，jQuery 是 JavaScript，因此以下任何方法都可以使用。

的JavaScript

for loop

这是推荐的方法。

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

jsFiddle

您也会注意到length属性被缓存，因此在每次迭代时都不会查找它。 Some browsers already optimise for this，但IE似乎仍然受益于缓存。它只需要5秒钟，所以你也可以保持IE用户的快乐。

您可能希望在i循环之外定义chunk和for，因为JavaScript没有阻止范围（除非您使用let），以及那些变量将存在于（声明提升）和之后（无块范围）。

for ( in ) loop

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

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

jsFiddle

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

for ( of ) loop

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

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

jsFiddle

forEach() method

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

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

jsFiddle

其他专门方法

如果您希望迭代特定目标，使用专门的迭代器可能会很有用。请记住，这些也没有最好的浏览器支持。

filter method

创建一个新的元素数组，相关的回调返回 truthy 。

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

reduce method

基于从左到右减少数组的元素来创建新值。

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

另请参阅reduceRight方法。

map method

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

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

every method

返回一个布尔值，该值是传递测试的数组中每个元素的结果。此方法短路，即只要一个元素的回调没有返回 truthy ，它就会返回。

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

some method

返回一个布尔值，该值是传递测试的数组中某个元素的结果。这种方法短路，即每当一个元素的回调通过测试时它就会返回。

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

Answer 2

separated.length应该就是您所需要的一切。

Answer 3

str.split（）返回一个值数组，所以在你的例子中，因为'separated'是一个数组，你可以：

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

Answer 4

你可以像这样在jquery中做到这一点

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

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
}

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/>");
}