for、forEach、for in、for of用法

循環遍歷數組或者對象，for、forEach、for in 、 for of 使用最多

for循環

自Javascript誕生時就有，遍歷數組，for 循環的語法以下：

for (語句 1; 語句 2; 語句 3) {
要執行的代碼塊
}

舉例說明

var arr = [1,2,3,4]
for(var i = 0 ; i< arr.length ; i++){
console.log(arr[i]); // 1 2 3 4 （輸出結果）
}

forEach循環

從ES5開始 Javascript內置了forEach方法 遍歷數組

let arr = ['a', 'b', 'c', 'd']
arr.forEach(function (val, idx, arr) {
console.log(val + ', index = ' + idx) // val是當前元素，index當前元素索引，arr數組
console.log(arr)
})

輸出結果

a, index = 0

(4) ["a", "b", "c", "d"]
b, index = 1

(4) ["a", "b", "c", "d"]
c, index = 2

(4) ["a", "b", "c", "d"]
d, index = 3

(4) ["a", "b", "c", "d"]

寫法簡單了不少，可是也存在一個侷限 就是你不能中斷循環(使用break語句或使用return語句）。

for in循環

for-in循環實際是爲循環」enumerable「對象而設計的

let obj = {a: '1', b: '2', c: '3', d: '4'}
for (let o in obj) {
console.log(o) //遍歷的其實是對象的屬性名稱 a,b,c,d
console.log(obj[o]) //這個纔是屬性對應的值1，2，3，4
}

for - in 也可用來循環數組，但通常並不推薦

for of循環

它是ES6中新增長的語法

循環一個數組

let arr = ['China', 'America', 'Korea']
for (let o of arr) {
console.log(o) //China, America, Korea
}

可是它並不能循環一個普通對象

let obj = {a: '1', b: '2', c: '3', d: '4'}
for (let o of obj) {
console.log(o) //Uncaught TypeError: obj[Symbol.iterator] is not a function
}

可是能夠循環一個擁有enumerable屬性的對象。

若是咱們按對象所擁有的屬性進行循環，可以使用內置的Object.keys()方法

let obj = {a: '1', b: '2', c: '3', d: '4'}
for (let o of Object.keys(obj)) {
console.log(o) // a,b,c,d
}

若是咱們按對象所擁有的屬性值進行循環，可以使用內置的Object.values()方法

let obj = {a: '1', b: '2', c: '3', d: '4'}
for (let o of Object.values(obj)) {
console.log(o) // 1,2,3,4
}

循環一個字符串

let str = 'love'
for (let o of str) {
console.log(o) // l,o,v,e
}

循環一個Map

let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]);

for (let [key, value] of iterable) {
console.log(value);
}
// 1
// 2
// 3

for (let entry of iterable) {
console.log(entry);
}
// [a, 1]
// [b, 2]
// [c, 3]

循環一個Set

let iterable = new Set([1, 1, 2, 2, 3, 3]);
for (let value of iterable) {
console.log(value);
}
// 1
// 2
// 3

循環一個類型化數組

let iterable = new Uint8Array([0x00, 0xff]);

for (let value of iterable) { console.log(value); } // 0 // 255