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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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ù)字順序開始，然后是按字母順序排列的字母）。但是，輸出的順序與初始化對象時(shí)創(chuàng)建項(xiàng)的索引順序不同。

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

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

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

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)了每個(gè)數(shù)組元素的索引和值。

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

您可以使用 JavaScript for...in 循環(huán)循環(huán)字符串。然而，不建議這樣做，因?yàn)槟鷮⒀h(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)了每個(gè)字符的鍵或索引以及該索引處的字符。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

您可以使用 JavaScript for...in 循環(huán)遍歷字符串。但是，不建議這樣做，因?yàn)槟鷮⒀h(huán)遍歷字符的索引而不是字符本身。

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

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

現(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)的另一個(gè)好用途是調(diào)試。例如，您可能希望將對象的屬性和其值打印到控制臺(tái)或 HTML 元素中。在這種情況下，for...in 循環(huán)是一個(gè)不錯(cuò)的選擇。

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

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

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

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

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

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

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

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

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

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

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()返回的項(xiàng)目與for...in循環(huán)的順序相同。

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

最新評論