使用情境 一開始的 API 呼叫把值塞進 React 搜尋 autocomplete 前端一開始開啟都會有呼叫 API 情境的狀況發生，比較基本的方式使用大概會長這樣子。 const Users = () => { const [users, setUsers] = useState([]) useEffect(() => { fetchUsers().then((users) => setUsers(users)) }, []) if (!users) return <div>Loading...</div> return ( <ul> {users.map((user) => ( <li>{user.name}</li> ))} </ul> ) } 那如果要使用 async/await 呢? 很直覺的會這樣寫 // 直接在 useEffect 內使用 async useEffect(async () => { const users = await fetchUsers() setUsers(users) }, []) 但會有一個情況發生，還記的 useEffect 有一個 cleanup function 嗎?...

楔子 不同的大神針對 JS 有不同的說明講解，來看一下 Redux 作者的說明。 Dan Abramov 有一個 justjavascrpt prototype 其實把觀念寫的蠻好的。 這篇文章是其中一個 prototype 的內容摘錄如下: 先有一個觀念就是 a = '123' 中 a 是變數(variable)， 123 是值(value) // teeth 是 variable // 32 是值 let human = { teeth: 32 } let gwen = { age: 19 } human 和 gwen 是一個 Object，他把屬性直接連到 值 // gwen 沒有 teeth 屬性 console.log(gwen.teeth) // undefined let human = { teeth: 32 } 如果當用 __proto__ 在 Object 裡面，=的右邊是一個變數，這是就是去找這個變數的 reference 在哪?...

楔子 平常使用的最多的應該是 MySQL 了，但通常不同的資料庫有它的使用情境。 簡單分就是有 SQL 和 NoSQL 系列，就二分法的方式處理。 各種資料庫都有它的好用的地方，像 NoSQL 比較有名的就 Redis (它有硬碟版 SSDB) 資料的結構常常會依據使用情境不同有所適合的資料庫。 今天來分享所謂的「圖型」資料庫，資料庫一開始比較需要掌握的就是「設計的理念」 最具代表性的就是 Neo4j 先來看一下它查詢的語法就比較容易理解他的概念。 MATCH (n {name: 'John'})-[:FRIEND]-(friend) WITH n, count(friend) AS friendsCount WHERE friendsCount > 3 RETURN n, friendsCount 其實可以「感覺」的出來就是用「node」和「relationship」來做為查詢的方式， 在每個「node」的上面有屬性，而不同的屬性可以有「條件」來進行過濾。 node 用 () 來標記，關係用 [] 來表示 特徵 就自然有人問，那這個資料庫的好處在哪? 大家覺的「圖」這種的設計，比較常出現在哪? 答案就是 社群 ，它就是點和線的連結而以。 當有這個想法後，例如我好朋友的朋友有哪些? MATCH (i {name: 'me'})-[:FRIEND]-(f1:friend)-[:FRIEND]-(f2:friend) RETURN n, f1, f2 i = 我; f1 = 我朋友; f2 = 我朋友的朋友 如果想像用 RDBMS，就要用二層 select 來處理(或使用 sub-query)，...

特徵 可以把函數當參數使用 可以使用 compose(反向) 或 pipe(正向) 的串連方式 // 建立一個標準的函數 let func = f = x => f(x) let addOne = x => x + 1 let ff = func(addOne) // f = addOne ff(1) // 1+1 pipe 就像一個水管一樣串接不同的 function const pipe = (...fns) => x => fns.reduce((y, f) => f(y), x) pipe(x => x + 1, x => x + 2)(3) 練習看看 有了上面的東西，如何使用? 如果有興趣可以去看看 Dr.Boolean 的一些影片，擷取一些常用的工具來做使用。 const pipe = (...fns) => x => fns....