javascript - js for in

在JavaScript中循環遍歷數組 (20)

在Java中，您可以使用for循環遍歷數組中的對象，如下所示：

String[] myStringArray = {"Hello", "World"};
for (String s : myStringArray)
{
    // Do something
}

你能用JavaScript做同樣的事嗎？

for（var s of myStringArray）{

（直接回答你的問題：現在你可以！）

大多數其他答案是正確的，但他們沒有提及（截至本文撰寫時） ECMA Script 6 2015帶來了一種新的迭代機制，即for..of循環。

這種新語法是在javascript中迭代數組的最優雅方式（只要你不需要迭代索引），但它還沒有被瀏覽器廣泛支持。

它目前適用於Firefox 13 +，Chrome 37+，它本身不能與其他瀏覽器一起使用（請參閱下面的瀏覽器兼容性）。幸運的是，我們有JS編譯器（如Babel ），它們允許我們今天使用下一代功能。

它也適用於Node（我在版本0.12.0上測試過它）。

迭代一個數組

// You could also use "let" instead of "var" for block scope.
for (var letter of ["a", "b", "c"]) { 
   console.log(letter); 
}

迭代一個對像數組

var band = [
  {firstName : 'John', lastName: 'Lennon'}, 
  {firstName : 'Paul', lastName: 'McCartney'}
];

for(var member of band){
  console.log(member.firstName + ' ' + member.lastName); 
}

迭代生成器：

（例子摘自https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of ）

function* fibonacci() { // a generator function
  let [prev, curr] = [1, 1];
  while (true) {
    [prev, curr] = [curr, prev + curr];
    yield curr;
  }
}

for (let n of fibonacci()) {
  console.log(n);
  // truncate the sequence at 1000
  if (n >= 1000) {
    break;
  }
}

兼容性表： http ： //kangax.github.io/es5-compat-table/es6/#For..of循環

規格： http://wiki.ecmascript.org/doku.php?id=harmony:iterators ：//wiki.ecmascript.org/doku.php？ http://wiki.ecmascript.org/doku.php?id=harmony:iterators ethmony : http://wiki.ecmascript.org/doku.php?id=harmony:iterators

}

最優雅，最快捷的方式

<script src="//code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<script>
    Benchmark.prototype.setup = function() {
        // Fake function with minimal action on the value
        var tmp = 0;
        var process = function(value) {
            tmp = value; // Hold a reference to the variable (prevent engine optimisation?)
        };

        // Declare the test Array
        var arr = [];
        for (var i = 0; i < 100000; i++)
            arr[i] = i;
    };
</script>

http://jsperf.com/native-loop-performance/8

編輯（因為我錯了）

比較循環遍歷100000個項目的數組的方法，並每次使用新值進行最小化操作。

http://jsben.ch/#/BQhED

製備：

<a href="http://jsperf.com/native-loop-performance/16" 
   title="http://jsperf.com/native-loop-performance/16"
><img src="http://i.imgur.com/YTrO68E.png" title="Hosted by imgur.com" /></a>

測試：

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

Opera，Safari，Firefox和Chrome現在都共享一組增強的Array方法，用於優化許多常見循環。

您可能不需要所有這些，但它們可能非常有用，或者如果每個瀏覽器都支持它們。

Mozilla Labs發布了他們和WebKit都使用的算法，因此您可以自己添加它們。

filter返回滿足某些條件或測試的項目數組。

如果每個數組成員都通過測試，則返回true。

如果有任何通過測試，則返回true。

forEach在每個數組成員上運行一個函數，並且不返回任何內容。

map類似於forEach，但它返回每個元素的操作結果數組。

這些方法都為它們的第一個參數提供了一個函數，並且有一個可選的第二個參數，該參數是一個對象，當它們循環遍歷函數時，它們要在數組成員上施加範圍。

忽略它直到你需要它。

indexOf和lastIndexOf確切地找到與其參數匹配的第一個或最後一個元素的適當位置。

