JavaScript >> Javascript 文檔 >  >> JavaScript

如何在 JavaScript 中創建 For 循環

這篇文章最初是為 DigitalOcean 寫的。

簡介

循環用於編程以自動執行重複性任務。 JavaScript 中最基本的循環類型是 whiledo...while 語句,您可以在“如何在 JavaScript 中構造 While 和 Do...While 循環”中查看。

因為 whiledo...while 語句是基於條件的,它們在給定語句返回為 true 評估時執行 .相似之處在於它們也是基於條件的,for 語句還包括額外的功能,例如 循環計數器 ,允許您預先設置循環的迭代次數。

在本教程中,我們將了解 for 語句,包括 for...offor...in 語句,它們是 JavaScript 編程語言的基本元素。

For 循環

for statement是一種循環,最多使用三個可選表達式來實現代碼塊的重複執行。

讓我們看一個例子來說明這意味著什麼。

for (initialization; condition; final expression) {
	// code to be executed
}

在上面的語法中,for 中有三個表達式 聲明:初始化 , 條件 ,以及最終表達式 ,也稱為增量。

讓我們用一個基本的例子來演示這些語句的作用。

// Initialize a for statement with 5 iterations
for (let i = 0; i < 4; i++) {
  // Print each iteration to the console
  console.log(i)
}

當我們運行上面的代碼時,我們會收到如下輸出:

0
1
2
3

在上面的例子中,我們初始化了 for 使用 let i = 0 循環 ,在 0 處開始循環 .我們將條件設置為 i < 4 ,意思就是只要i 計算結果小於 4 ,循環將繼續運行。 i++ 的最終表達式 通過循環增加每次迭代的計數。 console.log(i) 打印出從 0 開始的數字 並在 i 後立即停止 被評估為 4 .

在不使用循環的情況下,我們可以使用以下代碼實現相同的輸出。

// Set initial variable to 0
let i = 0

// Manually increment variable by 1 four times
console.log(i++)
console.log(i++)
console.log(i++)
console.log(i++)

如果沒有適當的循環,代碼塊是重複的並且包含更多行。如果我們需要增加更多的數字,我們就需要編寫更多的代碼。

讓我們回顧一下循環中的每個表達式以完全理解它們。

初始化

我們的第一個表達式是初始化 .這就是它的樣子。

let i = 0

我們聲明了一個名為 i 的變量 使用 let 關鍵字(關鍵字 var 也可以使用)並賦予其值 0 .雖然變量可以命名為任何名稱,但 i 是最常用的。變量 i 代表 i 迭代,是一致的,並且保持代碼緊湊。

條件

正如我們在 while 中看到的那樣 和 do...while 循環,for 循環通常包含一個條件 .這是我們的條件語句。

i < 4

我們已經確定了我們的迭代變量 i , 代表0 開始。現在我們說條件是 true 只要i 小於 4 在這個例子中。

最終表達式

最終表達式 是在每個循環結束時執行的語句。它最常用於增加或減少一個值,但它可以用於任何目的。

i++

在我們的示例中,我們使用 i++ 將變量加一 .這與運行 i = i + 1 相同 .

與初始化和條件表達式不同,最終表達式不以分號結尾。

放在一起

現在我們已經查看了 for 中包含的三個表達式 循環,我們可以再看一遍完整的循環。

// Initialize a for statement with 5 iterations
for (let i = 0; i < 4; i++) {
  console.log(i)
}

首先,我們聲明 i 並將其設置為 0 .然後,我們為循環設置一個條件,直到 i 小於 4 .最後,我們增加 i 每次迭代一個 1。我們的代碼塊打印出 i 的值 到控制台,所以我們的結果是 0 , 1 , 2 , 和 3 作為輸出。

可選表達式

for 中的所有三個表達式 循環是可選的。比如我們可以寫同樣的for 通過在循環外初始化變量,不帶初始化表達式的語句。

// Declare variable outside the loop
let i = 0

// Initialize the loop
for (; i < 4; i++) {
  console.log(i)
}
0
1
2
3

在這種情況下,第一個 ; 有必要表示語句是指初始化、條件還是最終表達式,即使它被省略。

下面,我們還可以從循環中刪除條件。我們將使用 if 結合break的語句 告訴循環停止運行一次 i 大於 3 ,與 true 正好相反 條件。

// Declare variable outside the loop
let i = 0

// Omit initialization and condition
for (; ; i++) {
  if (i > 3) {
    break
  }
  console.log(i)
}
0
1
2
3

最後,可以通過將最終表達式放在循環末尾來刪除它。兩個分號仍然必須包含,否則循環將不起作用。

// Declare variable outside the loop
let i = 0

// Omit all statements
for (;;) {
  if (i > 3) {
    break
  }
  console.log(i)
  i++
}
0
1
2
3

從上面的例子中我們可以看出,包含所有三個語句通常會產生最簡潔和可讀的代碼。但是,如果您將來遇到它,知道可以省略語句是很有用的。

修改數組

我們可以使用 for 循環修改數組。

在下一個示例中,我們將創建一個空數組並使用循環計數器變量填充它。

// Initialize empty array
let arrayExample = []

