js循環(for/for in/forEach/map/for of)詳解

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 對象）。

1. 獲取數組的值

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"
}
複製代碼