(function(){
    var p, ap= Array.prototype, p2={
        filter: function(fun, scope){
            var L= this.length, A= [], i= 0, val;
            if(typeof fun== 'function'){
                while(i< L){
                    if(i in this){
                        val= this[i];
                        if(fun.call(scope, val, i, this)){
                            A[A.length]= val;
                        }
                    }
                    ++i;
                }
            }
            return A;
        },
        every: function(fun, scope){
            var L= this.length, i= 0;
            if(typeof fun== 'function'){
                while(i<L){
                    if(i in this && !fun.call(scope, this[i], i, this))
                        return false;
                    ++i;
                }
                return true;
            }
            return null;
        },
        forEach: function(fun, scope){
            var L= this.length, i= 0;
            if(typeof fun== 'function'){
                while(i< L){
                    if(i in this){
                        fun.call(scope, this[i], i, this);
                    }
                    ++i;
                }
            }
            return this;
        },
        indexOf: function(what, i){
            i= i || 0;
            var L= this.length;
            while(i< L){
                if(this[i]=== what)
                    return i;
                ++i;
            }
            return -1;
        },
        lastIndexOf: function(what, i){
            var L= this.length;
            i= i || L-1;
            if(isNaN(i) || i>= L)
                i= L-1;
            else
                if(i< 0) i += L;
            while(i> -1){
                if(this[i]=== what)
                    return i;
                --i;
            }
            return -1;
        },
        map: function(fun, scope){
            var L= this.length, A= Array(this.length), i= 0, val;
            if(typeof fun== 'function'){
                while(i< L){
                    if(i in this){
                        A[i]= fun.call(scope, this[i], i, this);
                    }
                    ++i;
                }
                return A;
            }
        },
        some: function(fun, scope){
            var i= 0, L= this.length;
            if(typeof fun== 'function'){
                while(i<L){
                    if(i in this && fun.call(scope, this[i], i, this))
                        return true;
                    ++i;
                }
                return false;
            }
        }
    }
    for(p in p2){
        if(!ap[p])
            ap[p]= p2[p];
    }
    return true;
})();

一些用例在JavaScript中以函數編程方式循環遍歷數組：

1.只需循環一個數組

const myArray = [{x:100}, {x:200}, {x:300}];

myArray.forEach((element, index, array) => {
    console.log(element.x); // 100, 200, 300
    console.log(index); // 0, 1, 2
    console.log(array); // same myArray object 3 times
});

注意：嚴格來說，Array.prototype.forEach（）不是一種功能方式，因為它作為輸入參數所採用的函數不應該返回一個值，因此不能將其視為純函數。

2.檢查數組中的任何元素是否通過測試

const people = [
    {name: 'John', age: 23}, 
    {name: 'Andrew', age: 3}, 
    {name: 'Peter', age: 8}, 
    {name: 'Hanna', age: 14}, 
    {name: 'Adam', age: 37}];

const anyAdult = people.some(person => person.age >= 18);
console.log(anyAdult); // true

3.轉換為新數組

const myArray = [{x:100}, {x:200}, {x:300}];

const newArray= myArray.map(element => element.x);
console.log(newArray); // [100, 200, 300]

注意：map（）方法創建一個新數組，其結果是在調用數組中的每個元素上調用提供的函數。

4.總結一個特定的屬性，併計算其平均值

const myArray = [{x:100}, {x:200}, {x:300}];

const sum = myArray.map(element => element.x).reduce((a, b) => a + b, 0);
console.log(sum); // 600 = 0 + 100 + 200 + 300

const average = sum / myArray.length;
console.log(average); // 200

5.基於原始數組創建新數組，但不進行修改

const myArray = [{x:100}, {x:200}, {x:300}];

const newArray= myArray.map(element => {
    return {
        ...element,
        x: element.x * 2
    };
});

console.log(myArray); // [100, 200, 300]
console.log(newArray); // [200, 400, 600]

6.計算每個類別的數量

const people = [
    {name: 'John', group: 'A'}, 
    {name: 'Andrew', group: 'C'}, 
    {name: 'Peter', group: 'A'}, 
    {name: 'James', group: 'B'}, 
    {name: 'Hanna', group: 'A'}, 
    {name: 'Adam', group: 'B'}];

