9-3 如何使用 For/in 迴圈與 For/of 的差別

Original: https://course.andys.pro/Javascript-Intro/09-3-how-to-use-the-difference-between-forin-loop-and-forof/

講義

1. For/in 迴圈：走訪「索引/鍵」

for...in 主要用來列舉物件的屬性名稱（Key）或是陣列的索引（Index）。

• 用於陣列：取得的是 0, 1, 2... 等索引。

  var arr = [10, 20, 30];
  for (var i in arr) {
      console.log(i); // 印出 0, 1, 2
      console.log(arr[i]); // 印出 10, 20, 30
  }

• 用於物件：取得的是屬性名稱。

  for (var key in person) {
      console.log(key + ": " + person[key]);
  }

2. For/of 迴圈：走訪「值」

for...of 是 ES6 新增的語法，它會直接取出集合裡面的「內容物」。

• 用於陣列：

  var arr = [10, 20, 30];
  for (var value of arr) {
      console.log(value); // 直接印出 10, 20, 30
  }

• 限制：for...of 不能直接用於普通物件之上，因為物件不具備可疊代性（Iterable）。

3. 如何對物件使用 For/of？

如果一定要用 for...of 處理物件，可以配合 Object.keys() 方法：

1. Object.keys(person)：會回傳一個包含所有鍵名的「陣列」。
2. 對該陣列使用 for...of 即可。

   var keys = Object.keys(person); // ["name", "age", ...]
   for (var k of keys) {
       console.log(person[k]);
   }

4. 總結

• 想拿 Key 或是要處理 物件 ➝ 使用 for...in。
• 想直接拿 Value 或是處理 陣列 ➝ 使用 for...of。

影片逐字稿 (AI 生成)

