快捷導(dǎo)航

JavaScript使用?for...in?、?for...of?或者?forEach()?遍歷元素的示例

更新時(shí)間：2023年09月15日 10:13:55 作者：謝爾登

for...in?、?for...of?和?forEach?都是用于循環(huán)遍歷集合元素的方法,但它們之間有一些重要的區(qū)別,本文通過實(shí)例代碼介紹JavaScript使用?for...in?、?for...of?或者?forEach()?遍歷元素的相關(guān)知識(shí),感興趣的朋友一起看看吧

for...in 、 for...of 和 forEach 都是用于循環(huán)遍歷集合元素的方法，但它們之間有一些重要的區(qū)別：

1.for...in 循環(huán)：

for...in 主要用于遍歷對(duì)象的屬性，通常是遍歷對(duì)象的可枚舉屬性（包括繼承的屬性），而不是數(shù)組或集合元素。
它遍歷對(duì)象的屬性名稱（鍵名），而不是屬性的值。遍歷對(duì)象屬性時(shí)，包括繼承的屬性和原型鏈上的屬性。
適用于遍歷普通對(duì)象（Object）的屬性，不適用于數(shù)組或類似數(shù)據(jù)集合的遍歷。

示例：

const person = {
  name: 'John',
  age: 30,
  job: 'Engineer'
};
for (let key in person) {
  console.log(key + ': ' + person[key]);
}

輸出：

name: John
age: 30
job: Engineer

2.for...of 循環(huán)：

for...of 用于遍歷可迭代對(duì)象（如數(shù)組、字符串、Map、Set 等），并訪問它們的值。
它不會(huì)遍歷對(duì)象的屬性，只會(huì)遍歷集合中的元素。
適用于遍歷數(shù)據(jù)集合，而不是對(duì)象的屬性。

示例：

const colors = ['red', 'green', 'blue'];
for (let color of colors) {
  console.log(color);
}

輸出：

red
green
blue

3.forEach：

用于遍歷數(shù)組的元素，對(duì)每個(gè)元素執(zhí)行一個(gè)回調(diào)函數(shù)。
提供了更高級(jí)別的抽象，讓你可以更容易地執(zhí)行數(shù)組操作，如映射、篩選、累加等。
不適用于普通對(duì)象，只適用于數(shù)組。示例：

Copy code
const numbers = [1, 2, 3, 4, 5];
numbers.forEach(function(number) {
  console.log(number);
});

主要區(qū)別總結(jié)：

for…in 用于遍歷對(duì)象的屬性，for…of 用于遍歷可迭代對(duì)象的元素，而 forEach 用于遍歷數(shù)組元素。
for…in 適用于對(duì)象，for…of 和 forEach 適用于數(shù)組。
forEach 允許你傳遞一個(gè)回調(diào)函數(shù)，更容易進(jìn)行復(fù)雜的操作，而 for…in 和 for…of 較為基礎(chǔ)，只能用于遍歷。
注意遍歷對(duì)象時(shí)，for…in 會(huì)遍歷繼承的屬性，這可能需要額外的處理。

到此這篇關(guān)于JavaScript使用 for...in 、 for...of 或者 forEach() 遍歷元素的文章就介紹到這了,更多相關(guān)js遍歷元素內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: