JavaScript 中的12種循環遍歷方法

一、for 循環

let arr = \[1,2,3\];  
for (let i=0; i<arr.length; i++){  
 console.log(i,arr\[i\])  
}  
// 0 1  
// 1 2  
// 2 3

for 循環是 Js 中最經常使用的一個循環工具，常常用於數組的循環遍歷。

二、for in 循環

let obj = {name:'zhou',age:'**'}  
for(let i in obj){  
 console.log(i,obj\[i\])  
}  
// name zhou  
// age **

for in 循環主要用於遍歷普通對象，i 表明對象的 key 值，obj[i] 表明對應的 value,當用它來遍歷數組時候，多數狀況下也能達到一樣的效果，可是你不要這麼作，這是有風險的，由於 i 輸出爲字符串形式，而不是數組須要的數字下標，這意味着在某些狀況下，會發生字符串運算，致使數據錯誤，好比：'52'+1 = '521' 而不是咱們須要的 53。

另外 for in 循環的時候，不只遍歷自身的屬性，還會找到 prototype 上去，因此最好在循環體內加一個判斷，就用 obj[i].hasOwnProperty(i)，這樣就避免遍歷出太多不須要的屬性。

三、while 循環

一樣的遍歷 cars 數組，先用 for 循環方法

let cars=\["BMW","Volvo","Saab","Ford"\];  
let i=0;  
for (;cars\[i\];)  
{  
console.log(cars\[i\])  
i++;  
};  
// BMW  
// Volvo  
// Saab  
// Ford

而後是 while 循環方法

cars=\["BMW","Volvo","Saab","Ford"\];  
var i=0;  
while (cars\[i\])  
{  
console.log(cars\[i\] + "<br>")  
i++;  
};

前端全棧學習交流圈：866109386
面向1-3經驗年前端開發人員
幫助突破技術瓶頸，提高思惟能力

咱們發現，它們能夠實現一樣的效果，事實上它們底層的處理是同樣的，不過 for 循環能夠把定義、條件判斷、自增自減操做放到一個條件裏執行，代碼看起來方便一些，僅此而已。

四、do while 循環

let i = 3;  
do{  
 console.log(i)  
 i--;  
}  
while(i>0)  
// 3  
// 2  
// 1

do while 循環是 while 循環的一個變體，它首先執行一次操做，而後才進行條件判斷，是 true 的話再繼續執行操做，是 false 的話循環結束。

**五、Array forEach 循環**

let arr = \[1,2,3\];  
arr.forEach(function(i,index){  
 console.log(i,index)  
})  
// 1 0  
// 2 1  
// 3 2

forEach循環，循環數組中每個元素並採起操做， 沒有返回值， 能夠不用知道數組長度,他有三個參數，只有第一個是必需的，表明當前下標下的 value。

另外請注意，forEach 循環在全部元素調用完畢以前是不能中止的，它沒有 break 語句，若是你必需要中止，能夠嘗試 try catch 語句，就是在要強制退出的時候，拋出一個 error 給 catch 捕捉到，而後在 catch 裏面 return，這樣就能停止循環了，若是你常常用這個方法，最好自定義一個這樣的 forEach 函數在你的庫裏。

六、Array map()方法

let arr = \[1,2,3\];  
let tt = arr.map(function(i){  
 console.log(i)  
 return i*2;  
})  
// \[2,4,6\]

map() 方法返回一個新數組，數組中的元素爲原始數組元素調用函數處理後的值。
注意：map 和 forEach 方法都是隻能用來遍歷數組，不能用來遍歷普通對象。

七、Array filter() 方法

let arr = \[1,2,3\];  
let tt = arr.filter(function(i){  
 return i>1;  
})  
// \[2,3\]

filter 方法是 Array 對象內置方法，它會返回經過過濾的元素，不改變原來的數組。

**八、Array some() 方法**

let arr = \[1,2,3\];  
let tt = arr.some(function(i){  
 return i>1;  
})  
// true

some() 方法用於檢測數組中的元素是否知足指定條件（函數提供）,返回 boolean 值，不改變原數組。

九、Array every() 方法

let arr = \[1,2,3\];  
let tt = arr.some(function(i){  
 return i>1;  
})  
// 檢測數組中元素是否都大於1  
// false

every() 方法用於檢測數組全部元素是否都符合指定條件（經過函數提供），返回 boolean 值，不改變原數組。

十、Array reduce()方法

let arr = \[1,2,3\];  
let ad = arr.reduce(function(i,j){  
 return i+j;  
})  
// 6

reduce() 方法接收一個函數做爲累加器，數組中的每一個值（從左到右）開始縮減，最終計算爲一個值。

十一、Array reduceRight()方法

let arr = \[1,2,3\];  
let ad = arr.reduceRight(function(i,j){  
 return i+j;  
})  
// 6

reduceRight()方法,和 reduce() 功能是同樣的，它是從數組的末尾處向前開始計算。

十二、for of 循環

for(let i of arr){  
 console.log(i)  
}  
// name  
// age

for of 循環是 Es6 中新增的語句，用來替代 for in 和 forEach，它容許你遍歷 Arrays（數組）, Strings（字符串）, Maps（映射）, Sets（集合）等可迭代(Iterable data)的數據結構,注意它的兼容性。

總結

以上就是我總結的 Js 中常見的循環遍歷方法，隨着 Es6 標準的兼容性愈來愈好，我發現不少實現方案慢慢都再也不必要了，好比 let、const 取代var 後，在某些狀況下的閉包函數也就不存在了。