• 今日課程大綱
• 今日簡報連結

課堂簡介

今天我們將要學習如何在網頁以卡片的形式放上專案資料，並且製作搜尋功能讓這些 Card 可以被篩選，最後加上超酷的卡片收合效果，一起來打造屬於自己的專案展示牆吧！

今天課程的實作部分是建立在我們前幾個禮拜一起完成的 Final Project 之上，前幾周的內容若還沒完成，可以先 clone 我們課程的 repo 下來一起練習：lecture-5。

Recall：Array Processing

forEach

走訪 → 對每個元素執行指定函式，不回傳，不改變原陣列

• array ：要進行操作的陣列
• value ：目前在操作的元素
• { /* function */ } ：要對每個元素執行的函式

array.forEach((value) => { /* function */ })

• 此例中：對於每個 array1 的元素，稱作 element，log 出 element

const array1 = ["a", "b", "c"];

array1.forEach((element) => console.log(element));

// Expected output: a b c

map

轉換 → 對每個元素執行指定函數定義的轉換並指定為新陣列的元素，會回傳新陣列，不改變原陣列