快捷導(dǎo)航

JavaScript幾種常見(jiàn)循環(huán)遍歷使用和區(qū)別

更新時(shí)間：2022年09月21日 09:12:22 作者：陸榮濤

這篇文章主要介紹了JavaScript幾種常見(jiàn)循環(huán)遍歷使用和區(qū)別,文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下

前言
1.“for” 循環(huán)：它是最常使用的循環(huán)形式
2."for..in" 循環(huán)：為了遍歷一個(gè)對(duì)象的所有鍵（key）
3.for..of：不能獲取當(dāng)前元素的索引，只是獲取元素值
4.forEach：允許為數(shù)組的每個(gè)元素都運(yùn)行一個(gè)函數(shù)
5.Map and Set（映射和集合）

前言

在javascript語(yǔ)言中經(jīng)常需要使用循環(huán)語(yǔ)法去獲取數(shù)據(jù)中的一些值，例如，我們需要將列表中的商品逐個(gè)輸出，或者運(yùn)行相同的代碼將數(shù)字 1 到 10 逐個(gè)輸出。方法也比較多，該篇將講解常見(jiàn)的循環(huán)遍歷的使用及區(qū)別

1.“for” 循環(huán)：它是最常使用的循環(huán)形式

對(duì)以上代碼做出解釋

begin	let i = 0	進(jìn)入循環(huán)時(shí)執(zhí)行一次。
condition	`i <= 3`	在每次循環(huán)迭代之前檢查，如果為 false，停止循環(huán)。
body（循環(huán)體）	`alert(i)`	條件為真時(shí)，重復(fù)運(yùn)行。
step	`i++`	在每次循環(huán)體迭代后執(zhí)行。

2."for..in" 循環(huán)：為了遍歷一個(gè)對(duì)象的所有鍵（key）

for (key in object) {
  // 對(duì)此對(duì)象屬性中的每個(gè)鍵執(zhí)行的代碼
}
?
// 案例：拿到對(duì)象中的鍵
let user = {
  name: "千鋒教育",
  age: 11,
  isAdmin: true
};
for (let key in user) {
  // keys
  alert( key );  // name, age, isAdmin
  // 屬性鍵的值
  alert( user[key] ); // 千鋒教育,11， true
}

3.for..of：不能獲取當(dāng)前元素的索引，只是獲取元素值

let arr = ["千鋒教育", "HTML5學(xué)科", "前端扛把子"];
for (let key of arr) {
  alert( arr[key] ); // 千鋒教育,HTML5學(xué)科，前端扛把子
}

對(duì)于以上常見(jiàn)三種的循環(huán)總結(jié)：

for循環(huán)：常見(jiàn)的基礎(chǔ)循環(huán)、可以提前break
for..in循環(huán)：用于遍歷對(duì)象屬性、得到對(duì)象中的鍵(字符串)、不可以直接進(jìn)行數(shù)學(xué)運(yùn)算、可以提前break
for..of循環(huán)：用于遍歷數(shù)組和可迭代對(duì)象的循環(huán)、得到數(shù)組對(duì)象中的值、可以提前break

4.forEach：允許為數(shù)組的每個(gè)元素都運(yùn)行一個(gè)函數(shù)

arr.forEach(function(item, index, array) {
  // ... 執(zhí)行代碼
});
?
// 案例：
let arr = [1, 2, 3, 4, 5];
arr.forEach(function (item) {
 ? ? console.log(item) // 1,2,3,4,5
});// undefined
// 沒(méi)有返回值，本質(zhì)上等同于 for 循環(huán)，對(duì)每一項(xiàng)執(zhí)行 function 函數(shù)，不會(huì)改變?cè)瓟?shù)組

5.Map and Set（映射和集合）

Map是一組鍵值對(duì)的結(jié)構(gòu)，具有極快的查找速度
let arr = ['HTML5', 'Java', 'python'];
let age = [100, 80, 90];
let res = new Map([['HTML5', 100], ['Java', 80], ['python', 90]]);
res.get('HTML5'); // 100
?
// Map常見(jiàn)的方法
let res = new Map(); // 空Map
res.set('勇哥', 18); // 添加新的key的value
res.has('勇哥'); // 是否存在key 
res.get('勇哥'); // 18
res.delete('勇哥'); // 刪除key 
res.get('翔哥'); // undefined
?
// Set和Map類似，也是一組key的集合，但不存儲(chǔ)value。由于key不能重復(fù)，所以，在Set中，沒(méi)有重復(fù)的key
let set = new Set(["千鋒教育", "HTML5", "11"]);
for (let value of set) alert(value);
?
// 與 forEach 相同：
set.forEach((value, valueAgain, set) => {
  alert(value);
});