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

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

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

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

前言

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

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

對以上代碼做出解釋

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

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

for (key in object) {
  // 對此對象屬性中的每個鍵執(zhí)行的代碼
}
?
// 案例：拿到對象中的鍵
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：不能獲取當前元素的索引，只是獲取元素值

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

對于以上常見三種的循環(huán)總結：

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

4.forEach：允許為數組的每個元素都運行一個函數

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
// 沒有返回值，本質上等同于 for 循環(huán)，對每一項執(zhí)行 function 函數，不會改變原數組

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

Map是一組鍵值對的結構，具有極快的查找速度
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常見的方法
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的集合，但不存儲value。由于key不能重復，所以，在Set中，沒有重復的key
let set = new Set(["千鋒教育", "HTML5", "11"]);
for (let value of set) alert(value);
?
// 與 forEach 相同：
set.forEach((value, valueAgain, set) => {
  alert(value);
});