建站
咨詢
售后
建站咨詢
新聞中心
在本文中，我們將了解for...inJavaScript 提供的循環(huán)。我們將看看for...in循環(huán)在 JavaScript 中是如何使用的、它的語(yǔ)法、它是如何工作的示例、何時(shí)使用它、何時(shí)不使用它，以及我們可以使用哪些其他類型的循環(huán)。
為什么使用循環(huán)
在 JavaScript 中，就像在其他編程語(yǔ)言中一樣，我們使用循環(huán)來(lái)讀取或訪問(wèn)集合中的項(xiàng)目。集合可以是數(shù)組或?qū)ο蟆Ｃ看伪闅v集合中的項(xiàng)目稱為一次迭代。
有兩種方法可以訪問(wèn)集合中的項(xiàng)目。第一種方法是通過(guò)它在集合中的鍵，它是數(shù)組中的索引或?qū)ο笾械膶傩?。第二種方式是通過(guò)項(xiàng)目本身，而不需要密鑰。
for...in 循環(huán)的定義
JavaScriptfor...in循環(huán)遍歷或迭代集合的鍵。使用這些鍵，您可以訪問(wèn)它在集合中表示的項(xiàng)目。
項(xiàng)目的集合可以是數(shù)組、對(duì)象，甚至是字符串。
for...in 循環(huán)的語(yǔ)法
循環(huán)具有以下for...in語(yǔ)法或結(jié)構(gòu)：
for (let key in value) {
//do something here
}在這個(gè)代碼塊中，value是我們正在迭代的項(xiàng)目的集合。它可以是對(duì)象、數(shù)組、字符串等。key將是 中每個(gè)項(xiàng)目的鍵value，在每次迭代時(shí)更改為列表中的下一個(gè)鍵。
請(qǐng)注意，我們使用letorconst來(lái)聲明key。
對(duì)對(duì)象使用 for...in 循環(huán)
在 JavaScript 中使用for...in循環(huán)迭代對(duì)象時(shí)，迭代的鍵或?qū)傩?在上面的代碼段中由key變量表示)是對(duì)象自己的屬性。
由于對(duì)象可能通過(guò)原型鏈繼承項(xiàng)目，其中包括對(duì)象的默認(rèn)方法和屬性以及我們可能定義的對(duì)象原型，因此我們應(yīng)該使用hasOwnProperty。
for...in 循環(huán)對(duì)象示例
在以下示例中，我們將循環(huán)以下變量obj：
const obj = {
1: "JavaScript",
3: "PHP",
2: "Python",
4: "Java"
};在循環(huán)中，我們正在渲染
請(qǐng)注意，鍵的迭代順序是升序的(即，從數(shù)字順序開(kāi)始，然后是字母順序)。但是，這個(gè)輸出順序與初始化對(duì)象時(shí)創(chuàng)建的項(xiàng)目的索引順序不同。
對(duì)數(shù)組使用 for...in 循環(huán)
在 JavaScript 中使用for...in循環(huán)迭代數(shù)組時(shí)，key在這種情況下將是元素的索引。但是，索引可能會(huì)以隨機(jī)順序迭代。
因此，如果我們上面展示value的循環(huán)語(yǔ)法結(jié)構(gòu)中的變量for...in是一個(gè)包含五個(gè)項(xiàng)目的數(shù)組，則key不能保證為 0 到 4。某些索引可能在其他索引出現(xiàn)之前。本文稍后將解釋有關(guān)何時(shí)可能發(fā)生這種情況的詳細(xì)信息。
For...in 循環(huán)數(shù)組示例
在下面的示例中，我們正在循環(huán)以下變量arr：
const arr = ["Javascript", "PHP", "Python", "Java"];
在循環(huán)中，我們渲染每個(gè)數(shù)組元素的索引和值。
對(duì)字符串使用 for...in 循環(huán)
您可以使用 JavaScriptfor...in循環(huán)遍歷字符串。但是，不建議這樣做，因?yàn)槟鷮⒀h(huán)遍歷字符的索引而不是字符本身。
for...in 循環(huán)字符串示例
在下面的示例中，我們正在循環(huán)以下變量str：
const str = "Hello, World!";
在循環(huán)內(nèi)部，我們渲染每個(gè)字符的鍵或索引，以及該索引處的字符。
何時(shí)使用 for...in 循環(huán)
讓我們看看 JavaScriptfor...in循環(huán)最適合的情況。
使用 JavaScript for...in 循環(huán)迭代對(duì)象
因?yàn)閒or...in循環(huán)只迭代對(duì)象的可枚舉屬性——這是對(duì)象自己的屬性，而不是像toString對(duì)象原型中的屬性——使用for...in循環(huán)來(lái)迭代對(duì)象是很好的。循環(huán)提供了一種for...in簡(jiǎn)單的方法來(lái)迭代對(duì)象的屬性并最終迭代其值。
使用 for...in 循環(huán)進(jìn)行調(diào)試
for...inJavaScript循環(huán)的另一個(gè)很好的用例是調(diào)試。例如，您可能希望將對(duì)象的屬性及其值打印到控制臺(tái)或 HTML 元素。在這種情況下，for...in循環(huán)是一個(gè)不錯(cuò)的選擇。
使用for...in循環(huán)調(diào)試對(duì)象及其值時(shí)，應(yīng)始終牢記迭代不是有序的，這意味著循環(huán)迭代的項(xiàng)目順序可以是隨機(jī)的。因此，訪問(wèn)屬性的順序可能與預(yù)期不同。
何時(shí)不使用 JavaScript for...in 循環(huán)
現(xiàn)在讓我們看看for...in循環(huán)不是最佳選擇的情況。
數(shù)組的有序迭代
由于使用for...in循環(huán)時(shí)無(wú)法保證迭代中的索引順序，因此如果需要維護(hù)順序，建議不要對(duì)數(shù)組進(jìn)行迭代。
如果您希望支持像 IE 這樣的瀏覽器，這一點(diǎn)尤其重要，它按照項(xiàng)目的創(chuàng)建順序而不是索引的順序進(jìn)行迭代。這與當(dāng)前現(xiàn)代瀏覽器的工作方式不同，后者根據(jù)索引按升序迭代數(shù)組。
因此，例如，如果您有一個(gè)包含四個(gè)項(xiàng)目的數(shù)組，并且您將一個(gè)項(xiàng)目插入位置 3，在現(xiàn)代瀏覽器中，for...in循環(huán)仍將按從 0 到 4 的順序迭代數(shù)組。在 IE 中，當(dāng)使用for...in循環(huán)時(shí)，它將迭代最初在數(shù)組中的四個(gè)項(xiàng)目，然后到達(dá)在位置三添加的項(xiàng)目。
在迭代時(shí)進(jìn)行更改
對(duì)屬性的任何添加、刪除或修改都不能保證有序迭代。for...in應(yīng)避免在循環(huán)中更改屬性。這主要是由于其無(wú)序的性質(zhì)。
因此，如果您在迭代中到達(dá)之前刪除了一個(gè)項(xiàng)目，那么在整個(gè)循環(huán)中根本不會(huì)訪問(wèn)該項(xiàng)目。
同樣，如果您對(duì)屬性進(jìn)行更改，也不能保證該項(xiàng)目不會(huì)再次被重新訪問(wèn)。因此，如果一個(gè)屬性被更改，它可能會(huì)在循環(huán)中被訪問(wèn)兩次而不是一次。
此外，如果在迭代過(guò)程中添加了一個(gè)屬性，那么在迭代過(guò)程中它可能會(huì)被訪問(wèn)，也可能根本不會(huì)被訪問(wèn)。
由于這些情況，最好避免在for...in循環(huán)中對(duì)對(duì)象進(jìn)行任何更改、刪除或添加。
for...in這是在循環(huán)中添加元素的示例。我們可以看到第一個(gè)循環(huán)的結(jié)果，然后在第一個(gè)循環(huán)中進(jìn)行添加后的第二個(gè)循環(huán)。
正如您在上面的示例中看到的，添加的元素沒(méi)有被迭代。
替代循環(huán)類型
因此，在for...in循環(huán)不是最佳選擇的情況下，您應(yīng)該改用什么?讓我們來(lái)看看。
對(duì)數(shù)組使用 for 循環(huán)
使用for循環(huán)永遠(yuǎn)不會(huì)錯(cuò)!JavaScriptfor循環(huán)是循環(huán)數(shù)組元素的最基本工具之一。該for循環(huán)允許您在迭代數(shù)組時(shí)完全控制索引。
這意味著在使用for循環(huán)時(shí)，您可以前后移動(dòng)、更改數(shù)組中的項(xiàng)、添加項(xiàng)等等，同時(shí)仍保持?jǐn)?shù)組的順序。
以下語(yǔ)句創(chuàng)建了一個(gè)循環(huán)，該循環(huán)遍歷數(shù)組并將其值打印到控制臺(tái)。
for (let i = 0; i < arr.length; i++) {
console.log(arr[i]);
}用于數(shù)組和對(duì)象的 forEach 方法
JavaScript 中的forEach是數(shù)組原型上的一個(gè)方法，它允許我們?cè)诨卣{(diào)函數(shù)中迭代數(shù)組的元素及其索引。
回調(diào)函數(shù)是您傳遞給另一個(gè)方法或函數(shù)以作為該方法或函數(shù)執(zhí)行的一部分執(zhí)行的函數(shù)。在forEachJavaScript 中，這意味著每次迭代都會(huì)執(zhí)行回調(diào)函數(shù)，接收迭代中的當(dāng)前項(xiàng)作為參數(shù)。
例如，以下語(yǔ)句迭代變量arr并使用以下命令在控制臺(tái)中打印其值forEach：
arr.forEach((value) => console.log(value));
您還可以訪問(wèn)數(shù)組的索引：
arr.forEach((value, index) => console.log(value, index));
JavaScriptforEach循環(huán)也可用于通過(guò)使用Object.keys()來(lái)迭代對(duì)象，將要迭代的對(duì)象傳遞給它，這將返回對(duì)象自身屬性的數(shù)組：
Object.keys(obj).forEach((key) => console.log(obj[key]));
或者，forEach如果您不需要使用Object.values()訪問(wèn)屬性，則可以直接遍歷屬性的值：
Object.values(obj).forEach((value) => console.log(value));
請(qǐng)注意，Object.values()以與 相同的順序返回項(xiàng)目for...in。
結(jié)論
通過(guò)使用 JavaScriptfor...in循環(huán)，我們可以遍歷對(duì)象的鍵或?qū)傩?。它在迭代?duì)象屬性或調(diào)試時(shí)很有用，但在迭代數(shù)組或?qū)?duì)象進(jìn)行更改時(shí)應(yīng)避免使用。我希望你發(fā)現(xiàn)上面的例子和解釋很有用。
當(dāng)前題目：JavaScriptFor循環(huán)：使用for，in循環(huán)的技巧你會(huì)了嗎
URL標(biāo)題：http://m.5511xx.com/article/ccopcoh.html
