了解javascript中3種for循環風格以及何時使用它們

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

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

l  經典的For循環語法

l  For….of 和For…in

# #l  炫技一點的版本：.forEach

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

經典的For迴圈

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

語法為：

for([计数器定义];[中断条件];[步进策略]){
   //... 
    TODO
}

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

for(let counter = 0; counter 讓我們在Chrome裡運行一下，得到的結果也符合預期，但for迴圈就僅僅如此了嗎？ <p><br></p><p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/image/758/933/751/1606383516520600.png?x-oss-process=image/resize,p_40" class="lazy" title="1606383516520600.png" alt="了解javascript中3種for循環風格以及何時使用它們"></p> 你可以認為for循環為三個表達式<p></p><pre class="brush:php;toolbar:false">for(
[在循环开始时只执行一次的表达式];
[其中每一个逻辑判断都需吻合的表达式];
[循环每一步都被执行的表达式]
)

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

for(let a = 0, b = 0; a <p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/image/156/104/357/160638352246070了解javascript中3種for循環風格以及何時使用它們?x-oss-process=image/resize,p_40" class="lazy" title="160638352246070了解javascript中3種for循環風格以及何時使用它們" alt="了解javascript中3種for循環風格以及何時使用它們"></p>我們可以再進一步，讓其變的更符合實際應用場景：<p></p><pre class="brush:php;toolbar:false">for(let a = 0, b = 0; a <p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/image/534/927/536/160638352761244了解javascript中3種for循環風格以及何時使用它們?x-oss-process=image/resize,p_40" class="lazy" title="160638352761244了解javascript中3種for循環風格以及何時使用它們" alt="了解javascript中3種for循環風格以及何時使用它們"></p>另外，你甚至可以把中間表達式替換為函數調用，只要你記住，該函數的返回值需要是一個布林型或可以被轉成布林值的一個值即可，例如：<p></p><pre class="brush:php;toolbar:false">function isItDone(a) {
 console.log("函数被调用！")
 return a <p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/image/985/386/873/160638353227285了解javascript中3種for循環風格以及何時使用它們?x-oss-process=image/resize,p_40" class="lazy" title="160638353227285了解javascript中3種for循環風格以及何時使用它們" alt="了解javascript中3種for循環風格以及何時使用它們"></p>那麼，在經典的for迴圈中如何處理非同步程式碼呢？如何保證不掉進非同步陷阱裡呢？ <p></p>我為大家介紹一位新朋友：async / await，這將讓我們在處理非同步程式碼時變得更容易、可控，例如：<p></p><pre class="brush:php;toolbar:false">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 For... in和For… of<h2></h2>他們看起來非常相似，但它們並不是相同類型的循環。 <p></p>讓我們盡量簡要的解釋它們：<p></p>For…in 循環遍歷物件的可枚舉屬性，也就是說當你的自訂物件被用作雜湊表或字典時，使用For…in 遍歷他們時將變得非常簡單。 <p></p>但請注意，遍歷順序是按元素順序執行執行的，因此請不要依賴循環順序。 <p></p><pre class="brush:php;toolbar:false">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循环的另一个版本，但是这个方法是数组对象的一部分，它的目的是接收一个函数和一个额外的可选参数，以便在执行函数时重新定义该函数的上下文。

对于数组中的每个元素，我们的函数都将被执行，并且它将收到三个参数（是的，就是三个，而不是一个，因为您已经习惯了使用它）。它们分别是：

• 正在处理的当前元素。

• 元素的索引，这已经简化了我们试图用for…of循环实现的任务

• 正在处理的实际数组。以防万一你需要做点什么。

那么，让我们看一个简单的示例：

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中关于循环的全部内容，我希望现在您对它们有了更清晰的理解，并且可以根据这些知识和我们当前的实际需求来选择您喜欢的循环。

原文地址：https://blog.bitsrc.io/3-flavors-of-the-for-loop-in-javascript-and-when-to-use-them-f0fb5501bdf3

更多编程相关知识，请访问：编程学习网站！！

以上是了解javascript中3種for循環風格以及何時使用它們的詳細內容。更多資訊請關注PHP中文網其他相關文章！