iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 24
0
自我挑戰組

利用30分鐘~想一個前端問題系列 第 24

利用30分鐘~想一個前端問題 Day24-What is the difference between JavaScript's for...in, for...of ?

What is the difference between JavaScript's for...in, for...of ?

for...in vs for...of

  1. for...in

可以針對 物件(Object)或 陣列(Array)來使用遍歷物件,但無法用 Map 和 Set 方法

我們建立一個物件,而 prop 是自訂的變數,會把該物件的屬性存在這個變數中,接著讀取下一個屬性,重覆直到沒有屬性為止。透過 for...in,可以把該物件中的所有屬性名稱和屬性值都呼叫出來。

對於每個不同的屬性,語句都會被執行。每次迭代時,分配的是屬性名  

for (let prop in ['a', 'b', 'c'])
  console.log(prop);            // 0, 1, 2 (array indexes)

for (let prop in 'str')
  console.log(prop);            // 0, 1, 2 (string indexes)

for (let prop in {a: 1, b: 2, c: 3})
  console.log(prop);            // a, b, c (object property names)

for (let prop in new Set(['a', 'b', 'a', 'd']))
  console.log(prop);            // undefined (no enumerable properties)

2.for of

只要部署了Iterator的數據結構都可以使用for ··· of ···完成遍歷操作
關於 Iterables/Iterators 迭代器

for (let val of ['a', 'b', 'c'])
  console.log(val);            // a, b, c (array values)

for (let val of 'str')
  console.log(val);            // s, t, r (string characters)

for (let val of {a: 1, b: 2, c: 3})
  console.log(prop);           // TypeError (not iterable)

for (let val of new Set(['a', 'b', 'a', 'd']))
  console.log(val);            // a, b, d (Set values)

總結來說:for in總是得到 的key或陣列,而for of和forEach一樣,是直接得到值,在迭代物件屬性時,使用 for...in;在迭代陣列時,使用 for...of

參考資料

MDN for...of

js中forEach,for in,for of循環的用法


上一篇
利用30分鐘~想一個前端問題 Day23-runPromisesInSeries
下一篇
利用30分鐘~想一個前端問題 Day25-capitalize
系列文
利用30分鐘~想一個前端問題30

尚未有邦友留言

立即登入留言