JavaScript使用?for...in?、?for...of?或者?forEach()?遍歷元素的示例
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ù),更容易進行復雜的操作,而 for…in 和 for…of 較為基礎,只能用于遍歷。
- 注意遍歷對象時,for…in 會遍歷繼承的屬性,這可能需要額外的處理。
到此這篇關于JavaScript使用 for...in 、 for...of 或者 forEach() 遍歷元素的文章就介紹到這了,更多相關js遍歷元素內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
JavaScript設計模式之原型模式(Object.create與prototype)介紹
這篇文章主要介紹了JavaScript設計模式之原型模式(Object.create與prototype)介紹,原型模式指使用原型實例來拷貝、創(chuàng)建新的可定制的對象,新建的對象,不需要知道原對象創(chuàng)建的具體過程,需要的朋友可以參考下2014-12-12javascript中$(function() {});寫與不寫有哪些區(qū)別
javascript中$(function() {....}) 是jQuery中的經(jīng)典用法,等同于 $(document).ready(function() {....}) javascript中$(function() {});寫與不寫有哪些區(qū)別,需要的朋友可以參考下2015-08-08使用flutter創(chuàng)建可移動的stack小部件功能
本文主要介紹我為桌面和 Web 設計的一個超級秘密 Flutter 項目使用了畫布和可拖動節(jié)點界面。本教程將展示我如何使用堆棧來使用小部件完成可拖動功能,需要的朋友可以參考下2021-10-10