JS中3種風格的For迴圈有什麼異同？

来源:https://www.cnblogs.com/powertoolsteam/archive/2019/09/27/3type-forloop.html
-Advertisement-
Play Games

在學習任何開發語言時候，for迴圈是必不可少的一種語法，可能所有開發人員都會使用它。它非常經典，以至於每個開發語言都至少包括一種關於迴圈的語法版本。不過，在JavaScript種包含了三種不同的迴圈語法，讓我們通過本文去瞭解這三種迴圈語法之間有什麼異同。 ...


轉載請註明出處：葡萄城官網，葡萄城為開發者提供專業的開發工具、解決方案和服務，賦能開發者。
原文出處：https://blog.bitsrc.io/3-flavors-of-the-for-loop-in-javascript-and-when-to-use-them-f0fb5501bdf3

 

在學習任何開發語言時候，for迴圈是必不可少的一種語法，可能所有開發人員都會使用它。它非常經典，以至於每個開發語言都至少包括一種關於迴圈的語法版本。不過，在JavaScript種包含了三種不同的迴圈語法（如果再講究一點，也可以算作是四種）。

它們的使用方式並不完全相同，舉例如下：

l  經典的For迴圈語法

l  For….of 及 For…in

l  炫技一點的版本：.forEach

接下來，我想介紹下這三種語法使用時有什麼異同，以及在什麼時間怎樣使用它們才能收穫最棒的結果。好的，讓我們開始吧。

經典的For迴圈

這個語法我們應該都已經非常清楚了，在for迴圈中，你可以在其中定義內部計數器，設置相應中斷條件和靈活的步進策略（通常可以是遞增也可以是遞減）。

語法為：

for([計數器定義];[中斷條件];[步進策略]){
   //... 
    TODO
}

 

我敢肯定即便不用我的介紹，之前你也一定寫過類似的語句，例如：

for(let counter = 0; counter < 10; counter++) {
console.log(counter)
}

 

讓我們在Chrome里運行一下，得到的結果也符合預期，但for迴圈就僅僅如此了嗎？

 

你可以認為for迴圈為三個表達式

for(
[在迴圈開始時只執行一次的表達式];
[其中每一個邏輯判斷都需吻合的表達式];
[迴圈每一步都被執行的表達式]
)

 

這樣表述的意義在於，你可以使用多個計數器執行for迴圈，或在不影響計數器的情況下在步進表達式中執行每次需要執行的代碼，舉個例子：

for(let a = 0, b = 0; a < 10 && b < 100; a++, b+=10) {
   console.log(a, b)
}

 

我們可以再進一步，讓其變的更符合實際應用場景：

for(let a = 0, b = 0; a < 10 && b < 100; console.log("你的計數器現在是：", ++a, b+=2)){}

 

另外，你甚至可以把中間表達式替換為函數調用，只要你記住，該函數的返回值需要是一個布爾型或可以被轉成布爾值的一個值即可，例如：

function isItDone(a) {
 console.log("函數被調用！")
 return a < 10
}

for(let a = 0; isItDone(a); a++) {
 console.log(a)
}

 

 

那麼，在經典的for迴圈中如何處理非同步代碼呢？如何保證不掉進非同步陷阱里呢？

我為大家介紹一位新朋友：async / await，這將讓我們在處理非同步代碼時變得更容易、可控，例如：

const fs = require("fs")

async function read(fname) {
    return new Promise( (resolve, reject) => {
        fs.readFile(fname, (err, content) => {
            if(err) return reject(err)
            resolve(content.toString())
        })
    })
}

(async () => {
    let files = ['file1.json', 'file2.json']

    for(let i = 0; i < files.length; i++) {
        let fcontent = await read(files[i])
        console.log(fcontent)
        console.log("-------")
    }
})()

For... in 及 For… of

他們看起來非常相似，但它們並不是相同類型的迴圈。

讓我們儘量簡要的解釋它們：

