循環(huán)允許我們循環(huán)遍歷數(shù)組或?qū)ο笾械捻?，并?zhí)行打印、修改或執(zhí)行其他類型的任務(wù)或操作等操作。有不同種類的循環(huán)，而 JavaScript 中的 for 循環(huán)允許我們迭代通過集合（如數(shù)組）進行遍歷。

為什么在 JavaScript 代碼中要使用 for 循環(huán)

在 JavaScript 中，就像其他編程語言一樣，我們使用循環(huán)來讀取或訪問集合中的項。集合可以是數(shù)組或?qū)ο蟆Ｃ看窝h(huán)語句遍歷集合中的項時，我們稱其為迭代。

有兩種訪問集合中項的方法。第一種方法是通過集合中的鍵，這是數(shù)組中的索引或?qū)ο笾械膶傩?。第二種方法是通過項本身，而不需要鍵。

for…in 循環(huán)的定義

JavaScript for 循環(huán)遍歷集合的鍵。使用這些鍵，您可以訪問它在集合中所代表的項。

項的集合可以是數(shù)組、對象或甚至字符串。

for…in 循環(huán)的語法

for 循環(huán)具有以下語法或結(jié)構(gòu)：

for (let key in value) {
  //do something here
}

在這個代碼塊中，value 是我們正在迭代的項的集合。它可以是對象、數(shù)組、字符串等。key 將是 value 中每個項的鍵，在每次迭代中更改為列表中的下一個鍵。

請注意，我們使用 let 或 const 聲明 key。

在 JavaScript 中使用 for 循環(huán)與對象

當(dāng)使用 for...in 循環(huán)在 JavaScript 中迭代對象時，迭代的鍵或?qū)傩裕ㄔ谏厦娴拇a片段中由 key 變量表示）是對象自身的屬性。

由于對象可能通過原型鏈繼承項，該鏈包括對象的默認方法和屬性以及我們可能定義的對象原型，因此我們應(yīng)該使用 hasOwnProperty。

遍歷可迭代對象的 for 循環(huán)示例

在下面的示例中，我們正在循環(huán)變量 obj 并記錄每個屬性和值：

const obj = {
  "a": "JavaScript",
  1: "PHP",
  "b": "Python",
  2: "Java"
};
for (let key in obj) {
  console.log(key + ": " + obj[key] )
}
// Output:
// "1: PHP"
// "2: Java"
// "a: JavaScript"
// "b: Python"

請注意，鍵的迭代順序是升序的（即從數(shù)字按數(shù)字順序開始，然后是按字母順序排列的字母）。但是，輸出的順序與初始化對象時創(chuàng)建項的索引順序不同。

在 JavaScript 中使用 for…in 循環(huán)與數(shù)組

當(dāng)使用 for...in 循環(huán)在 JavaScript 中迭代數(shù)組時，此時的 key 是元素的索引。然而，索引可能以隨機順序進行迭代。

因此，如果上面所示的 for...in 循環(huán)語法結(jié)構(gòu)中的 value 變量是包含五個項的數(shù)組，則不能保證 key 是 0 到 4。有些索引可能在其他索引之前。關(guān)于這種情況何時發(fā)生的詳細說明將在本文后面解釋。

for…in 循環(huán)數(shù)組示例

在下面的示例中，我們正在循環(huán)以下變量 arr：

const arr = ["JavaScript", "PHP", "Python", "Java"];
for (let key in arr) {
  console.log(key + ": " + arr[key])
}
// Output:
// "0: JavaScript"
// "1: PHP"
// "2: Python"
// "3: Java"

在循環(huán)中，我們呈現(xiàn)了每個數(shù)組元素的索引和值。

在 for…in 循環(huán)中使用字符串

您可以使用 JavaScript for...in 循環(huán)循環(huán)字符串。然而，不建議這樣做，因為您將循環(huán)遍歷字符的索引，而不是字符本身。

for…in 循環(huán)字符串示例

在下面的示例中，我們正在循環(huán)以下變量 str：

const str = "Hello!";
for (let key in str) {
  console.log(key + ": " + str.charAt(key));
}
//Output
// "0: H"
// "1: e"
// "2: l"
// "3: l"
// "4: o"
// "5: !"

在循環(huán)中，我們呈現(xiàn)了每個字符的鍵或索引以及該索引處的字符。

讓我們看一下適合使用 JavaScript for...in 循環(huán)的情況。

使用 JavaScript for…in 循環(huán)迭代對象 因為 for...in 循環(huán)只迭代一個對象的可枚舉屬性——即該對象自己的屬性，而不是像 toString 這樣的屬于對象原型的屬性，所以使用 for...in 循環(huán)來迭代對象是很好的選擇。for...in 循環(huán)提供了一種簡單的方法來迭代一個對象的屬性，最終訪問其值。

使用 for…in 循環(huán)進行調(diào)試

另一個適合使用 JavaScript for...in 循環(huán)的場景是調(diào)試。例如，您可能想要將一個對象的屬性和其值打印到控制臺或 HTML 元素中。在這種情況下，for...in 循環(huán)是一個不錯的選擇。

