如何使用 JavaScript 遍歷數組？

Question

我有一個字符串，其數據由 pipe 字符（ | ）分隔。

例子

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

我知道如何使用split()來分隔每個數據。

但是，我不知道生成的Array中有多少管道。

在 jQuery 或 JavaScript 中，如何遍歷返回的數組？

Answer 1

在 jQuery 或 JavaScript 中，如何循環遍歷每個單獨的變量？

您基本上只需要遍歷生成的Array 。

jQuery

$.each循環

這種方法很容易使用，並且有利於封裝使用的變量。

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

js小提琴。

當然，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.
}

js小提琴。

您也會注意到length屬性已被緩存，因此不會在每次迭代中查找它。 一些瀏覽器已經對此進行了優化，但是 IE 似乎仍然可以從緩存中受益。 只需 5 秒即可完成，因此您也可以讓 IE 用戶滿意。

您可能想在for循環之外定義i和chunk ，因為 JavaScript 沒有塊 scope （除非您使用let ），並且這些變量將存在於（提升聲明）和之后（無塊范圍）。

for ( in )循環

通常不建議使用此循環，因為它應該僅用於迭代 object 屬性，而不是類似數組的成員屬性。

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

js小提琴。

此循環將遍歷原型鏈上的所有屬性，因此必須使用hasOwnProperty() 。 因此，不推薦用於 arrays。

for ( of )循環

這個循環在 ECMA 6 中是標准化的，並且能夠循環NodeList和迭代器。

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

jsFiddle

forEach()方法

此方法是對 ECMA-262 標准的補充。 它在 IE8 中不可用，但可以相對容易地填充。

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

js小提琴。

其他專業方法

如果您希望針對特定目標進行迭代，則使用專門的迭代器可能會很有用。 請記住，這些也沒有最好的瀏覽器支持。

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方法

返回一個 boolean 值，該值是數組中每個元素通過測試的結果。 此方法短路，即只要一個元素的回調沒有返回truthy ，它就會返回。

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

some方法

返回一個 boolean 值，該值是數組中某個元素通過測試的結果。 此方法短路，即只要一個元素的回調通過測試，它就會返回。

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