循環(huán)允許我們循環(huán)遍歷數(shù)組或?qū)ο笾械捻椖浚?zhí)行諸如打印、修改它們或執(zhí)行其他類型的任務或動作之類的事情。JavaScript 中有不同種類的循環(huán)，其中一種是 for...in 循環(huán)。

在本文中，我們將了解for...inJavaScript 提供的循環(huán)。我們將看看for...in循環(huán)在 JavaScript 中是如何使用的、它的語法、它是如何工作的示例、何時使用它、何時不使用它，以及我們可以使用哪些其他類型的循環(huán)。

為什么使用循環(huán)

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

有兩種方法可以訪問集合中的項目。第一種方法是通過它在集合中的鍵，它是數(shù)組中的索引或?qū)ο笾械膶傩浴５诙N方式是通過項目本身，而不需要密鑰。

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

JavaScriptfor...in循環(huán)遍歷或迭代集合的鍵。使用這些鍵，您可以訪問它在集合中表示的項目。

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

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

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

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

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

請注意，我們使用letorconst來聲明key。

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

在 JavaScript 中使用for...in循環(huán)迭代對象時，迭代的鍵或?qū)傩?在上面的代碼段中由key變量表示)是對象自己的屬性。

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

for...in 循環(huán)對象示例

在以下示例中，我們將循環(huán)以下變量obj：

const obj = {
  1: "JavaScript",
  3: "PHP",
  2: "Python",
  4: "Java"
};

在循環(huán)中，我們正在渲染<div>元素中的屬性和值。

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

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

在 JavaScript 中使用for...in循環(huán)迭代數(shù)組時，key在這種情況下將是元素的索引。但是，索引可能會以隨機順序迭代。

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

For...in 循環(huán)數(shù)組示例

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

const arr = ["Javascript", "PHP", "Python", "Java"];

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

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

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

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

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

const str = "Hello, World!";

在循環(huán)內(nèi)部，我們渲染每個字符的鍵或索引，以及該索引處的字符。

何時使用 for...in 循環(huán)

讓我們看看 JavaScriptfor...in循環(huán)最適合的情況。

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

因為for...in循環(huán)只迭代對象的可枚舉屬性——這是對象自己的屬性，而不是像toString對象原型中的屬性——使用for...in循環(huán)來迭代對象是很好的。循環(huán)提供了一種for...in簡單的方法來迭代對象的屬性并最終迭代其值。

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

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

使用for...in循環(huán)調(diào)試對象及其值時，應始終牢記迭代不是有序的，這意味著循環(huán)迭代的項目順序可以是隨機的。因此，訪問屬性的順序可能與預期不同。

何時不使用 JavaScript for...in 循環(huán)

現(xiàn)在讓我們看看for...in循環(huán)不是最佳選擇的情況。

數(shù)組的有序迭代

由于使用for...in循環(huán)時無法保證迭代中的索引順序，因此如果需要維護順序，建議不要對數(shù)組進行迭代。

如果您希望支持像 IE 這樣的瀏覽器，這一點尤其重要，它按照項目的創(chuàng)建順序而不是索引的順序進行迭代。這與當前現(xiàn)代瀏覽器的工作方式不同，后者根據(jù)索引按升序迭代數(shù)組。

因此，例如，如果您有一個包含四個項目的數(shù)組，并且您將一個項目插入位置 3，在現(xiàn)代瀏覽器中，for...in循環(huán)仍將按從 0 到 4 的順序迭代數(shù)組。在 IE 中，當使用for...in循環(huán)時，它將迭代最初在數(shù)組中的四個項目，然后到達在位置三添加的項目。

在迭代時進行更改

對屬性的任何添加、刪除或修改都不能保證有序迭代。for...in應避免在循環(huán)中更改屬性。這主要是由于其無序的性質(zhì)。

因此，如果您在迭代中到達之前刪除了一個項目，那么在整個循環(huán)中根本不會訪問該項目。

同樣，如果您對屬性進行更改，也不能保證該項目不會再次被重新訪問。因此，如果一個屬性被更改，它可能會在循環(huán)中被訪問兩次而不是一次。

此外，如果在迭代過程中添加了一個屬性，那么在迭代過程中它可能會被訪問，也可能根本不會被訪問。

由于這些情況，最好避免在for...in循環(huán)中對對象進行任何更改、刪除或添加。

for...in這是在循環(huán)中添加元素的示例。我們可以看到第一個循環(huán)的結(jié)果，然后在第一個循環(huán)中進行添加后的第二個循環(huán)。

正如您在上面的示例中看到的，添加的元素沒有被迭代。

替代循環(huán)類型

因此，在for...in循環(huán)不是最佳選擇的情況下，您應該改用什么?讓我們來看看。

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

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

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

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

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

用于數(shù)組和對象的 forEach 方法

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

回調(diào)函數(shù)是您傳遞給另一個方法或函數(shù)以作為該方法或函數(shù)執(zhí)行的一部分執(zhí)行的函數(shù)。在forEachJavaScript 中，這意味著每次迭代都會執(zhí)行回調(diào)函數(shù)，接收迭代中的當前項作為參數(shù)。

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

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

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

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

JavaScriptforEach循環(huán)也可用于通過使用Object.keys()來迭代對象，將要迭代的對象傳遞給它，這將返回對象自身屬性的數(shù)組：

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

或者，forEach如果您不需要使用Object.values()訪問屬性，則可以直接遍歷屬性的值：

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

請注意，Object.values()以與 相同的順序返回項目for...in。

結(jié)論

通過使用 JavaScriptfor...in循環(huán)，我們可以遍歷對象的鍵或?qū)傩浴Ｋ诘鷮ο髮傩曰蛘{(diào)試時很有用，但在迭代數(shù)組或?qū)ο筮M行更改時應避免使用。我希望你發(fā)現(xiàn)上面的例子和解釋很有用。