如何在javascript中迭代數組

Question

我有一個像var arr = { 30,80,20,100 };的數組var arr = { 30,80,20,100 };

現在我想迭代上面的數組並將迭代的單個值添加到一個函數return語句中

function iterate()
{
    return "Hours" + arr[i];
}

我試過以下方法

function m()
{
    for(var i in arr)
    {
        s = arr[i];
    }
    document.write(s);
}

上面的代碼只給出一個值，即數組中的最后一個值。 但我想迭代所有的值，如

30---for first Iteration
80---for second Iteraton

Any help will be appreciated

Answer 1

如上所述，有幾種方法可以遍歷數組。

for .. in

for(var i in arr) {
    console.log("Property: " + i);
    console.log("Value: " + arr[i]);
}

這不是數組迭代技術。 這是一個對象屬性迭代技術。 這只是因為Arrays也是對象，這幾乎可以工作，但是你最終得到的不是數組元素，比如length屬性和你可能添加到對象的任何屬性。

for( ; ; )

for(var i = 0; i < arr.length; i++) {
    console.log("Index: " + i);
    console.log("Value: " + arr[i]);
}

這是循環遍歷數組的經典 C風格for循環（稍微適應Javascript，因為數組可以告訴你它的長度，而你需要在C中跟蹤它自己）。 這可能就是你想要的。

.forEach(callback, this)

arr.forEach(function(val, ind, ar2) {
    console.log("Index: " + ind);
    console.log("Value: " + val);
    console.log("Array: " + ar2);
    console.log("this: " + this);
}, optionalThisObject);

這是一個通過數組的函數式循環。 您調用數組的forEach方法並向其傳遞一個帶有1-3個參數的函數。 第一個參數是數組的已解析值，第二個參數是找到它的索引，第三個參數是對整個數組的引用。 您通常只需要第一個參數，有時是第二個參數，很少需要第三個參數。

您還可以通過第二個參數forEach ，是你的函數應該想為對象this 。 這種功能的用法更加深奧，但基本上，如果不是匿名函數，而是將其編寫為對數組執行某些操作並將結果寫入其“父”對象的命名函數，則可以選擇“父” “通過指定調用forEach時的內容，在運行時對象。

map, reduce, filter, every, some, reduceRight

常見的迭代模式在函數式編程中有自己的名稱，這使得代碼更短，但需要更多的先驗知識來查看正在發生的事情。 它們仍然是非常有用的結構，可以被鏈接以將數十行壓縮成少數幾行。

var newArr = arr.map(function(val, ind, ar2) {
    return val*ind;
}, optionalThisArg);

map看起來與forEach非常相似，但是它通過數組獲取每次迭代的返回值，並使用它來組裝新數組。 這使您可以使用非常少的代碼行來轉換數據（未來ECMAScript 6的匿名函數速記應該只需要一行代碼）。

var newVal = arr.reduce(function(prev, curr, ind, ar2) {
    return prev+curr;
}, initial);

reduce從左到右遍歷數組（0到length-1）並采用將值合並在一起的函數。 prev是前一次迭代通過函數返回的值（或initial值）， curr是數組當前ind ex的值， ind和ar2現在應該有意義。 這會將整個數組減少為單個值，從而可以生成總數，平均值或其他值。 （例如，它也可以在map用於將二維數組數組縮減為單個數組。）

reduceRight只是reduce但是從右到左（長度為1到0）。

var newArr = arr.filter(function(val, ind, ar2) {
    return val > ind;
}, optionalThisArg);

filter看起來像map和forEach ，並生成一個像map這樣的新數組，但是新數組的長度可能與舊數組的長度不一樣。 filter假定傳遞的函數返回一個布爾值。 如果布爾值為true ，則將值放入新數組中，如果為false ，則跳過該值。 顧名思義， filter器過濾掉您不希望在陣列中使用的數據。

var newBool = arr.every(function(val, ind, ar2) {
    return val > ind;
}, optionalThisArg);

var newBool2 = arr.some(function(val, ind, ar2) {
    return val > ind;
}, optionalThisArg);

every和some看起來非常類似於filter ，但它們返回布爾值，而不是過濾后的數組。 隨着every ，它返回true ，如果每一個元素通過了測試，並false以其他方式，而some返回true，如果任何元素通過測試和false ，否則。 您沒有經常使用這些，但是在查詢需要整個數組的情況下，如果某個元素通過測試，或者如果任何元素未通過測試您不想要數組，則它們是有意義的。 （例如，它可以在數組數組的filter使用。）

即將推出的ES6標准： for .. of

類似於for .. in ， for .. of迭代通過對象屬性的集合，而不是數組索引，但您可能會發現這很有用。

for(var i of Obj) {
    console.log("Value: " + i);
}

for .. of跳過屬性名稱並立即轉到屬性值，因此您不必在代碼中到處都有丑陋的Obj[i] 。 沒有瀏覽器（我知道）實現了這一點。

ECMA不接受Firefox擴展，但僅在Firefox上可用： for each .. in

for each(var i in Obj) {
    console.log("Value: " + i);
}

這是Mozilla最初for .. of提出的語法，你現在可以在Firefox中使用它，但我真的不建議你這樣做。

不是數組迭代，而是相關： Object.keys()

如果您發現Array對象的函數式迭代很好，但希望您可以將它應用於Objects，那么這就是您的方法。

var newArr = Object.keys(Obj);

此方法生成一個字符串數組，其中每個字符串都是源對象的鍵。

功能樣式示例

所以，假設我們想要獲得對象上所有數值的絕對值的平均值。 （為什么？我不知道。這只是一個很好的例子來強調這些很酷的功能。）首先，讓我們以一種強制性的方式來做：

var average = 0, j = 0;
for(var i in Obj) {
    if(!isNaN(Obj[i]) {
        j++;
        average += Math.abs(Obj[i]);
    }
}
average /= j;

這不是太糟糕，但現在我們的范圍有兩個變量， average和j 。 我們可能希望average存在，但在計算之后我們無法關心j 。 我們來看一個功能版本：

var average = Object.keys(Obj).filter(function(val) {
    return !isNaN(Obj[val]);
}).map(function(val) {
    return Math.abs(Obj[val]);
}).reduce(function(prev, curr, ind) {
    return (prev*ind + curr) / (ind + 1);
}, 0);

在這種情況下，我們得到一個鍵數組，並用非數值過濾掉鍵，然后我們將剩余鍵的數組映射到一個數字數組，這些數字都是正數，然后我們用reduce計算平均值（使用滾動平均方程式），我們告訴它從平均零開始。

如果我們使用ECMAScript 6的胖箭頭匿名函數語法 （尚未由瀏覽器實現）重寫上述功能代碼，我們會更短：

var average = Object.keys(Obj)
    .filter(val => !isNaN(Obj[val]))
    .map(val => Math.abs(Obj[val]))
    .reduce((prev, curr, ind) => (prev*ind + curr) / (ind + 1), 0);

這看起來很棒，對吧？

結論

如果你堅持命令式：

for(var i = 0; i < arr.length; i++) {
    console.log("Hours: " + arr[i]);
}

如果你選擇功能風格：

console.log(arr.reduce(function(prev, curr) {
    return prev + "Hours: " + curr + "\n";
}, ""));

功能風格將讓你編寫非常強大的代碼，特別是當添加新的“胖箭頭”匿名函數語法時。

Answer 2

迭代使用length屬性而不是for ... in語句並從循環內部寫入數組值。

for (var ii = 0, len = arr.length; ii < len; ii++) {
  document.write(arr[ii]);
}

Answer 3

那是因為你的write語句在循環之外。 你不想要這樣嗎？

function m(arr) {
    for (var i = 0; i < arr.length; i++) {
        s = arr[i];
        document.write(s);
    }

}​

另外，不要使用in，因為它將為您提供數組的所有屬性。 使用array.length