For…in 迴圈遍歷對象的可枚舉屬性，也就是說當你的自定義對象被用作哈希表或字典時，使用For…in 遍歷他們時將變得非常簡單。

但請註意，遍歷順序是按元素順序執行執行的，因此請不要依賴迴圈順序。

let myMap {
  uno: 1,
  dos: 2,
  tres: 3
}
for(let key in myMap) {
  console.log(key, "=", myMap[key]);
}

 

看起來是很簡單的，但請記住，For…in只能遍歷一個實體對象，如果便利一個非實體，例如遍歷一個string，那麼將會發生如下情況：

for(let k in "Hello World!") {
   console.log(k)
}

 

從結果可以看到，並沒有遍歷出每一個字母，而是遍歷到了每個屬性，正如您看到的，遍歷出的數字並非是沒有用的，因為"Hello World!"[1] 同樣是可以返回相應的字母的。

相反，如果你想遍歷每個字元，則需要使用其他變體：For…of

for(let char of "Hello World!") {
  console.log(char)
}

 

這種迴圈方式看起來對string類型更有效，相同的用例，因為使用了這種語法，就能夠返回元素中相應的值了。所以我們通過上述用例可知，For…of遍歷的內容是對象的值。

通過上述的示例我們可知，他們相互一個遍歷屬性，一個遍歷值，那麼有沒有什麼方法可以既獲得屬性又獲得值呢，答案是有的，使用entries方法，就可以同時獲得屬性和值，如下所示：

let myArr = ["hello", "world"]
for([idx, value] of myArr.entries()) {
    console.log(idx, '=', value)
}

 

 

最後，在處理非同步代碼時是怎樣的呢？答案當然是和for迴圈相同了。

const fs = require("fs")

async function read(fname) {
    return new Promise( (resolve, reject) => {
        fs.readFile(fname, (err, content) => {
            if(err) return reject(err)
            resolve(content.toString())
        })
    })
}



(async () => {
    let files = ['file2.json', 'file2.json']

    for(fname of files) {
        let fcontent = await read(fname)
        console.log(fcontent)
        console.log("-------")
    }

    for(idx in files) {
        let fcontent = await read(files[idx])
        console.log(fcontent)
        console.log("-------")
    }
})()

 

最後我們再使用簡短的方式來總結下For…in和For…of的區別

For…in——遍歷屬性

For…of——遍歷值

.forEach 迴圈

這可能是我最喜歡的一個，這僅僅是因為我非常喜歡聲明式語法或通過命令式編寫代碼的聲明性方式。

而且，儘管上面的迴圈語法也很好用，並且都有很好的用例，但當我們需要關註數據本身時，forEach很好用。

不管怎樣，先撇開哲學上的爭論不談，.foreach方法是for迴圈的另一個版本，但是這個方法是數組對象的一部分，它的目的是接收一個函數和一個額外的可選參數，以便在執行函數時重新定義該函數的上下文。

對於數組中的每個元素，我們的函數都將被執行，並且它將收到三個參數（是的，就是三個，而不是一個，因為您已經習慣了使用它）。它們分別是：

  1. 正在處理的當前元素。
  2. 元素的索引，這已經簡化了我們試圖用for…of迴圈實現的任務
  3. 正在處理的實際數組。以防萬一你需要做點什麼。

那麼，讓我們看一個簡單的示例：

a = ["hello", "world"]

a.forEach ( (elem, idx, arr) => {
   console.log(elem, "at: ", idx, "inside: ", arr)
})

 

更快更簡單，不是嗎？

但是你可以看到我們如何在函數中很容易地使用所有屬性。下麵是一個您希望在foreach方法上使用第二個可選參數的示例：

class Person {
    constructor(name)  {
        this.name = name
    }
}

function greet(person) {
    console.log(this.greeting.replace("$", person.name))
}

let english = {
    greeting: "Hello there, $"
}
let spanish = {
    greeting: "Hola $, ¿cómo estás?"
}

