快捷導(dǎo)航

Javascript中如何循環(huán)(常用方法推薦)

更新時(shí)間：2025年04月17日 14:35:02 作者：流淚兔兔頭

在JavaScript中,遍歷集合（如數(shù)組、對(duì)象、Map和Set等）有多種方式,下面給大家分享幾種常用的方法來(lái)講解Javascript中如何循環(huán),感興趣的朋友一起看看吧

數(shù)組(Array)

for 循環(huán)

傳統(tǒng)循環(huán)，適用于所有版本的JavaScript。

for (let i = 0; i < array.length; i++) {
  console.log(array[i]);
}

forEach 方法

ES5 引入，用于遍歷數(shù)組元素。

array.forEach((element, index) => {
  console.log(element);
});

for…of 循環(huán)

ES6 引入，用于遍歷可迭代對(duì)象（包括數(shù)組）。

for (const element of array) {
  console.log(element);
}

map 方法

創(chuàng)建一個(gè)新數(shù)組，其結(jié)果是對(duì)調(diào)用數(shù)組中的每個(gè)元素執(zhí)行提供的函數(shù)的結(jié)果。

const newArray = array.map(element => /* ... */);

filter 方法

創(chuàng)建一個(gè)新數(shù)組, 包含通過(guò)所提供函數(shù)實(shí)現(xiàn)的測(cè)試的所有元素。

reduce 方法

對(duì)數(shù)組中的每個(gè)元素執(zhí)行一個(gè)由您提供的reducer函數(shù)(升序),將其結(jié)果匯總為單個(gè)返回值。

some 和 every 方法

for…in 循環(huán)

遍歷對(duì)象自身的和繼承的可枚舉屬性（不含 Symbol 屬性）。

for (const key in object) {
  if (object.hasOwnProperty(key)) {
    console.log(object[key]);
  }
}

Object.keys(), Object.values(), Object.entries()

這些方法返回一個(gè)包含對(duì)象鍵名、鍵值或鍵值對(duì)的數(shù)組，可以結(jié)合數(shù)組的遍歷方法使用。

for…of 循環(huán)

可以直接遍歷Map的鍵值對(duì)。

for (const [key, value] of map) {
  console.log(key, value);
}

forEach 方法

類似于數(shù)組的forEach，但專門針對(duì)Map設(shè)計(jì)。

map.forEach((value, key) => {
  console.log(key, value);
});

for…of 循環(huán)

直接遍歷Set中的值。

for (const value of set) {
  console.log(value);
}

forEach 方法

與Map類似，Set也有自己的forEach方法。

set.forEach(value => {
  console.log(value);
});

這些是遍歷不同類型的集合時(shí)最常用的幾種方法。選擇哪種方法取決于你的具體需求以及你所使用的JavaScript環(huán)境。

for 循環(huán)

- 優(yōu)點(diǎn): 靈活性高，適用于所有版本的JavaScript；可以方便地控制循環(huán)邏輯。
- 缺點(diǎn): 代碼量相對(duì)較多，不如一些更高階的方法簡(jiǎn)潔。

forEach 方法

for…of 循環(huán)

map 方法

優(yōu)點(diǎn): 返回一個(gè)新的數(shù)組，不會(huì)改變?cè)瓟?shù)組；非常適合用于轉(zhuǎn)換數(shù)組元素。
缺點(diǎn): 如果你不需要?jiǎng)?chuàng)建新數(shù)組，那么使用map可能會(huì)浪費(fèi)內(nèi)存。

filter 和 reduce 方法