快捷導(dǎo)航

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

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

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

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

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

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

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

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

執(zhí)行init語(yǔ)句
計(jì)算cond表達(dá)式，若為假則退出循環(huán)
執(zhí)行循環(huán)體body
執(zhí)行inc語(yǔ)句，隨后返回步驟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對(duì)象。最常用的例子是數(shù)組Array和字符串String，此外還有arguments、NodeList、Map、Set等等。執(zhí)行的效果是，for循環(huán)會(huì)遍歷iterable的每個(gè)項(xiàng)目，在每次循環(huán)中，代表變量v即為當(dāng)前循環(huán)的項(xiàng)目。

例如：

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

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

3. for in 循環(huán)

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

for in循環(huán)會(huì)遍歷object的每個(gè)屬性，在每次循環(huán)中，代表變量k即為當(dāng)前屬性的屬性名稱(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ū)別，前者的代表變量是項(xiàng)目的值(value)，后者的代表變量是屬性的名稱(key)。

4. forEach方法

Array.forEach(Function)

forEach是JS數(shù)組的原生方法。它接受一個(gè)函數(shù)作為參數(shù)，執(zhí)行效果是對(duì)數(shù)組的每一個(gè)項(xiàng)目，執(zhí)行傳入的函數(shù)。傳入的函數(shù)可以接受三個(gè)參數(shù)：(element, index, array)，其中element表示當(dāng)前項(xiàng)目的值，index表示當(dāng)前項(xiàng)目的下標(biāo)，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)來(lái)代替forEach方法，因?yàn)閒or關(guān)鍵字使得代碼的可讀性更高。但是在一些特殊的情況下，我們依然會(huì)使用forEach方法循環(huán)遍歷數(shù)組中的每個(gè)項(xiàng)目。

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

附完整實(shí)例：

<!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>　　// 此處添加測(cè)試數(shù)組 textArr
    var textArr = [],
        i = 0;
    while (i<40000000) {
      textArr.push(i)
      i++
    }
    const forTest = (textArr) => {
      console.time('time forTest')
      var newArr = []　　　　// 第一種寫法 不帶聲明變量的寫法 （運(yùn)行效率最好，性能最佳）
      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的寫法  (效率最差，運(yùn)行最慢)
      textArr.forEach(item => {
        newArr.push(item)
      })
      console.timeEnd('time forTest2')
    }
    const forTest3 = (textArr) => {
      console.time('time forTest3')
      var newArr = []　　　　// 第四種是 for循環(huán)的簡(jiǎn)便寫法， （運(yùn)行效率與不帶聲明變量的寫法相差無(wú)幾，相比之下，可以使用這種寫法，最優(yōu)），僅僅是本人的觀點(diǎn)
      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>