好 我們現在看的是來看九之三for in 回圈那前面我們教到的回圈都是用其實是比較複雜的這邊我們教到JavaScript比較好用 比較簡單的for in 回圈好 然後我們先 前面會先看到什麼是for in 回圈再來我們怎麼使用它再來是for off 回圈好 什麼是for in 回圈呢就是你在JavaScript裡面有for for each的回圈回圈可以用那這邊呢 我們可以直接用for假如說我要拿正列的話就是array這邊正列的來說的話那其實你用for in 就可以來做好 for in 跟 for 的比較它結果其實是會一樣的那用for回圈的話我們要取得物件的長度我們是不是還要去拿就是比如說你要的那個正列的.length你沒辦法直接拿可是像for in 的話它會直接把就是這個正列裡面有多長的東西直接突出來他們可以直接來看一下code比如說我們有一個這個a的正列那以前我們是不是還要什麼var i 等於0然後i小於a.length然後分號i++這樣子去做傳統的for是這樣子做但現在我們用for in 的寫法好處是怎麼做呢我們直接 var i in a for in 這樣子寫然後這時候呢你去印 console.log i它就會跑出它的 index 0123好那我們直接來寫寫看我們今天有個新的檔案我們今天有個新的檔案很像好我們有個a等於這個裡面是什麼1 2 3 4for好它用var我們就用varvar i in a那我們去log吧i 印出來那我們看一下是什麼直接跑就是我們拿到的東西是for in 的拿法拿到i是什麼拿到的是它的index對不對那我們有學到就是說我們要怎麼取得一個呃正列它的值我們是不是要a然後把它index放進去我們就可以取到它的值了那我們看一下是不是它的值就會印出來1234好那如果我們今天用在物件上面的話我們來試試看那這邊有一個黃曉民的一個物件那我們這邊就拿我剛剛前面call的物件來試試看然後我們再建一個好了9-3-2.js然後我們再建一個好了9-3-2.js9-3-2.js9-3-2.js9-3-2.js9-3-2.js9-3-2.js然後我把剛剛前面這個它要多一點好像這邊9-1.js9-1.js9-1.js9-5.js9-1.js9-5.js9-5.js9-5.js9-5.js9-5.js9-5.js9-5.js9-5.js9-5.js9-6.js9-5.js9-5.js9-5.js10-5.6.9-9.09-25.09-7.09-7.09-9.09-5.09-5.09-7.09-8.09-0.7.09-9.09-9.09-8.09-9.09-9.09-9.09-9.0那我這邊呢,我先把speak先拿掉好了因為,我把alert改成console.log好了那這邊呢,我要實際要拿到它的所以我們這邊可以寫什麼我們可以用,說它是key然後加然後就知道它說,它的key有這些然後呢,我們這邊可以log然後我們要怎麼去assess它的value怎麼樣去取用呢person那個i好好看所以我們這裡可以看到,有沒有name,然後荒笑名,然後27,然後這樣那其實呢,我們也可以把它寫在一行裡面那我們就這樣子喔,我們就把它加起來然後然後中間呢,我們把它放一個空格然後後面寫什麼valuemarch然後再加上,我們剛剛拿到這個東西好,這邊我們就會看到的事情是有沒有它的key是什麼喔,然後就是key是name然後value是黃曉明age27,然後這邊是一個function那它沒有對齊嘛所以我們可以用反斜線反斜線T看一下會不會對齊,喔反斜線好像錯對對喔,什麼這個喔,它可能那如果兩個呢會不會對齊也沒有,它還是差一個好吧好它可能說,你看差了四個吧四個對,四個BA差四個edge太短好,這個是9324好,再來我們提到呃,4off那我剛才一直在提到的事情是它印出來的是它的index和key那4off要做的事情是什麼4off在做的事情是4off在做的事情是它印出來的跟4in不太一樣那我們又要再建一個新的檔案那我們建一個新的檔案我們把它叫做9311那為什麼要這樣做呢因為31就是我想要把剛剛這個931的東西拿過來用好,那我們可以看一下就是說我如果把它的4in改成4off會變什麼狀況我們在這邊看到說欸,我直接4off拿到的i就是它的value了直接拿到它裡面的值有沒有它現在不是拿到它的index喔是直接把它裡面的東西拿出來直接i就是1234有沒有哇,這實在是太方便了那我們要同樣的,我把它拿來做在9-3-2把它貼過來那這時候我們這行就要改一下啦就是直接log它的i出來那我把4off老師說欸,老師你不是說直接把它改掉那我們就跑然後就會錯給你看原因是為什麼呢因為4off就是這個狀況他說is not iterableIterableIterable意思就是呃沒有順序性不能直接這樣子疊代喔,Iterable就是疊代的意思所以因為物件是不是像像像array一樣像數列一樣像數列一樣的性格的特性是它有index是有順序性的從0一直排往後排嘛它是一個一個key去查的嘛所以你不能就是直接用疊代就是4off它是照順序的把東西拿出來所以後面我們會提到一個解法這邊呢要把它解決的方法就是用object keys這邊好像少一個s好那object keys的做法是我要object keys是什麼呢我們先把這個東西先註解好我們先log然後我們先直接來看object點keys然後把我們剛剛這個東西丟進來我們會發現object有一個裡面有一個function這個function的功能是你把一個物件丟進來的時候它會把它的有哪些鑰匙列給你看然後用一個數列的方式列給你看OK所以用用數列的方式所以你會看到它有哪些keys它有name有edge這三個東西那因為這個東西是有就是這個東西是有順序性的所以你在這邊用for off你就可以怎麼做呢就可以把原本剛剛這邊不能做的然後你用object keys把它拿來把它拿來這時候它印出來的因為它我們前面看到它是一個數列所以它把i印出來是什麼它把i印出來還是它的這個數列裡面的嘛你可以把它想像成它是一個數列所以你這邊你還是要OK所以這樣子的做法的話i跟personname黃曉民age27speak它是一個 function那你不如就直接還是為什麼還要再多加一個object keys你就直接用for in其實就比較方便嘛可是這邊就是要讓大家知道說for off的做法因為這邊它印出來是什麼它這邊印出來其實是我先把它轉換成object keys把person轉換成object keys然後拿到的是一個是一個數列然後這個數列裡面有name就是arrayarrayarray裡面是它所有的key然後我for off的時候其實是拿到nameagespeak出來然後我要assess這個物件的這些value我還是必須要把key丟進去我才可以找得到OK那這邊是9-3

影片逐字稿largev2

