iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 17
0
Modern Web

JavaScript初心者ノ研究日記。系列 第 17

十七日目:JavaScript ES6 forEachノ章

おはー(U 'ᴗ' U)✧ 我是 SONYKO 。
今天要介紹 forEach 。

forEach 是 操作陣列 的其中一種方法、他不是迴圈。
我們可以拿它來做許多資料處理 ⑅

 

來認識一下它吧 ♫ 

 


⑅ 什麼是陣列操作

day10 有介紹陣列是什麼。
其中有介紹我們如何去 新增一筆資料、刪除一筆資料。
新增資料 push 和 刪除資料 pop 就屬於 陣列的操作方法 ✧

上網搜尋 「 JavaScript 陣列操作 」可以看到很多很多相關資料 (U 'ᴗ' U)
你也會看到 forEach 被列在操作方法裡面。

 

你問我為什麼不介紹全部?
全部介紹完都超過30天啦


⑅ forEach ネ申。

相信大家都對陣列物件有一定的了解了,今天我們如果要列出陣列的每一筆資料...

let boyfriend = ['荒牧慶彦', '鳴上嵐', 'ケイト', '山田三郎', '六弥ナギ']

取陣列是吧,那就 boyfriend [ 0 ] 、 boyfriend [ 1 ] ... 修但幾勒!
假如今天我資料有上千筆、總不可能一個一個取吧(つд;⑅)

你可能會想到 可以用迴圈啊!
但其實用 forEach 就可以做到哩 ⑅
forEach 也可以配合 axios 和 AJAX 撈取遠端資料,做各種資料處理。

這邊貼 程式碼 讓各位參考♡

 


⑅ forEach 語法

我新增了我的男朋友陣列、用 forEach 將陣列內容印出來。
直接圖解 (U 'ᴗ' U)

⑅ 注意要點:

  1. 這邊參數名稱 不是固定、你不想打 item 只想打個 i 也是ok 的。
     
  2. 第一個參數 ( item )可以取得陣列的資料項目。
    第二個參數( index )可以取得陣列編號。
    如果沒有要取編號、可以不用加 index 參數。
     
  3. forEach 會看陣列有幾筆 就執行幾次。
     
    所以說:
    ⑅ 執行第一次 → 印出陣列內容「 荒牧慶彦 」、印出編號「 0 」
    ⑅ 執行第二次 → 印出陣列內容「 鳴上嵐 」、印出編號「 1 」
    ⑅ 執行第三次 → 印出陣列內容「 ケイト」、印出編號「 2 」 ... 以此類推 。

⑅ 這邊再出一個小題目讓大家熟悉:

let pokemon = ['呆呆獸','沼王','毛辮羊','馬英九','拉帝歐斯']

pokemon.forEach(function(i,index){
	console.log ( i,index+1 )
})
/* 題目:
       1. forEach 執行第3次的結果為何?
       2. forEach 執行第5次的結果?
*/

⑅ 答案:

  1. "毛辮羊" 3
  2. "拉帝歐斯" 5

⑅ 這邊 index +1 可以讓編號從 1 開始、不然從 0 開始怪怪的。

 


⑅ forEach 準確選到尼想要的資料

能否準確選到想要的資料、就必須對陣列物件有一定的熟度。
所以在 forEach 這邊再幫大家複習一下。

我們拿實際的 openData 來舉例 (U 'ᴗ' U)

高雄市電動機車充電站

  1. 打開來我們會看到很多很多物件,最外圍是一個陣列。
     

  2. 這次先不接API、我們將資料copy 下來。
     

  3. let 一個裝資料的陣列、將資料paste 上去。
    ( 雖然資料會爆到幾百行、但先醬沒關係w )

  4. 接著來用 forEach 將 Charge 為「免費」的充電站列出來看看:

    data.forEach(function(i){
    	if(i.Charge=="免費"){
    		console.log(i)
    	}
    })
    

 
⑅ 來看看 console.log 內容:

讚!輕鬆取到我們想要的資料了(U 'ᴗ' U)⑅

⑅ 範例 codepen

 
⑅ 物件用 " . " 選取 。
⑅ 陣列用 [ ] 選取 。

 


⑅ forEach 將資料渲染到畫面上

我們最終還是要將資料放到畫面上給人看滴。
所以來整合我們學會的 「 innerHTML 」做做看吧 ♫

 

⑅ 假如果今天想將「 Charge 為 免費 」的充電站位置名( Location )放到畫面上:

  • 因為要讓他列表化、所以我選擇用innerHTML 而不是 textContent 。
  • 我們用樣板字面値、簡易又方便的去撰寫想渲染的HTML 結構。
  • 最後成品

大家就動手練習看看吧 (U 'ᴗ' U)⑅

最後提醒一點、也是最常犯錯的地方:
我們要選取物件中的資料、是用「 參數 」去選、不是用陣列名喔!

 

像這個範例,我們的陣列叫data。
但在 forEach 中我們是用 參數「 i 」去選取。

所以我要選陣列中的 物件中的 Charge,
會寫 ⑅ i.Charge 。而非 data.Charge 。

 

今天的 forEach 就到這邊 ♡♡♡
 

 


୨୧(U 'ᴗ' U) SONYKO的 前端日文小教室 ♡

 
原諒我已經沒梗了
一樣翻譯一些句子、讓大家熟悉常用的前端單字。
  
音檔
 

var array = [配列データ];
 
array.forEach( コールバック関数 )

⑅ 配列データ: 陣列資料。

⑅ コールバック関数: callback 函式。

⑅ 配列をループさせて中身を取得する
  → 讓陣列反覆執行取得資料內容。

 
⑅ JSONデータはJavaScriptのオブジェクト構造によく似たものです
  → JSON資料與 JavaScript 的物件構造十分相似。
 
⑅ コールバック関数は、いくつか引数を受けとることが可能です。
  → callback函式可以帶入好幾個參數。
 

說到代好幾個參數、雖然文章中只提到兩種(陣列項目、陣列編號),
除此之外還有其他參數可以帶入。
有興趣的話可以去估狗來看看哩 (U 'ᴗ' U)⑅
  
  
  
然後為什麼每次貼圖片都會變那麼大啊
有人有解決方法嗎5555 教教我5555


上一篇
十六日目:JavaScript ES6 constノ章
下一篇
十八日目:JavaScript axiosノ章
系列文
JavaScript初心者ノ研究日記。30

尚未有邦友留言

立即登入留言