let people = [new Person("Fernando"), new Person("Federico"), new Person("Felipe")]


people.forEach( greet, english)
people.forEach( greet, spanish)

 

通過重寫被調用函數greet的上下文，我可以在不影響其代碼的情況下更改其行為。

最後，顯示此方法也可以與非同步代碼一起使用，下麵是示例：

const fs = require("fs")

async function read(fname) {
    return new Promise( (resolve, reject) => {
        fs.readFile(fname, (err, content) => {
            if(err) return reject(err)
            resolve(content.toString())
        })
    })
}

let files = ['file1.json', 'file2.json']

files.forEach( async fname => {
    let fcontent = await read(fname)
    console.log(fcontent)
    console.log("-------")
})

 

結論

這就是我想要分享的關於JavaScript中關於迴圈的全部內容，我希望現在您對它們有了更清晰的理解，並且可以根據這些知識和我們當前的實際需求來選擇您喜歡的迴圈。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 使用Hexo開源博客系統，輕鬆搭建你的個人博客（1）
    Hexo 是一個輕量級、簡潔、高效且高逼格的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在幾秒內，即可利用靚麗的主題生成靜態網頁。同時有著豐富的主題，官網或者GitHub都可以輕鬆下載到。由於Hexo博客都是靜態文件，所以推薦部署在Github上，不需要額外的伺服器和後臺， ...
  • 詳解立即執行函數(function(){}()),(function(){})()
    要知道這幾種寫法之間的區別，我們要先聊些題外話——js中函數的兩種命名方式，即表達式和聲明式。 函數的聲明式寫法為：function foo(){/*...*/}，這種寫法會導致函數提升，所有function關鍵字都會被解釋器優先編譯，不管是聲明在什麼位置，都可以調用它，但是它本身不會被執行，定義只 ...
  • nodejs隨手記
    nodejs項目周 nodejs前端框架 一般做中間層 和操作資料庫 傳統模式和前後端分離最大的區別就是seo優化 HTTP常見的伺服器軟體 Apache Nginx （iis）微軟的伺服器現在已經不怎麼用了 node伺服器 可以自己編寫服務 個人練習 nodejs依賴安裝 Express框架 提供 ...
  • 【Cocos誰學誰會】製作會跑動的地板
    版權申明： 本文原創首發於以下網站，您可以自由轉載，但必須加入完整的版權聲明 博客園MogooStudio： csdn博客MogooStudio： 最後效果 源碼分享 以下步驟詳細內容可能跟源碼中有出入，一切以源碼為準 CocosCreator版本：2.1.2，務必使用大於此版本的引擎運行 源碼地址 ...
  • 表格變色示例中發現的問題——attr()與prop()
    在練習jQuery表格變色例子過程中，發現了一下幾個問題： 針對以上問題，查閱了資料後，發現了原因，以及解決方法： 在之前的jQuery版本中，都是使用attr()訪問對象的屬性，比如取一個圖片的alt屬性，就可以這樣做$('#img').attr('alt');但是在某些時候，比如訪問input的 ...
  • 關於瀑布流的佈局原理分析（純CSS瀑布流與JS瀑布流）
    瀑布流 又稱瀑布流式佈局，是比較流行的一種網站頁面佈局方式。即多行等寬元素排列，後面的元素依次添加到其後，等寬不等高，根據圖片原比例縮放直至寬度達到我們的要求，依次按照規則放入指定位置。 為什麼使用瀑布流 瀑布流佈局在我們現在的前端頁面中經常會用的到，它可以有效的降低頁面的複雜度，節省很多的空間，對 ...
  • thinkPHP+LayUI 流載入實現
    html js，要引入layui.js php Controller控制器 php model模型 ...
  • vue項目引入外部字體
    1、UI設計圖有"華文黑體"，擔心客戶端沒有該字體，將"huawen.ttf"字體文件，放入項目中： 2、創建一個font.scss（或font.css）文件： 3、在main.js中引入 4、就可以直接使用了： ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類