JavaScript使用?for...in?、?for...of?或者?forEach()?遍歷元素的示例
更新時間：2023年09月15日 10:13:55 作者：謝爾登
for...in?、?for...of?和?forEach?都是用于循環(huán)遍歷集合元素的方法,但它們之間有一些重要的區(qū)別,本文通過實(shí)例代碼介紹JavaScript使用?for...in?、?for...of?或者?forEach()?遍歷元素的相關(guān)知識,感興趣的朋友一起看看吧
for...in 、 for...of 和 forEach 都是用于循環(huán)遍歷集合元素的方法，但它們之間有一些重要的區(qū)別：
1.for...in 循環(huán)：
for...in主要用于遍歷對象的屬性，通常是遍歷對象的可枚舉屬性（包括繼承的屬性），而不是數(shù)組或集合元素。- 它遍歷對象的屬性名稱（鍵名），而不是屬性的值。遍歷對象屬性時，包括繼承的屬性和原型鏈上的屬性。
- 適用于遍歷普通對象（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用于遍歷可迭代對象（如數(shù)組、字符串、Map、Set 等），并訪問它們的值。- 它不會遍歷對象的屬性，只會遍歷集合中的元素。
- 適用于遍歷數(shù)據(jù)集合，而不是對象的屬性。
示例：
const colors = ['red', 'green', 'blue'];
for (let color of colors) {
console.log(color);
}輸出：
red
green
blue
3.forEach：
- 用于遍歷數(shù)組的元素，對每個元素執(zhí)行一個回調(diào)函數(shù)。
- 提供了更高級別的抽象，讓你可以更容易地執(zhí)行數(shù)組操作，如映射、篩選、累加等。
- 不適用于普通對象，只適用于數(shù)組。示例：
Copy code
const numbers = [1, 2, 3, 4, 5];
numbers.forEach(function(number) {
console.log(number);
});主要區(qū)別總結(jié)：
- for…in 用于遍歷對象的屬性，for…of 用于遍歷可迭代對象的元素，而 forEach 用于遍歷數(shù)組元素。
- for…in 適用于對象，for…of 和 forEach 適用于數(shù)組。
- forEach 允許你傳遞一個回調(diào)函數(shù)，更容易進(jìn)行復(fù)雜的操作，而 for…in 和 for…of 較為基礎(chǔ)，只能用于遍歷。
- 注意遍歷對象時，for…in 會遍歷繼承的屬性，這可能需要額外的處理。
到此這篇關(guān)于JavaScript使用 for...in 、 for...of 或者 forEach() 遍歷元素的文章就介紹到這了,更多相關(guān)js遍歷元素內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
分割字符串的方法有很多，這篇文章主要介紹了一個JavaScript用逗號分割字符串實(shí)例，需要的朋友可以參考下2014-09-09
webpack學(xué)習(xí)教程之前端性能優(yōu)化總結(jié)
webpack是近期最火的一款模塊加載器兼打包工具，它能把各種資源，例如JS（含JSX）、coffee、樣式（含less/sass）、圖片等都作為模塊來使用和處理。這篇文章主要給大家總結(jié)介紹了關(guān)于webpack學(xué)習(xí)教程之前端性能優(yōu)化的相關(guān)資料，需要的朋友可以參考下。2017-12-12
javascript閉包傳參和事件的循環(huán)綁定示例探討
按常理循環(huán)綁定事件，但是得到的結(jié)果卻不是想要的，下面有個不錯的示例，可以為大家詳細(xì)分解下2014-04-04
基于js里調(diào)用函數(shù)時,函數(shù)名帶括號和不帶括號的區(qū)別
下面小編就為大家?guī)硪黄趈s里調(diào)用函數(shù)時,函數(shù)名帶括號和不帶括號的區(qū)別。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-07-07
動畫的原理是通過定時器setInterval() 不斷移動盒子位置。但是如果同時有好幾個元素都需要添加動畫呢？我們就可以考慮將其封裝成一個簡單的動畫函數(shù)。本文將為大家介紹如何進(jìn)行封裝，需要的可以參考一下2021-12-12
這篇文章主要介紹了微信小程序模板與設(shè)置WXML，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
TypeScript中Boolean和boolean的用法及區(qū)別
本文詳細(xì)解釋了TypeScript中Boolean和boolean的區(qū)別,從類型本質(zhì)、使用場景、真值判斷、性能考量等方面進(jìn)行對比,boolean為基本類型,適用于常規(guī)布爾邏輯,而Boolean為構(gòu)造函數(shù),適用于將布爾值作為對象處理的場景,了解這些差異有助于編寫更精確高效的TypeScript代碼2026-04-04
Javascript實(shí)現(xiàn)返回上一頁面并刷新的小例子
這篇文章主要介紹了Javascript實(shí)現(xiàn)返回上一頁面并刷新的小例子，有需要的朋友可以參考一下2013-12-12
uniApp獲取當(dāng)前位置經(jīng)緯度的示例代碼
這篇文章主要介紹了uniApp獲取當(dāng)前位置經(jīng)緯度,以下是使用uni.getLocation獲取當(dāng)前位置的示例代碼,需要的朋友可以參考下2024-01-01
Bootstrap Scrollspy源碼學(xué)習(xí)
這篇文章主要介紹了Bootstrap Scrollspy源碼學(xué)習(xí)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03