const groupInfo = people.reduce((groups, person) => {
    const {A = 0, B = 0, C = 0} = groups;
    if (person.group === 'A') {
        return {...groups, A: A + 1};
    } else if (person.group === 'B') {
        return {...groups, B: B + 1};
    } else {
        return {...groups, C: C + 1};
    }
}, {});

console.log(groupInfo); // {A: 3, C: 1, B: 2}

7.根據特定條件檢索數組的子集

const myArray = [{x:100}, {x:200}, {x:300}];

const newArray = myArray.filter(element => element.x > 250);
console.log(newArray); // [{x:300}]

注意：filter（）方法創建一個新數組，其中包含所有傳遞由提供的函數實現的測試的元素。

8.對數組進行排序

const people = [
  { name: "John", age: 21 },
  { name: "Peter", age: 31 },
  { name: "Andrew", age: 29 },
  { name: "Thomas", age: 25 }
];

let sortByAge = people.sort(function (p1, p2) {
  return p1.age - p2.age;
});

console.log(sortByAge);

9.在數組中查找元素

const people = [ {name: "john", age:23},
                {name: "john", age:43},
                {name: "jim", age:101},
                {name: "bob", age:67} ];

const john = people.find(person => person.name === 'john');
console.log(john);

Array.prototype.find（）方法返回數組中第一個滿足提供的測試函數的元素的值。

參考

使用順序for循環：

var myStringArray = ["Hello","World"];
var arrayLength = myStringArray.length;
for (var i = 0; i < arrayLength; i++) {
    alert(myStringArray[i]);
    //Do something
}

@zipcodeman建議使用for...in語句，但是應該避免迭代數組for-in ，該語句用於枚舉對象屬性。

它不應該用於類似數組的對象，因為：

不保證迭代的順序，可能無法按數字順序訪問數組索引。
還枚舉了繼承的屬性。

第二點是它可以給你很多問題，例如，如果你擴展Array.prototype像以包含一個方法，那麼該屬性也將被枚舉。

例如：

Array.prototype.foo = "foo!";
var array = ['a', 'b', 'c'];

for (var i in array) {
  alert(array[i]);
}

上面的代碼將提醒“a”，“b”，“c”和“foo！”。

如果你使用一些嚴重依賴原生原型增強的庫（例如MooTools），這尤其成問題。

我前面說過的for-in語句是枚舉對象屬性，例如：

var obj = {
  "a": 1,
  "b": 2,
  "c": 3
};

for (var prop in obj) {
  if (obj.hasOwnProperty(prop)) { 
  // or if (Object.prototype.hasOwnProperty.call(obj,prop)) for safety...
    alert("prop: " + prop + " value: " + obj[prop])
  }
}

在上面的示例中， hasOwnProperty方法允許您只枚舉自己的屬性 ，就是它，只有對象物理上具有的屬性，沒有繼承屬性。

我建議你閱讀以下文章：

枚舉VS迭代

例如，我在Firefox控制台中使用：

[].forEach.call(document.getElementsByTagName('pre'), function(e){ 
   console.log(e);
})

在JavaScript中有各種循環數組的方法。

通用循環：

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

ES5的forEach：

substr.forEach(function(item) {
    // Do something with `item`
});

jQuery.each：

jQuery.each(substr, function(index, item) {
    // Do something with `item` (or `this` is also `item` if you like)
});

看看this有關詳細信息，或者你也可以檢查for...in在JavaScript中循環一個數組並使用jQuery檢查jQuery.each() 。

在JavaScript中，不建議使用for-in循環遍歷數組，但最好使用for循環，例如：

for(var i=0, len=myArray.length; i < len; i++){}

它也被優化（“緩存”數組長度）。如果您想了解更多信息，請閱讀我關於該主題的帖子。

如果你想使用jQuery，它的文檔中有一個很好的例子：

 $.each([ 52, 97 ], function( index, value ) {
      alert( index + ": " + value );
 });

如果你想要一種簡潔的方法來編寫一個快速循環，你可以反向迭代：

for (var i=myArray.length;i--;){
  var item=myArray[i];
}

這有利於緩存長度（類似於for (var i=0, len=myArray.length; i<len; ++i)而不像for (var i=0; i<myArray.length; ++i) ）同時輸入更少的字符。

