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

mrli2016 發布于2019-08-23 13:40 / 2544人閱讀

摘要：循環這個是最常用，也是最簡單的循環了。常用于數組或者類數組的遍歷。異步任務定時器，事件，回調函數等。循環它主要用來遍歷對象，也可用來遍歷數組。遍歷對象時是屬性名，而遍歷數組是字符串格式的下標值。

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的語句

平時工作就用到這些會比較多，日后有常用的再補充。

GPU云服務器云服務器 js 循環遍歷json數據 js循環遍歷json數據 js獲取遍歷中的單個 js獲取循環中的某一條數據

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/99356.html

復習Javascript專題（一）：基本概念部分

摘要：一數據類型基本類型引用類型類型判斷返回結果未定義布爾值字符串數值對象或者函數拓展堆棧兩種數據結構堆隊列優先，先進先出由操作系統自動分配釋放，存放函數的參數值，局部變量的值等。一、數據類型基本類型：`Null Boolean String Undefined Number(NB SUN)` 引用類型：`Array Function Object` 類型判斷：typeof 返回結果...

LiangJ 2019-08-23 13:38 評論0 收藏0
復習Javascript專題（四）：js中的深淺拷貝

摘要：基本數據類型的復制很簡單，就是賦值操作，所以深淺拷貝也是針對，這類引用類型數據。它會拋棄對象的。另外，查資料過程中還看到這么一個詞結構化克隆算法還有這一篇資料也有參考，也寫得比較詳細了的深淺拷貝基本數據類型的復制很簡單，就是賦值操作，所以深淺拷貝也是針對Object，Array這類引用類型數據。淺拷貝對于字符串來說，是值的復制，而對于對象來說則是對對象地址的復制；而深拷貝的話，它不...

MobService 2019-08-23 13:40 評論0 收藏0
復習Javascript專題（二）：閉包，內存，以及垃圾回收機制

摘要：一個閉包就是當一個函數返回時，一個沒有釋放資源的棧區所以參數和變量不會被垃圾回收機制回收。使用不當會很容易造成內存泄露。最后，垃圾回收器完成內存清除工作，銷毀那些帶標記的值并回收它們所占用的內存空間。 1.什么是閉包？閉包有啥特性以及存在什么問題？概念：閉包是指有權訪問另一個函數作用域中的變量的函數。下面的outer就形成了一個閉包： function outer(){ co...

hankkin 2019-08-26 13:26 評論0 收藏0
JavaScript專題之jQuery通用遍歷方法each的實現

摘要：語法為回調函數擁有兩個參數第一個為對象的成員或數組的索引，第二個為對應變量或內容。但是對于的函數，如果需要退出循環可使回調函數返回，其它返回值將被忽略。 JavaScript 專題系列第十一篇，講解 jQuery 通用遍歷方法 each 的實現 each介紹 jQuery 的 each 方法，作為一個通用遍歷方法，可用于遍歷對象和數組。語法為： jQuery.each(object,...

blankyao 2019-08-20 18:30 評論0 收藏0
JS專題之數組去重

摘要：將元素作為對象的鍵，默認鍵對應的值為如果對象中沒有這個鍵，則將這個元素放入結果數組中去。前言數組去重在日常開發中的使用頻率還是較高的，也是網上隨便一抓一大把的話題，所以，我寫這篇文章目的在于歸納和總結，既然很多人都在提的數組去重，自己到底了解多少呢。又或者是如果自己在開發中遇到了去重的需求，自己能想到更好的解決方案嗎。這次我們來理一理怎么做數組去重才能做得最合適，既要考慮兼容性，...

only_do 2019-08-26 13:29 評論0 收藏0