for/of

for/of迴圈專門用於可迭代物件，可迭代物件有陣列、字串、集合和對映。

let data = [1, 2, 3, 4, 5]
let sum = 0
for (let value of data) {
  sum += value
}

// sum => 15

for/of與物件

for/of是不可以迭代物件的，但是基於Object.keys()可以獲得物件屬性名的陣列，而陣列可以通過for/of來迭代，然後通過屬性訪問表示式的方式來訪問物件屬性的值。

let obj = { x: 1, y: 2, z: 3 }
for (let key of Object.keys(obj)) {
    console.log(obj[key])
}
 

也可以直接通過Object.values()直接獲取物件屬性的值。

let obj = { x: 1, y: 2, z: 3 }
for (let value of Object.values(obj)) {
    console.log(value)
}

也可以通過Object.entries()獲取物件屬性的鍵和值。

let obj = { x: 1, y: 2, z: 3 }
for (let [key, value] of Object.entries(obj)) {
    console.log(`${key} => `, value)
}

// x =>  1
// y =>  2
// z =>  3
 

for/of與字串

字串在ES6中是可以逐個字元迭代的。

let data = "hello"
for (let value of data) {
  console.log(value)
}

// h e l l o

for/of與Set和Map

ES6內建的Set和Map類是可迭代的。

Set可以儲存任何型別的唯一值，無論是原始值還是物件引用。

let set = new Set(['Ha', 'ha', 'ha', 'ha', 'wow'])
for (let value of set) {
  console.log(value)
}

// Ha ha wow

for/of每次迭代都會返回此元素的鍵-值陣列，Map可以儲存鍵值對，並記住鍵的插入順序。

let map = new Map([
    [1, 'Ha'],
    [2, 'ha'],
    [3, 'ha'],
    [4, 'ha'],
    [5, 'wow']
])
for (let [key, value] of map) {
    console.log(key, value)
}

// 1 "Ha"
// 2 "ha"
// 3 "ha"
// 4 "ha"
// 5 "wow"

for/in

for/of必須是可迭代物件，而for/in可以是任意物件。

let data = [1, 2, 3, 4, 5]
let sum = 0
for (let value in data) {
  sum += value
}

// sum => 15

for/in與物件

for/in迭代物件時，in操作符的左側運算元將會獲得該物件的Key值。

let person = {
    name: 'hello',
    age: 20,
    sex: 'man'
}
for (let key in person) {
    console.log(person[key])
}

// hello 20 man

for/in與字串

for/in迭代字串與for/of不同，in操作符左側的運算元將會獲得字串的下標索引值，而不是字元本身。

let data = "hello"
for (let value in data) {
    console.log(value)
}

// 0 1 2 3 4

所以for/in迭代字串需要使用屬性訪問表示式。

let data = "hello"
for (let index in data) {
    console.log(data[index])
}

// h e l l o