甚至有些時候你應該反向迭代，例如當迭代在一個實時NodeList上，你計劃在迭代期間從DOM中刪除項目。

它不是100％完全相同，但相似：

   var myStringArray = ['Hello', 'World']; // array uses [] not {}
    for (var i in myStringArray) {
        console.log(i + ' -> ' + myStringArray[i]); // i is the index/key, not the item
    }

您可以使用map ，這是一種函數式編程技術，也可以在Python和Haskell等其他語言中使用。

[1,2,3,4].map( function(item) {
     alert(item);
})

一般語法是：

array.map(func)

通常， func將採用一個參數，該參數是數組的一個項目。但是在JavaScript的情況下，它可以採用第二個參數，即項目的索引，以及第三個參數，即數組本身。

array.map的返回值是另一個數組，因此您可以像這樣使用它：

var x = [1,2,3,4].map( function(item) {return item * 10;});

現在x是[10,20,30,40] 。

您不必編寫內聯函數。它可以是一個單獨的功能。

var item_processor = function(item) {
      // Do something complicated to an item
}

new_list = my_list.map(item_processor);

這將等同於：

 for (item in my_list) {item_processor(item);}

除了你沒有得到new_list 。

我還沒有看到這種變化，我個人最喜歡這種變化：

給定一個數組：

var someArray = ["some", "example", "array"];

您可以在不訪問length屬性的情況下遍歷它：

for (var i=0, item; item=someArray[i]; i++) {
  // item is "some", then "example", then "array"
  // i is the index of item in the array
  alert("someArray[" + i + "]: " + item);
}

看到這個JsFiddle證明：http://jsfiddle.net/prvzk/：http://jsfiddle.net/prvzk/

這僅適用於非稀疏的數組。這意味著數組中的每個索引實際上都有一個值。但是，我發現在實踐中我幾乎沒有在Javascript中使用稀疏數組......在這種情況下，將對像用作map / hashtable通常要容易得多。如果你有一個稀疏數組，並希望循環遍歷0 .. length-1，你需要for（var i = 0; i <someArray.length; ++ i）構造，但是你仍需要一個if循環以檢查當前索引處的元素是否實際定義。

此外，正如CMS在下面的註釋中提到的那樣，您只能在不包含任何偽造值的數組上使用它。示例中的字符串數組有效，但如果您有空字符串，或者數字為0或NaN等，則循環將過早中斷。再次在實踐中，這對我來說幾乎不是問題，但是要記住這一點，這使得在使用它之前需要考慮這個循環...這可能會使某些人取消它的資格:)

我喜歡這個循環是：

這是寫作的簡短
無需訪問（更不用說緩存）length屬性
要訪問的項目將在您選擇的名稱下在循環體內自動定義。
與array.push和array.splice非常自然地結合使用像列表/堆棧這樣的數組

這樣做的原因是數組規範要求當你從索引> =數組的長度讀取一個項目時，它將返回undefined。當您寫入這樣的位置時，它實際上會更新長度。

對我來說，這個結構最接近地模仿我喜歡的Java 5語法：

for (String item : someArray) {
}

...還有了解循環內當前索引的額外好處

數組循環：

for(var i = 0; i < things.length; i++){
    var thing = things[i];
    console.log(thing);
}

對象循環：

for(var prop in obj){
    var propValue = obj[prop];
    console.log(propValue);
}

是的，您可以在JavaScript中使用循環執行相同的操作，但不限於此，在JavaScrip中執行循環數組的許多方法，假設您在下面有這個數組，並且您想對它進行循環：

var arr = [1, 2, 3, 4, 5];

這些是解決方案：

1）for循環

For循環是在JavaScript中循環遍歷數組的常用方法，但不被認為是大型數組的最快解決方案：

for (var i=0, l=arr.length; i<l; i++) { 
  console.log(arr[i]);
}

2）while循環

雖然循環被認為是循環遍歷長數組的最快方法，但通常在JavaScript中使用較少：

let i=0;

while (arr.length>i) {
    console.log(arr[i]);
    i++;
}

3）做同時
做同樣的事情，但有一些語法差異如下：

