在開發過程中經常需要迴圈遍歷陣列或者物件，forEach、for in 、 for of這三種方法使用最多 但卻一值傻傻分不清楚。。今天來一個大區分。。
for迴圈

其實除了這三種方法以外還有一種最原始的遍歷，自Javascript誕生起就一直用的 就是for迴圈，它用來遍歷陣列

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)
})

    1
    2
    3
    4
    5

輸出結果：

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"]

    1
    2
    3
    4
    5
    6
    7
    8

寫法簡單了很多，但是也存在一個侷限 就是你不能中斷迴圈(使用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
}

    1
    2
    3
    4
    5

for - in 也可用來迴圈陣列，但一般並不推薦
for…of

它是ES6中新增加的語法
迴圈一個數組

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

    1
    2
    3
    4

但是它並不能迴圈一個普通物件

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
}

    1
    2
    3
    4

但是可以迴圈一個擁有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
}

    1
    2
    3
    4

如果我們按物件所擁有的屬性值進行迴圈，可使用內建的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
}

    1
    2
    3
    4

迴圈一個字串

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

    1
    2
    3
    4

迴圈一個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]

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15

迴圈一個Set

let iterable = new Set([1, 1, 2, 2, 3, 3]);

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

    1
    2
    3
    4
    5
    6
    7
    8

迴圈一個型別化陣列

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

for (let value of iterable) {
  console.log(value);
}
// 0
// 255
---------------------
作者：一個慢
來源：CSDN
原文：https://blog.csdn.net/one_girl/article/details/80192899
版權宣告：本文為博主原創文章，轉載請附上博文連結！