js迴圈(for/for in/forEach/map/for of)詳解

漲月薪發表於2019-01-03
JS

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

相關文章