let i=0;
do {
  console.log(arr[i]);
  i++;
}
while (arr.length>i);

這些是進行javascript循環的主要方法，但還有更多方法可以做到這一點。

我們還使用for in循環來循環javascript中的對象。

另外，也要看看map()，filter()，reduce()等功能於JavaScript的數組。他們可能比使用while和更快更好地做事for。

如果您想了解有關JavaScript中數組的異步函數的更多信息，這是一篇很好的文章。

如今，功能編程在開發領域引起了轟動。並且有充分的理由：功能技術可以幫助您編寫更多的聲明性代碼，一目了然，重構和測試更容易理解。
函數式編程的基石之一是它對列表和列表操作的特殊使用。而那些東西正是它們的聲音：事物的數組，以及你對它們所做的事情。但功能性思維方式對待它們的方式與您的預期不同。
本文將仔細研究我所謂的“三大”列表操作：map，filter和reduce。圍繞這三個功能進行思考是朝著能夠編寫乾淨的功能代碼邁出的重要一步，並為功能和反應式編程的強大技術打開了大門。
這也意味著你永遠不必再次編寫for循環。

閱讀更多>> here：

有一種方法只迭代自己的對象屬性，不包括原型的屬性：

let arr = [1,2,3,4,5];

for(let i=0, size=arr.length; i<size; i++){
    // do something
}

但它仍將迭代自定義屬性。

在javascript中，任何自定義屬性都可以分配給任何對象，包括數組。

如果想遍歷數組疏林，for (var i = 0; i < array.length; i++) if (i in array)或array.forEach與es5shim要使用。

當然它效率低下而且很多人鄙視它，但它是最接近上述之一的：

var myStringArray = ["Hello","World"];
myStringArray.forEach(function(f){
    // Do something
})

簡短回答：是的。你可以這樣做：

var myArray = ["element1", "element2", "element3", "element4"];

for (i = 0; i < myArray.length; i++) {
  console.log(myArray[i]);
}

在瀏覽器控制台中，您可以看到打印的“element1”，“element2”等內容。

如果您正在使用jQuery庫，請考慮使用http://api.jquery.com/jQuery.each/

從文檔：

jQuery.each( collection, callback(indexInArray, valueOfElement) )

返回： 對象
描述： 通用迭代器函數，可用於無縫迭代對象和數組。具有length屬性的數組和類數組對象（例如函數的參數對象）由數字索引迭代，從0到length-1。其他對象通過其命名屬性進行迭代。
該$.each()函數與$(selector).each()用於在jQuery對像上獨占迭代的函數不同。該$.each()函數可用於迭代任何集合，無論它是地圖（JavaScript對象）還是數組。在數組的情況下，回調每次都傳遞一個數組索引和相應的數組值。（也可以通過this關鍵字訪問該值，但是Javascript將始終將this值包裝為Object即使它是一個簡單的字符串或數字值。）該方法返回其第一個參數，即迭代的對象。

我認為最好的方法是使用Array.forEach函數。如果您不能使用我建議從MDN獲取polyfill使我可用，它肯定是在JavaScript中迭代數組的最安全的方法。

https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

正如其他人所說，這幾乎總是你想要的：

var numbers = [1,11,22,33,44,55,66,77,88,99,111];
var sum = 0;
numbers.forEach(function(n){
  sum += n;
});

這樣可以確保在處理數組範圍內所需的任何內容都保留在該範圍內，並且您只處理數組的值，而不是對象屬性和其他成員，這就是.. in。

在大多數情況下，使用常規c樣式for循環工作，重要的是要記住循環中的所有內容與程序的其餘部分共享它的範圍，{}不會創建新的範圍。

因此：

var sum = 0;
var numbers = [1,11,22,33,44,55,66,77,88,99,111];

for(var i = 0; i<numbers.length; ++i){ 
  sum += numbers[i];
}

alert(i);

將輸出“11” - 這可能是也可能不是你想要的。

工作jsFiddle示例：https://jsfiddle.net/workingClassHacker/pxpv2dh5/7/：//jsfiddle.net/workingClassHacker/pxpv2dh5/7/https://jsfiddle.net/workingClassHacker/pxpv2dh5/7/