前言

循環(huán)允許我們通過(guò)循環(huán)數(shù)組或?qū)ο笾械捻?xiàng)并做一些事情，比如說(shuō)打印它們，修改它們，或執(zhí)行其他類(lèi)型的任務(wù)或動(dòng)作。JavaScript有各種各樣的循環(huán)，for循環(huán)允許我們對(duì)一個(gè)集合（如數(shù)組）進(jìn)行迭代。

在這篇文章中，我們將了解JavaScript提供的for循環(huán)。我們將看看for...in循環(huán)語(yǔ)句是如何在JavaScript中使用的，它的語(yǔ)法，它如何工作的例子，何時(shí)使用它或避免它，以及我們可以使用哪些其他類(lèi)型的循環(huán)來(lái)代替。

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

在JavaScript中，就像在其他編程語(yǔ)言中一樣，我們使用循環(huán)來(lái)讀取或訪問(wèn)集合中的項(xiàng)。這個(gè)集合可以是一個(gè)數(shù)組或一個(gè)對(duì)象。每當(dāng)循環(huán)語(yǔ)句在一個(gè)集合中的項(xiàng)中循環(huán)時(shí)，我們稱(chēng)之為一個(gè)迭代。

有兩種方式可以訪問(wèn)集合中的項(xiàng)。第一種方式是通過(guò)它在集合中的鍵，也就是數(shù)組中的索引或?qū)ο笾械膶傩浴５诙N方式是通過(guò)集合項(xiàng)本身，而不需要鍵。

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

JavaScript的for循環(huán)會(huì)或迭代集合中的鍵。使用這些鍵，你就可以訪問(wèn)它在集合中代表的項(xiàng)。

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

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

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

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

在上述代碼塊中，value是我們迭代的項(xiàng)的集合。它可以是對(duì)象、數(shù)組、字符串等等。key會(huì)是value每一項(xiàng)的鍵，在每次迭代中都會(huì)改變到列表中的下一個(gè)鍵。

注意，這里我們使用let或const來(lái)聲明key。

在對(duì)象中使用for…in循環(huán)

在JavaScript中使用for...in循環(huán)迭代對(duì)象時(shí)，其迭代的鍵或者屬性是對(duì)象自己的屬性（在上面的示例中，由key變量表示）。

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

在下面的例子中，我們通過(guò)變量obj進(jìn)行循環(huán)，并打印每一個(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"

請(qǐng)注意，鍵的迭代順序是升序的（也就是說(shuō)，從數(shù)字開(kāi)始，按數(shù)字的順序，然后是字母，按字母的順序）。然而，這個(gè)輸出的順序與初始化對(duì)象時(shí)創(chuàng)建的項(xiàng)的索引順序不同。

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

在JavaScript中使用for...in循環(huán)來(lái)迭代數(shù)組時(shí)，在這種情況下，key將是元素的索引。然而，索引可以按隨機(jī)順序迭代。

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

在下面的例子中，我們對(duì)arr變量進(jìn)行循環(huán)：

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)來(lái)循環(huán)字符串。然而，不推薦這么做，因?yàn)槟銓⒃谧址乃饕涎h(huán)，而不是字符串本身。

在下面的例子中，我們對(duì)str變量進(jìn)行循環(huán)：

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: !"

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

讓我們看看JavaScript for…in循環(huán)最適合的情況。

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

因?yàn)?code>for...in循環(huán)只迭代對(duì)象的可枚舉屬性，也就是對(duì)象自有屬性，而不是像toString這樣屬于對(duì)象原型的屬性。所以使用for...in循環(huán)來(lái)迭代對(duì)象是很好的。for...in循環(huán)提供了一個(gè)簡(jiǎn)單的方法來(lái)迭代一個(gè)對(duì)象的屬性并最終得到它的值。

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

JavaScript for...in循環(huán)的另一個(gè)很好的用例是調(diào)試。比如，你可能想向控制臺(tái)或HTML元素打印一個(gè)對(duì)象的屬性和它的值。在這種情況下，for...in循環(huán)是一個(gè)不錯(cuò)的選擇。

當(dāng)使用for…in循環(huán)調(diào)試對(duì)象以及對(duì)象的值時(shí)，你應(yīng)該始終記住，迭代是沒(méi)有順序的。也就是說(shuō)，迭代的順序是隨機(jī)的。所以，訪問(wèn)屬性的順序可能與預(yù)期不同。