好,我們現在開始來看9-3 Forward, In, 回圈那前面我們教到的回圈都是用其實是比較複雜的這邊我們教到JavaScript比較簡單的Forward, In, 回圈好,然後我們前面會先看到什麼是Forward, In, 回圈再來我們怎麼使用它再來是Forward, Off, 回圈好,什麼是Forward, In, 回圈呢就是你在JavaScript裡面有Forward, For each的回圈可以用這邊我們可以直接用Forward, In, 回圈假如說我要拿陣列的話,就是Array這邊陣列的來說的話,其實你用Forward, In, 回圈就可以來做好,Forward, In, 跟Forward, In, 的比較它結果其實是會一樣的那用Forward, In, 回圈的話,我們要取得物件的長度我們是不是還要去拿比如說你要的那個陣列的.length你沒辦法直接拿可是像Forward, In, 的話它會直接把這個陣列裡面有多長的東西直接突出來我們可以直接來看一下code比如說我們有一個A的陣列那以前我們是不是還要var i 等於0然後那個.i小於a.length然後分號i++這樣子去做傳統的Forward是這樣做嘛但現在我們用Forward, In, 的寫法好處是怎麼做呢我們直接var i in a Forward, In 這樣子寫然後這個時候你去印console.log i它就會跑出它的index 0, 1, 2, 3好,那我們直接來寫寫看我們建一個新的檔案我們有個a等於裡面是什麼1, 2, 3, 4for它用var,我們就用varvar i in a然後我們去log吧i印出來然後我們看一下是什麼直接跑這時候我們拿到的東西是Forward, In 的拿法拿到i是什麼拿到的是它的index那我們有學到就是說我們要怎麼取得一個陣列它的值我們是不是要a然後把它的index放進去我們就可以取到它的值了那我們看一下是不是它的值就有印出來1, 2, 3, 4如果我們今天用在物件上面的話我們來試試看那這邊有一個黃曉明的一個物件那我們這邊就拿我剛剛前面call的物件來試試看然後我們再建一個好了9-3-2.js然後我把剛剛前面這個它要多一點黃我們把它貼過來var i in person然後我們去log把i印出來我們看一下有什麼東西這時候我們拿到的是什麼我們這邊拿到的是它的index那這邊它的index其實不是index這邊拿到的是key對不對name, age, speak那我這邊呢我先把speak先拿掉好了因為我把alert改成console log好了那這邊呢我實際要拿到它的所以我們這邊可以寫什麼我們可以用說它是key然後加然後就知道說它的key有這些然後呢我們這邊可以log然後我們要怎麼去assess它的value怎麼樣去取用呢person那個i偷偷看所以我們這裡可以看到有沒有name 然後黃曉明然後27然後這樣那其實呢我們也可以把它寫在一行裡面那我們就這樣子喔把它加起來然後然後中間呢我們把它放一個空格然後後面寫什麼value 碼號然後再加上我們剛剛拿到的這個東西好這邊我們就會看到的事情是有沒有它的key是什麼喔然後就是key是name然後value是黃曉明age27然後這邊是一個function那它沒有對齊嘛所以我們可以用反寫線反寫線T看一下會不會對齊喔反寫線好像錯了欸啊為什麼這個喔它可能它如果兩個呢會不會就對齊也沒有它還是差一個好吧它可能都你看它差了四個吧四個對四個啦BA它四個age太短好這個是9-3-2好再來我們提到4off那我剛剛一直在提到的事情是它印出來的是它的index和key那4off要做的事情是什麼4off在做的事情是4off在做的事情是它印出來的跟4in不太一樣那我們又要再建一個新的檔案那我們建一個新的檔案我們把它叫做9-3-1之一好了那為什麼要這樣做呢因為之三之一就是我想要把剛剛這個9-3-1的東西拿過來用那我們可以看一下就是說我如果把它的4in改成4off會變什麼狀況好我們在這邊看到說我直接4off拿到的i就是它的value了直接拿到它裡面的值有沒有它現在不是拿到它的index是直接把它裡面的東西拿出來直接i就是1234有沒有哇這實在是太方便了那我們要同樣的我把它拿來做在9-3-2把它貼過來那這時候我們這行就要改一下啦直接log它的i出來那我把4off老師你不是說直接把它改掉然後我們就跑然後就會錯給你看原因是為什麼呢因為4off就是這個狀況它說it’s not iterableiterable意思就是沒有順序性不能直接這樣子iterable就是迭代的意思所以因為物件是不是像像array一樣像數列一樣的性格的特性是它有index它是有順序性的從0一直往後排它是一個一個key去查的所以你不能直接用迭代4off它是照順序的把東西拿出來所以後面我們會提到一個解法這邊呢要把它解決的方法就是用object key這邊好像少一個s那object keys的做法是object keys是什麼呢我們先把這個東西註解好我們先log然後我們先直接來看object.keys然後我們把我們剛剛這個東西丟進來你會發現object有一個裡面有一個function這個function的功能是你把一個物件丟進來的時候它會把它的有哪些鑰匙列給你看然後用一個數列的方式列給你看ok用一個數列的方式所以你會看到它有哪些keys它有name有age有speak這三個東西那因為這個東西是有這東西是有順序性的所以你在這邊用falloff你就可以怎麼做呢就可以把原本剛剛這邊不能做的然後你用object keys把它拿來這時候它印出來的因為它我們前面看到它是一個數列所以它把i印出來是什麼它把i印出來還是這個數列裡面的你可以把它想像成它是一個數列所以你這邊你還是要ok所以這樣子的做法的話i跟person有沒有name 黃曉明 age 27speak 它是一個function那你不如就直接還是為什麼還要再多加一個object keys 你就直接用fall in其實就比較方便嘛可是這邊就是要讓大家知道說falloff的做法因為這邊它印出來是什麼 它這邊印出來其實是我先把它轉換成object keys把person轉換成object keys然後我拿到的是一個是一個數列然後這個數列裡面有namearray裡面是它所有的key然後我falloff的時候其實是拿到name age speak出來然後我要access這個物件的這些value我還是必須要把key丟進去我才可以找得到ok那這邊是9-3