????????前面幾節的內容稍微偏長，代碼也不少，估計有基礎的同學才會跟得上，不知道大家有沒有看懵了。這節來點簡單但又很實用的知識，沒錯，就是for...of。

for...of 是什么

????????for...of 一種用于遍歷數據結構的方法。它可遍歷的對象包括數組，對象，字符串，set和map結構等具有iterator 接口的數據結構。

????????（上面這句話如果有看不懂的地方，自動忽略即可，后續會有章節介紹。）

????????下面就以大家熟悉的數組為例來介紹for...of。

????

????????遍歷數組早就不是什么新鮮事，我們有好幾種方法去完成，此時ES6給我們帶來一個新的遍歷方法for...of，難道它有更牛逼的地方？

????????接下來，我們先來看看幾種傳統的遍歷數組的方式以及它們的缺陷。

方式一

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

????????方式一利用for循環來遍歷數組的缺點就是：代碼不夠簡潔。

????????下面介紹一個寫法更加簡潔的方式。

?

方式二

? ?var arr = [1,2,3,4,5];
? ?arr.forEach(function (value,index) {
?? ? ? //...
? ?});
? ?

????????利用forEach循環代碼量少了很多，寫法更加簡潔，缺點就是：無法中斷停止整個循環。

方式三

? ?var arr = [1,2,3,4,5];
? ?for(let i in arr){
??? ? ? //...
? ?}
? ?

????????for...in循環更常用于對象的循環，如果用于數組的循環，那么就要注意了，上述代碼中每次循環中得到的i是字符串類型，而不是預料中的數字類型，要想對它進行運算，那得先要進行類型轉換，造成不方便。

????????既然上面的幾種方式都存在不足，新增的遍歷方式for...of會比它們更好嗎？答案是肯定的。

????????我們來看看for...of的是實現：

? ?var arr = [1,2,3,4,5];
? ?for(let value of arr){
??? ? ? console.log(value);
? ?}
? ?//打印結果：依次輸出：1 2 3 4 5

????????看樣子是不是有點眼熟，很像for...in？確實很像。它的實現跟for...in很類似。

????????我們列舉一下for...of的優勢：

寫法比for循環簡潔很多；

可以用break來終止整個循環，或者continute來跳出當前循環，繼續后面的循環；

結合keys( )獲取到循環的索引，并且是數字類型，而不是字符串類型。

????我們分別來展示一下上述的幾個優點：

循環可以終止

? ?var arr = [1,2,3,4,5];
? ?for(let value of arr){
??? ? ? if(value == 3){
??????? ? ? //終止整個循環
? ? ? ? ? ?break;
??? ? ? }
??? ? ? console.log(value);
? ?}
? ?//打印結果：1 2

????????

????????以上案例：用break實現了終止整個循環，不會繼續后面的遍歷，所以打印結果為：1? 2。

?

可跳過當前循環

? ?var arr = [1,2,3,4,5];
? ?for(let value of arr){
??? ? ? if(value == 3){
??????? ? ? //跳過當前循環，繼續后面的循環
? ? ? ? ? ?continue;
??? ? ? }
??? ? ? console.log(value);
? ?}
? ?//打印結果：1 2 4? 5

????????用continue跳過當前循環，繼續后面的循環，所以打印結果為：1? 2? 4? 5。

得到數字類型的索引

? ?var arr = [1,2,3,4,5];
? ?for(let index of arr.keys()){
??? ? ? console.log(index);
? ?}
? ?//打印結果：依次輸出:0 1 2 3 4

????????使用數組的擴展keys( )（第八節有介紹，點擊查看），獲取鍵名再遍歷，得到的index是數字類型的。

?

????????此外，相比于for...in循環專門為對象設計，for...of循環的適用范圍更廣。

遍歷字符串

????????for...of 支持字符串的遍歷。

? ?let word = "我是前端君";
? ?for(let w of word){
??? ? ? console.log(w);
? ?}
? ?//打印結果：我 ?是 ?前 ?端 ?君

遍歷DOM List

????????for...of支持類數組的遍歷，例如DOM List。

? ?<p>1</p>
? ?<p>2</p>
? ?<p>3</p>
? ?//假設有3個p元素
? ?let pList = document.getElementsByTagName('p');

? ?for(let p of pList){
??? ? ? console.log(p);
? ?}
? ?// 打印結果：<p>1</p>
? ?//???????? ?<p>2</p>
? ?//???????? ?<p>3</p>

????????for...of支持set和map解構的遍歷，考慮到set和map我們還沒學習，我們在后面章節一并講解。

?

????????這節是近期最簡短、最易學的一個章節了，希望大家多能看懂。

本節小結

總結：for...of一種新的遍歷方式，能遍歷的對象有：數組，類數組對象，字符串，set和map結構等具有iterator接口的數據結構。而且for...in更適合用于對象的遍歷。

總結

以上是生活随笔為你收集整理的第十三节：易学又实用的新特性：for...of的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。