JavaScript 的 for…in、for…of和forEach有什么區(qū)別?

一、遍歷對象和數(shù)組

for…in：用于遍歷對象的可枚舉屬性，無法直接遍歷數(shù)組。for…of：用于遍歷可迭代對象，包括數(shù)組、字符串、Set、Map等，無法直接遍歷普通對象。forEach：只能用于遍歷數(shù)組，不能用于遍歷對象。

二、遍歷順序

for…in：遍歷對象屬性時，順序不確定，取決于JavaScript引擎實現(xiàn)。for…of：遍歷數(shù)組元素時，按照元素在數(shù)組中的順序進行遍歷。forEach：按照數(shù)組中元素的順序依次遍歷，不會跳過任何元素。

三、遍歷的內(nèi)容

for…in：遍歷的是對象的屬性名（鍵）。for…of：遍歷的是可迭代對象的元素值。forEach：遍歷的是數(shù)組的元素值。

四、可用性

for…in：可以用于遍歷普通對象的可枚舉屬性，也可以用于遍歷數(shù)組的索引。for…of：可以用于遍歷具有迭代器的可迭代對象，如數(shù)組、字符串、Set、Map等。forEach：只能用于遍歷數(shù)組，不支持遍歷普通對象。

五、使用場景

for…in：適用于遍歷對象的屬性，在需要遍歷對象的屬性名或鍵時使用。for…of：適用于遍歷可迭代對象的元素值，在需要遍歷數(shù)組、字符串等可迭代對象的元素時使用。forEach：適用于遍歷數(shù)組的元素值，在需要遍歷數(shù)組并對每個元素執(zhí)行相同操作時使用。

六、支持性

for…in：在所有現(xiàn)代瀏覽器中均支持。for…of：在較新版本的瀏覽器中支持，不支持舊版本的Internet Explorer（IE）瀏覽器。forEach：在較新版本的瀏覽器中支持，不支持舊版本的Internet Explorer（IE）瀏覽器。

七、使用方式

for…in：使用for…in循環(huán)時，需要使用hasOwnProperty()方法過濾原型鏈上的屬性，以確保只遍歷對象本身的屬性。for…of：直接遍歷可迭代對象的元素值，不需要額外的過濾操作。forEach：使用forEach方法時，需要傳入一個回調(diào)函數(shù)作為參數(shù)，該函數(shù)會在每個數(shù)組元素上調(diào)用一次，執(zhí)行特定的操作。

八、迭代器支持

for…in：不支持遍歷迭代器對象。for…of：支持遍歷具有迭代器的可迭代對象，可以遍歷類似數(shù)組的自定義對象。forEach：不支持直接遍歷迭代器對象，需要先將迭代器轉(zhuǎn)換為數(shù)組再進行遍歷。

延伸閱讀

forEach方法

forEach 是一種常見的數(shù)組方法，用于對數(shù)組的每個元素執(zhí)行指定的操作或回調(diào)函數(shù)。forEach 方法接受一個回調(diào)函數(shù)作為參數(shù)，并在數(shù)組的每個元素上調(diào)用該函數(shù)?；卣{(diào)函數(shù)可以接受三個參數(shù)：當前元素的值、當前元素的索引和正在遍歷的數(shù)組本身。

下面是一個使用 forEach 方法的示例：

const numbers = [1, 2, 3, 4, 5];numbers.forEach((number, index, array) => {  console.log(當前元素：${number});  console.log(當前索引：${index});  console.log(當前數(shù)組：${array});});

在這個例子中，我們定義了一個名為 numbers 的數(shù)組，并對其應用 forEach 方法。回調(diào)函數(shù)中的參數(shù) number 表示當前元素的值，index 表示當前元素的索引，array 表示正在遍歷的數(shù)組。

在回調(diào)函數(shù)中，我們可以執(zhí)行任意操作。在示例中，我們簡單地將當前元素、索引和數(shù)組打印到控制臺。

forEach 方法對于遍歷數(shù)組并對每個元素執(zhí)行相同的操作非常有用。然而，它不會返回新的數(shù)組，也不能在遍歷過程中中止或跳過循環(huán)。如果需要返回新的數(shù)組或具有更多控制權的遍歷操作，可以考慮使用其他數(shù)組方法，如 map、filter 或 reduce。