// Initialize loop to run 3 times
for (let i = 0; i < 3; i++) {
  // Update array with variable value
  arrayExample.push(i)
  console.log(arrayExample)
}

運行上面的 JavaScript 代碼將產生以下輸出。

[ 0 ]
[ 0, 1 ]
[ 0, 1, 2 ]

我們設置了一個循環,一直運行到 i < 3 不再是 true ,我們告訴控制台打印 arrayExample 在每次迭代結束時將數組發送到控制台。通過這個方法,我們可以看到數組是如何用新值更新的。

數組長度

有時,我們可能希望循環運行多次,但不確定迭代次數。我們可以使用 length,而不是像前面的例子那樣聲明一個靜態數字 數組的屬性,使循環運行的次數與數組中的項目一樣多。

// Declare array with 3 items
let fish = ['flounder', 'salmon', 'pike']

// Initalize for loop to run for the total length of an array
for (let i = 0; i < fish.length; i++) {
  // Print each item to the console
  console.log(fish[i])
}

我們將收到以下輸出。

flounder
salmon
pike

在此示例中,我們使用 fish[i] 遞增數組的每個索引 (例如,循環將通過 fish[0] 遞增 , fish[1] , ETC。)。這會導致索引隨著每次迭代而動態更新。

for 的更多細節 聲明可在 Mozilla 開發者網絡上找到。

For...In 循環

for...in 語句迭代對象的屬性。為了演示,我們將製作一個簡單的 shark 帶有幾個 name:value 的對象 對。

const shark = {
  species: 'great white',
  color: 'white',
  numberOfTeeth: Infinity,
}

使用 for...in 循環,我們可以輕鬆訪問每個屬性名稱。

// Print property names of object
for (attribute in shark) {
  console.log(attribute)
}
species
color
numberOfTeeth

我們還可以通過將屬性名作為對象的索引值來訪問每個屬性的值。

// Print property values of object
for (attribute in shark) {
  console.log(shark[attribute])
}
great white
white
Infinity

將它們放在一起,我們可以訪問對象的所有名稱和值。

// Print names and values of object properties
for (attribute in shark) {
  console.log(`${attribute}`.toUpperCase() + `: ${shark[attribute]}`)
}
SPECIES: great white
COLOR: white
NUMBEROFTEETH: Infinity

我們使用 toUpperCase() 方法來修改屬性名稱,然後是屬性值。 for...in 是一種非常有用的遍歷對象屬性的方法。

查看 for...in 更多詳細信息,請訪問 Mozilla 開發者網絡。

For...Of 循環

for...in 語句對於迭代對象屬性很有用,但要迭代數組和字符串等可迭代對象,我們可以使用 for...of 陳述。 for...of statement 是 ECMAScript 6 中的一項新功能。ECMAScript(或 ES)是一種腳本語言規範,旨在標準化 JavaScript。

在這個 for...of 的例子中 循環,我們將創建一個數組並將數組中的每一項打印到控制台。

// Initialize array of shark species
let sharks = ['great white', 'tiger', 'hammerhead']

// Print out each type of shark
for (let shark of sharks) {
  console.log(shark)
}

我們將從 for...of 收到以下輸出 聲明。

great white
tiger
hammerhead

也可以使用 entries() 打印出與索引元素關聯的索引 方法。

// Loop through both index and element
for (let [index, shark] of sharks.entries()) {
  console.log(index, shark)
}
0 'great white'
1 'tiger'
2 'hammerhead'

字符串可以像數組一樣被迭代。

// Assign string to a variable
let sharkString = 'sharks'

// Iterate through each index in the string
for (let shark of sharkString) {
  console.log(shark)
}
s
h
a
r
k
s

在這種情況下,我們遍歷字符串中的每個字符,按順序打印它們。

關於 for...in 之間差異的更詳細說明 和 for...of ,了解for...of 在 Mozilla 開發者網絡上循環。

結論

在本教程中,我們學習瞭如何構造 for JavaScript 中的循環,由 for 組成 , for...offor...in 聲明。

循環是 JavaScript 編程不可或缺的一部分,用於自動執行重複性任務並使代碼更加簡潔和高效。


Tutorial JavaScript 教程
  1. 類似於 jQuery.offset() 的純 JavaScript 函數?

  2. 在 Cypress 中靜音嘈雜的 XHR 日誌

  3. 🚀 Svelte 快速提示:將商店連接到本地存儲

  4. 教程:使用 React 創建一個簡單的 ISS 跟踪器

  5. Node express查詢Notion數據庫

  6. 宣布與 10up 建立 Frontitys 合作夥伴關係

  7. 如何在 2022 年成為一名 Web 開發人員,與 Gandalf 教練一起

  1. 我在 NPM 上的第一個 React.js 組件

  2. ReasonML 和 Rescript 在 5 分鐘內

  3. npm 代理問題疑難解答第 1 部分

  4. 如何使用javascript製作刷新按鈕

  5. 如何使用終端打開 VSCode

  6. 使用 React Hook 動態添加表格行

  7. 良好通量實現的質量

  1. 在 Emergency Response Africa 上使用 AWS 進行 API 授權

  2. 什麼是功能標誌?

  3. 動態行的動態下拉選擇,而不僅僅是第一行

  4. 電子大冒險:第 14 集:反應