當(dāng)使用 for...in 循環(huán)調(diào)試對象及其值時，您應(yīng)始終記住，迭代不是有序的，這意味著循環(huán)迭代的項目順序可能是隨機的。因此，訪問的屬性順序可能不如預(yù)期。

使用 for...in 循環(huán)遍歷對象

在 JavaScript 中使用 for...in 循環(huán)遍歷對象時，被迭代的鍵或?qū)傩裕ㄔ谏厦娴拇a段中表示為 key 變量）是對象自己的屬性。

由于對象可能通過原型鏈繼承項，其中包括對象的默認方法和屬性以及我們定義的 Object 原型，因此我們應(yīng)該使用 hasOwnProperty。

可迭代對象的 for 循環(huán)示例

在下面的示例中，我們循環(huán)遍歷變量 obj 并記錄每個屬性和值：

請注意，迭代的鍵的順序是按數(shù)字順序開始的，然后按字母順序進行排序。但是，此輸出順序與初始化對象時創(chuàng)建的索引順序不同。

在數(shù)組中使用 for...in 循環(huán)

在 JavaScript 中使用 for...in 循環(huán)迭代數(shù)組時，此處的鍵將是元素的索引。但是，這些索引可能以任意順序迭代。

因此，如果 for...in 循環(huán)語法結(jié)構(gòu)中的 value 變量是包含五個項目的數(shù)組，則 key 不保證是 0 到 4。某些索引可能在其他索引之前。稍后在本文中將解釋此類情況。

在數(shù)組中使用 for...in 循環(huán)的示例 在下面的示例中，我們循環(huán)遍歷以下變量 arr：

在循環(huán)中，我們呈現(xiàn)每個數(shù)組元素的索引和值。

使用 for...in 循環(huán)遍歷字符串

您可以使用 JavaScript for...in 循環(huán)遍歷字符串。但是，不建議這樣做，因為您將循環(huán)遍歷字符的索引而不是字符本身。

for...in 循環(huán)字符串示例 在下面的示例中，我們循環(huán)遍歷以下變量 str：

在循環(huán)中，我們呈現(xiàn)每個字符的鍵或索引，以及該索引處的字符。

現(xiàn)在讓我們看看 JavaScript for...in 循環(huán)最適合的情況。

使用 JavaScript for…in 循環(huán)迭代對象

由于 for...in 循環(huán)僅迭代對象的可枚舉屬性，這些屬性是對象自己的屬性而不是像 toString 那樣的屬性，因此使用 for...in 循環(huán)迭代對象是很好的選擇。for...in 循環(huán)提供了一種簡單的方式來遍歷對象的屬性，最終得到其值。

使用 for...in 循環(huán)調(diào)試

JavaScript for...in 循環(huán)的另一個好用途是調(diào)試。例如，您可能希望將對象的屬性和其值打印到控制臺或 HTML 元素中。在這種情況下，for...in 循環(huán)是一個不錯的選擇。

在使用 for...in 循環(huán)調(diào)試對象及其值時，您應(yīng)始終記住，迭代不是有序的，這意味著循環(huán)迭代的項目順序可能是隨機

在那些 for...in 循環(huán)不是最佳選擇的情況下，應(yīng)該使用什么替代方案呢？讓我們來看一看。

在數(shù)組中使用 for 循環(huán)

使用 for 循環(huán)永遠不會錯！JavaScript 的 for 循環(huán)是循環(huán)數(shù)組元素的最基本工具之一。for 循環(huán)允許您在迭代數(shù)組時完全控制索引。

這意味著在使用 for 循環(huán)時，您可以向前或向后移動，更改數(shù)組中的項，添加項等，同時仍然維護數(shù)組的順序。

以下語句創(chuàng)建一個循環(huán)，遍歷一個數(shù)組并將其值打印到控制臺。

for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

JavaScript中的forEach方法適用于數(shù)組和對象。它是數(shù)組原型上的一個方法，允許我們在回調(diào)函數(shù)中迭代數(shù)組的元素和它們的索引。

回調(diào)函數(shù)是傳遞給另一個方法或函數(shù)的函數(shù)，作為該方法或函數(shù)執(zhí)行的一部分而被執(zhí)行。對于JavaScript中的forEach，這意味著回調(diào)函數(shù)將為每個迭代執(zhí)行，將當(dāng)前迭代項作為參數(shù)接收。

例如，以下語句使用forEach迭代變量arr，并將其值打印到控制臺中：

arr.forEach((value) => console.log(value));

你還可以訪問數(shù)組的索引：

arr.forEach((value, index) => console.log(value, index));

JavaScript的forEach循環(huán)還可以使用Object.keys()迭代對象，將其傳遞給該方法，它將返回對象自己的屬性數(shù)組：

Object.keys(obj).forEach((key) => console.log(obj[key]));

另外，如果您不需要訪問屬性，您也可以使用Object.values()來使用forEach直接循環(huán)遍歷屬性的值：

Object.values(obj).forEach((value) => console.log(value));

請注意，Object.values()返回的項目與for...in循環(huán)的順序相同。

到此這篇關(guān)于詳解如何在JavaScript中使用for循環(huán)的文章就介紹到這了,更多相關(guān)JavaScript使用for循環(huán)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論