for循環

JavaScript 提供多種遍歷語法。最原始的寫法就是for循環。

let arr = [1,2,3,4,5];for (var index = 0; index < arr.length; index++) { console.log(myArray[index]); // 1 2 3 4 5} 

缺點：這種寫法比較麻煩

forEach

數組提供內置的forEach方法

let arr = [1,2,3,4,5];arr.forEach((element,index) => {  console.log(element); // 1 2 3 4 5});

缺點：這種寫法的問題在于，無法中途跳出forEach循環，break命令或return命令都不能奏效。

 for...in

for…in 用于遍歷對象所有的可枚舉屬性，功能類似于Object.keys()。 

let obj = {  name: 'cloud',  phone: '157xxxx2065'} for (let prop in obj) {  console.log(prop); // name phone}

可能有朋友會問，不可枚舉的對象有哪些呢? 比如constructor，數組的length就屬于不可枚舉屬性。

let arr = [10, 20, 30, 40, 50]; for (let prop in arr) {  console.log(prop); // '0' '1' '2' '3' '4'}

缺點：

數組的鍵名是數字，但是for...in循環是以字符串作為鍵名“0”、“1”、“2”等等。 for...in循環主要是為遍歷對象而設計的，不適用于遍歷數組

 for...of

for…of是ES6新增的遍歷方式，它提供了統一的遍歷機制。所有實現了[Symbol.iterator]接口的對象都可以被遍歷。for...of循環可以使用的范圍包括數組、Set 和 Map 結構、某些類似數組的對象（比如arguments對象、DOM NodeList 對象）、Generator 對象，以及字符串

優點：

有著同for...in一樣的簡潔語法，但是沒有for...in那些缺點 不同用于forEach方法，它可以與break、continue和return配合使用 提供了遍歷所有數據結構的統一操作接口

下面是一個使用break語句，跳出for...of循環的例子。

for (var n of fibonacci) { if (n > 1000)  break; console.log(n);}

上面的例子，會輸出斐波納契數列小于等于1000的項。如果當前項大于1000，就會使用break語句跳出for...of循環。

 for...of獲取索引

entries() 返回一個遍歷器對象，用來遍歷[鍵名, 鍵值]組成的數組。對于數組，鍵名就是索引值；對于 Set，鍵名與鍵值相同。Map 結構的 Iterator 接口，默認就是調用entries方法。 keys() 返回一個遍歷器對象，用來遍歷所有的鍵名。 values() 返回一個遍歷器對象，用來遍歷所有的鍵值。

 // demolet arr = ['a', 'b', 'c'];for (let pair of arr.entries()) { console.log(pair);}// [0, 'a']// [1, 'b']// [2, 'c']