JS中for循環(huán)的四種寫法示例(入門級)

更新時間：2022年04月01日 08:52:03 作者：Phantomlsh

對于for循環(huán)相信大家再常用不過了,下面這篇文章主要給大家介紹了關(guān)于JS中for循環(huán)的四種寫法,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下

1. 傳統(tǒng)for循環(huán)

for (init; cond; inc) {
  // body
}

與C++或Java類似，for關(guān)鍵字后用小括號描述循環(huán)設置，在小括號中用兩個分號;將循環(huán)設置隔斷為三個部分，分別為：

init初始化語句（指令），在整個循環(huán)開始前執(zhí)行
cond條件（邏輯表達式），表示循環(huán)繼續(xù)的條件
inc自增語句（指令），在每次循環(huán)體結(jié)束以后執(zhí)行

整個循環(huán)的執(zhí)行步驟為：

執(zhí)行init語句
計算cond表達式，若為假則退出循環(huán)
執(zhí)行循環(huán)體body
執(zhí)行inc語句，隨后返回步驟2

例如：

let sum = 0
for (let i = 1; i <= 10; i++) {
  sum += i
}
console.log(sum) // 55

2. for of 循環(huán)

for (const v of iterable) {
  // body
}

這里的iterable是指各種能夠被迭代的JS對象。最常用的例子是數(shù)組Array和字符串String，此外還有arguments、NodeList、Map、Set等等。執(zhí)行的效果是，for循環(huán)會遍歷iterable的每個項目，在每次循環(huán)中，代表變量v即為當前循環(huán)的項目。

例如：

const arr = [1, 2, 3, 4, 5]
let sum = 0
for (const v of arr) {
  sum += v
}
console.log(sum) // 15

高級：for await (const v of iterable) 可以用于異步循環(huán)遍歷。

3. for in 循環(huán)

for (const k in object) {
  // body
}

for in循環(huán)會遍歷object的每個屬性，在每次循環(huán)中，代表變量k即為當前屬性的屬性名稱(key)。

例如：

const obj = { a: 1, b: 2, c: 3 }
let sum = 0
for (const k in obj) {
  sum += obj[k] // read the value from key
}
console.log(sum) // 6

特別注意for of和for in的區(qū)別，前者的代表變量是項目的值(value)，后者的代表變量是屬性的名稱(key)。

4. forEach方法

Array.forEach(Function)

forEach是JS數(shù)組的原生方法。它接受一個函數(shù)作為參數(shù)，執(zhí)行效果是對數(shù)組的每一個項目，執(zhí)行傳入的函數(shù)。傳入的函數(shù)可以接受三個參數(shù)：(element, index, array)，其中element表示當前項目的值，index表示當前項目的下標，array表示循環(huán)的數(shù)組本身。

例如：

const arr = [1, 2, 3, 4, 5]
let sum = 0
arr.forEach(element => sum += element)
console.log(sum) // 15

通常在程序中我們更傾向于使用for of循環(huán)來代替forEach方法，因為for關(guān)鍵字使得代碼的可讀性更高。但是在一些特殊的情況下，我們依然會使用forEach方法循環(huán)遍歷數(shù)組中的每個項目。

高級：forEach可以傳入異步函數(shù)，等效于使用for await (const v of Array)。

附完整實例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <script>　　// 此處添加測試數(shù)組 textArr
    var textArr = [],
        i = 0;
    while (i<40000000) {
      textArr.push(i)
      i++
    }
    const forTest = (textArr) => {
      console.time('time forTest')
      var newArr = []　　　　// 第一種寫法 不帶聲明變量的寫法 （運行效率最好，性能最佳）
      for (var i = 0; i < textArr.length; i++) {
        newArr.push(i)
      }
      console.timeEnd('time forTest')
    }
    const forTest1 = (textArr) => { 　　　　console.time('time forTest1')　　　　var newArr = []　　　　// 第二種帶聲明變量的寫法 （相比之下要差一些）
for (var i = 0,len = textArr.length; i < len; i++) {
        newArr.push(i)
      }
      console.timeEnd('time forTest1')
    } 
    const forTest2 = (textArr) => {
      console.time('time forTest2')
      var newArr = []　　　　// 第三種 forEach的寫法  (效率最差，運行最慢)
      textArr.forEach(item => {
        newArr.push(item)
      })
      console.timeEnd('time forTest2')
    }
    const forTest3 = (textArr) => {
      console.time('time forTest3')
      var newArr = []　　　　// 第四種是 for循環(huán)的簡便寫法， （運行效率與不帶聲明變量的寫法相差無幾，相比之下，可以使用這種寫法，最優(yōu)），僅僅是本人的觀點
      for (var i = 1,cur; cur = textArr[i++];) {
        newArr.push(i)
      }
      console.timeEnd('time forTest3')
    }
    forTest(textArr)
    forTest1(textArr)
    forTest2(textArr)
    forTest3(textArr)
  </script>
</body>
</html>