1. 基礎循環 for

for (var i = 0; i < list.length; i++) {//循環體 } 復制代碼

最基礎的循環也有優化的空間：整個循環中數組的長度是不會改變的

for (var i = 0, len = list.length; i < len; i++) {//循環體 } 復制代碼

2. for in 循環 遍歷對象的屬性或數組索引

• for in 允許循環以不同的順序遍歷對象的屬性。如果算法依賴于遍歷的順序，最好不適用for in 還是選擇常規的for循環。

for (var key in obj) {//循環體 } 復制代碼

3. ES5 forEach()方法

• forEach()參數函數包含三個參數(item,index,list) 數組元素 元素索引 和數組本身。
• 后兩個參數可省略。
• 對數組進行值操作，會改變原來數組的值。
• forEach()在循環過程中無法終止遍歷，即沒有break語句，可使用try catch 拋出foreach.break異常提前終止。

var data = [1, 2, 3, 4, 5]; data.forEach((item, index, list) => {list[index] = item + 1; }) console.log(data); // =>[2, 3, 4, 5, 6] 復制代碼

4. ES5 map()方法

• map()將數組的每個元素給指定的函數，并返回一個數組，需要有返回值。
• map()返回的是一個新的數組，不修改調用的數組。

var data = [1, 2, 3]; var b = data.map((item) => {return item * item; }) console.log(b); // =>[1, 4, 9] 復制代碼

5. ES6 for of循環

• for of循環可以使用的范圍包括數組、Set 和 Map 結構、某些類似數組的對象（比如arguments對象、DOM NodeList 對象）。

獲取數組的值

const arr = ['red', 'green', 'blue'];for(let v of arr) {console.log(v); // red green blue } 復制代碼

2.獲取數組的鍵 值 鍵值對。 keys()是對鍵名的遍歷、values()是對鍵值的遍歷，entries()是對鍵值對的遍歷。

const arr = ['a', 'b']; for (let index of arr.keys()) {console.log(index); // 0 1 }for (let elem of arr.values()) {console.log(elem); // 'a' 'b' }for (let [index, elem] of arr.entries()) {console.log(index, elem); // 0 "a" 1 "b" } 復制代碼

轉載于:https://juejin.im/post/5c2c9485e51d457457293120

總結

以上是生活随笔為你收集整理的js循环(for/for in/forEach/map/for of)详解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。