複習Javascript專題（五）：js中的循環遍歷

for循環

這個是最經常使用，也是最簡單的循環了。經常使用於數組或者類數組的遍歷。

for(let i=0;i<5;i++){
     console.log(`${i} is ${arr[i]}`);
 }

拓展：面試中常常愛考這樣一道代碼題：

for(var i=0;i<5;i++){
        setTimeout(function(){
            console.log(i);
        },1000)
    }

問：最後分別打印出i的值是多少？

要注意，這裏特地用了var聲明，是由於let會有塊級做用域，用let的話這段代碼就很正常的打印出0,1,2,3了。

正常來講答案是5次5。
Ps:爲何說正常呢，我發現點CSDN的博客正文進去的控制檯一直是打印5個1，我也不曉得爲啥[/捂臉哭/]

這一道題就涉及了js的單線程和異步，閉包，做用域幾個方面。

單線程的意思是同一時間不能分心，只能專心作一件事，而異步任務會先被插入到異步隊列中，

只有當全部同步任務執行完畢後，棧被清空，纔會讀取任務隊列裏的任務並執行。

異步任務定時器，事件，回調函數等。

關於js線程這裏有詳細介紹： JS 演變、單線程、異步任務

說說做用域方面：其實上面的for循環等同於下面的寫法：

var i=0;    
for(;i<5;i++){
    console.log(i)
}

因而可知，i是全局變量，因此在運行完後也沒有銷燬，而是一次次值被覆蓋，直到最後一次。
所以，當執行定時器裏面的函數時，同步任務已經執行完，但仍是當拿到這個全局變量。

而這個問題有兩個解決辦法：做用域和閉包
做用域：把var改爲let便可，由於let有塊級做用域。
閉包：閉包的特性就是函數嵌套函數。

for(var i=0;i<5;i++){
    (function(i){
        setTimeout(function(){
            console.log(i);
        },1000)
    }(i))
}

每次for循環時都將i的值傳入匿名函數，每次都建立了一個新的擁有私有變量i的匿名函數。

for in循環

它主要用來遍歷對象，也可用來遍歷數組。遍歷對象時key是屬性名，而遍歷數組是字符串格式的下標值。

缺點：它不能保證遍歷順序；不只遍歷自身屬性，還會訪問prototype上的屬性。(可用hasOwnProperty加一層判斷)

let arr=['red','blue','green','grey'];
    for(let key in arr){
        console.log(`${key} is ${arr[key]}`);
    }

for of循環（ES6新增——遍歷數組）

它可用來替代for in和forEach，它能夠遍歷 Arrays（數組/類數組）, Strings（字符串）, Maps（映射）, Sets（集合）等可迭代(Iterable data)的數據結構,注意它的兼容性。
與for in區別：

a.它的key值表明的是value值。
b.它不能單獨遍歷對象，由於獲取不到對象的key值。
總的來講，對象用for in，數組用for of比較合適。

用法同for in就不重複了。

forEach循環（遍歷數組）

它主要用來遍歷數組，沒有返回值。
用法：arr.forEach(()=>(item,index,arr))

let arr=['red','blue','green','grey'];
arr.forEach(function(item,index,arr){
    console.log(`${index} is ${item}`);
    })

確實和ES6的map方法比較像。

map方法（ES6新增——遍歷數組）

它返回一個新數組，數組中的元素爲原始數組元素調用函數處理後的值。我在React裏用的話，常常是返回一個DOM結構。

let arr=['red','blue','green','grey'];
let result=arr.map((item,index,arr)=>{
        console.log(`${index} is ${item}`)
        return item;
    })

filter方法（數組內置方法）

看名字也知道是一個過濾功能，不過它不會改變原數組，只返回過濾後的元素，很是實用的一個方法，牆裂推薦。
參數和map同樣。

let arr=[3,53,43,65,32,5,52,64,2,64];
   let result=arr.filter((item)=>{return item%3=2;});

while 和 do while

講真，while我用得不多，就是在算法裏用過了。

while(條件爲真){
    執行代碼...
    循環條件變動
}

let n=1;
while(n<6){
    console.log('看進幾回'); // 5次啦
    n++;
}

do while和while不一樣的是，它無論條件是否成立，反正都要走一次。
let n2=3;
do{
    console.log('至少走一次')            
    n++;
}while(n<3); // 這時候其實條件爲假，但仍是會進do的語句

平時工做就用到這些會比較多，往後有經常使用的再補充。