不使用for…in循環(huán)的情形

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

數(shù)組的有序迭代

由于使用for...in循環(huán)時(shí)不能保證迭代中的索引順序，如果有必要保持順序，建議不要迭代數(shù)組。

如果你想支持像IE這樣的瀏覽器，這一點(diǎn)尤其重要，因?yàn)镮E是按照數(shù)組項(xiàng)創(chuàng)建的順序而不是按照索引的順序進(jìn)行迭代的。這與當(dāng)前現(xiàn)代瀏覽器的工作方式不同，后者是根據(jù)索引的升序來(lái)迭代數(shù)組的。

舉例來(lái)說(shuō)，如果你有一個(gè)包含四項(xiàng)的數(shù)組，你在索引3的位置插入了一項(xiàng)，在現(xiàn)代瀏覽器中，for...in循環(huán)仍然會(huì)按照從0到4的順序遍歷數(shù)組。 在IE中，當(dāng)使用for...in循環(huán)時(shí)，它將遍歷一開(kāi)始就在數(shù)組中的四個(gè)項(xiàng)目，然后再遍歷在索引3的位置添加的那一項(xiàng)。

迭代時(shí)進(jìn)行更改

對(duì)屬性的任何添加、刪除或修改都不能保證有序的迭代。應(yīng)該避免在for...in循環(huán)中對(duì)屬性進(jìn)行更改。這主要是由于它的無(wú)序性。

因此，如果你在迭代到達(dá)某一項(xiàng)之前刪除它，那么這項(xiàng)在整個(gè)循環(huán)中根本就不會(huì)被訪問(wèn)。

同樣地，如果你對(duì)一個(gè)屬性進(jìn)行修改，并不能保證這項(xiàng)不會(huì)被再次訪問(wèn)。因此，如果一個(gè)屬性被改變，它可能會(huì)在循環(huán)中被訪問(wèn)兩次而不是一次。

除此之外，如果一個(gè)屬性在迭代過(guò)程中被添加，那么它在迭代過(guò)程中可能會(huì)被訪問(wèn)，也可能根本不會(huì)被訪問(wèn)。

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

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

<h2>Before</h2>
<div id="loopResultsBefore"></div>
<h2>After</h2>
<div id="loopResultsAfter"></div>

const beforeDiv = document.getElementById('loopResultsBefore');

const afterDiv = document.getElementById('loopResultsAfter');

const obj = {
  "a": "JavaScript",
  1: "PHP",
  "b": "Python",
  2: "Java"
};

for (let key in obj) {
  beforeDiv.innerHTML += key + ": " + obj[key] + "<br />";
  if (!isNaN(key)) {
    obj[key - 1] = obj[key];
  }
}

for (let key in obj) {
  afterDiv.innerHTML += key + ": " + obj[key] + "<br />";
}

// Before
// 1: PHP
// 2: Java
// a: JavaScript
// b: Python
// After
// 0: PHP
// 1: Java
// 2: Java
// a: JavaScript
// b: Python

正如你在上面的例子中看到的，被添加的元素并沒(méi)有被迭代。

for循環(huán)的替代方案

forEach在JavaScript中是數(shù)組原型的一個(gè)方法，它允許我們?cè)诨卣{(diào)函數(shù)中遍歷數(shù)組的元素和它們的索引。

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

舉例來(lái)說(shuō)，下面的語(yǔ)句使用forEach迭代arr變量，并在console中打印value：

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

你也可以訪問(wèn)數(shù)組的索引：

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

JavaScript forEach循環(huán)也可以使用Object.keys()來(lái)迭代對(duì)象，把你想迭代的對(duì)象傳給它，它返回對(duì)象的自有屬性數(shù)組：

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

另外，如果你不需要使用Object.values()來(lái)訪問(wèn)屬性，你可以用forEach來(lái)直接循環(huán)屬性的值：

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

注意，Object.values()返回項(xiàng)的順序與for...in相同。

總結(jié)

通過(guò)使用JavaScript for...in循環(huán)，我們可以循環(huán)對(duì)象的鍵或?qū)傩?。在迭代?duì)象屬性或進(jìn)行調(diào)試時(shí)，它可能很有用，但在迭代數(shù)組或?qū)?duì)象進(jìn)行修改時(shí)，應(yīng)該避免使用for...in循環(huán)。

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