CodeLove 愛寫扣論壇 - 新手友善的程式設計討論區，歡迎參與討論！

🔍 搜尋結果：callback

JavaScript 系列十：第4課 ── 把 node 非同步設計改寫為同步設計

## 課程目標 - 把 node 非同步設計改寫為同步設計 ## 課程內容前面我說過，node 有些地方的寫法設計，看起來很怪、很醜在瀏覽器 js 環境，我們的確不知道用戶何時會點擊按鈕、不知道 AJAX 回應何時會拿到不能讓網頁整個停下來卡住、等待上述事件發生，所以必須用「非同步程式設計」處理可是檔案系統模組，絕大多數情況下，你就是要現在就讀取好檔案、讀取完才讓程式接著繼續跑，才有意義實在沒必要用「非同步程式設計」處理！取得用戶輸入就更不用說了，程式就是該停在這裡、等用戶輸入完再接著繼續執行，才有意義何必用「非同步程式設計」處理！其他程式語言，大多都是「同步程式設計」，例如用 Python 寫同樣程式時就是一行一行寫下來即可，不用像這邊這樣把函式當參數傳進去簡單講，javascript 的非同步設計，在網頁畫面上運作時，有其優勢與必要但是在用來寫腳本時，顯得多餘而不必要 --- 來學習怎麼改寫吧，打開 `read-my-name.js`，改寫成以下內容 ``` var fs = require('fs'); var data = fs.readFileSync('my-name.txt'); console.log("您好，" + data); process.exit(0); ``` 執行看看！ ``` node read-my-name.js ``` 跑起來一模一樣，但是不是好讀多了？注意 `fs.readFileSync` 後面的 sync，那就是同步的意思 --- 接著來改寫第二個程式吧，打開 `write-my-name.js`，改寫成以下內容 ``` var fs = require('fs'); const readlineSync = require('readline-sync'); var answer = readlineSync.question('請問您的大名？\n'); fs.writeFileSync('my-name.txt', answer); console.log('儲存成功。'); process.exit(0); ``` 是不是好讀多了？新函式名稱，就是後面加上 sync 而已，node 官方知道大家的抱怨，所以有提供這些同步函式但是，這段 code 不能直接執行，因為 `readline-sync` 不是官方內建模組，是社群開發的，需要透過 npm 安裝怎麼辦？ --- NPM 全稱為 Node Package Manager，也就是 Node 套件管理工具關於 npm 的安裝，網路上有非常多教學，請根據你的作業系統，自己找一套安裝方法安裝好之後，你就可以使用「終端機」運行 npm 指令 --- 請在終端機輸入 `npm install readline-sync` 即可安裝 `readline-sync` 套件會多出兩個檔案 `package-lock.json` `package.json` 用來記錄目前專案用到的 npm 套件，你可以打開這兩個檔案看一看還會多出一個資料夾 `node_modules`，套件本身會下載到這個地方，你可以打開資料夾逛一逛接著執行看看！ ``` node write-my-name.js ``` 跑起來一模一樣，但是好讀多了！ ## 課後作業接續前一課的作業，現在來嘗試「同步」的語法請把「非同步」的語法改寫，通通改用「同步」的語法改完之後，程式碼中，應該就不會出現 callback function 了也就是不會出現「把一段函式定義當作參數傳進另一個函式」這種情況完成以上任務，你就完成這次的課程目標了！

0個讚 1留言 50瀏覽

我愛JS · 05月03日

[好文分享] 太屌了吧！？用Class(類)製作Jquery的效果！

## 目錄 ##### [【前端動手玩創意】等待的轉圈圈效果 (1)](https://ithelp.ithome.com.tw/articles/10311621) ##### [【前端動手玩創意】google五星評分的星星(2)](https://ithelp.ithome.com.tw/articles/10311643) ##### [【前端動手玩創意】CSS-3D卡片翻轉效果(3) (今天難度頗高，想挑戰再進來！)](https://ithelp.ithome.com.tw/articles/10311672) ##### [【前端動手玩創意】一句CSS做出好看的hero section！(4)](https://ithelp.ithome.com.tw/articles/10311691) ##### [【前端動手玩創意】創造一個Skill bar(5)](https://ithelp.ithome.com.tw/articles/10311756) ##### [【前端動手玩創意】遮蔽廣告(D卡未登入)腳本、自定義新增名單(6)](https://ithelp.ithome.com.tw/articles/10311999) ##### [【前端動手玩創意】前端canvas截圖的招式！竟然有三招，可存成SVG或PNG (7)](https://ithelp.ithome.com.tw/articles/10312001) ##### [【前端動手玩創意】讓你的PDF檔案更難被抓取(8)](https://ithelp.ithome.com.tw/articles/10312046) ##### [【前端動手玩創意】哇操！你敢信？花式寫todo-list，body裡面一行都沒有也能搞？(9)](https://ithelp.ithome.com.tw/articles/10312056) ##### [【前端動手玩創意】卡片製作，才不是！是卡片製作器！(10)](https://ithelp.ithome.com.tw/articles/10312066) ## 前情提要各位知道jquery，這個JS的函式庫提供我們非常多實用的方法，包裝好給我們用。其中底層邏輯都還是跑不出js原生的概念，今天就讓我們用原生JS的類來創造一些Jquery幫我們打包好的方法吧！來掀開它的奧秘底牌。 ## 程式碼內容假設我們要創造一個叫做Dquery的東西，該怎麼做呢： ``` class Dquery { constructor(selector) { this.elements = document.querySelectorAll(selector); //噴出DOM來 } css(property, value) { for (let i = 0; i < this.elements.length; i++) { this.elements[i].style[property] = value; } return this; //修改style } addClass(className) { for (let i = 0; i < this.elements.length; i++) { this.elements[i].classList.add(className); } return this; //增加class } removeClass(className) { for (let i = 0; i < this.elements.length; i++) { this.elements[i].classList.remove(className); } return this; } on(eventType, callback) { for (let i = 0; i < this.elements.length; i++) { this.elements[i].addEventListener(eventType, callback); } return this; //監聽事件的運作 } html(htmlString) { if (typeof htmlString === 'undefined') { return this.elements[0].innerHTML; } else { for (let i = 0; i < this.elements.length; i++) { this.elements[i].innerHTML = htmlString; } return this; } } } function $(selector) { return new Dquery(selector); } ``` ## 觀念筆記其實概念就是先把底層邏輯刷過一遍最後return this 就達成jquery的效果了唷。 ## 心得 Jquery曾經非常流行，儘管後來式微了，卻還是有一批死忠的粉絲鍾愛著它的簡便，事實上它就是JS，所以討人喜歡也是正常的，這次學會了用ES6類的概念，會讓我們在前端的功力大幅提升唷！！

3個讚 4留言 130瀏覽

站長阿川 · 01月12日

JavaScript 系列四：第2課 ── vanilla-lazyload 套件

## 課程目標認識並且能使用 vanilla-lazyload 套件 ## 課程內容這次的套件是 https://github.com/verlok/vanilla-lazyload 文件與 demo 在 https://www.andreaverlicchi.eu/vanilla-lazyload/ 當畫面上圖片很多的時候，頁面載入會很慢 lazy load 是所謂的延遲載入技術也就是不會在一開始就通通載入，而是使用者在網頁上下滑動的時候，圖片元素出現在畫面中的時候，才動態去載入圖片 ``` <img alt="A lazy image" class="lazy" data-src="lazy.jpg" /> ``` 使用了 img 元素，class 設為 lazy，但不設定 src 屬性（因為設了瀏覽器就會直接去抓圖片），而是使用 data attribute 來另外給一個 data-src 屬性這是一種常用的 API 設計，套件會自己去找出 `.lazy` 的元素，然後去找元素的 `data-src` 屬性，接著載入圖片要啟用套件，需要以下 javascript ``` var lazyLoadInstance = new LazyLoad({ // Your custom settings go here }); ``` 這樣就完成了，很簡單吧？這邊用到了 javascript 的 OOP 物件導向語法，new 出一個新物件。可以先不管 OOP 細節，照做就好，反正就是創造一個物件然後執行一些函式創造的同時，會傳一個用大括號 `{}` 包起來的物件進去，當作套件的設定值。這邊因為都用預設的設定，所以傳空物件進去就好 `//` 開頭的是註解，是給開發者自己看的提醒文字，沒有實際功能比較進階的用法會類似這樣 ``` var lazyLazy = new LazyLoad({ elements_selector: ".horizContainer", callback_enter: initOneLazyLoad, unobserve_entered: true // Stop observing .horizContainer(s) after they entered }); ``` 這個例子傳了有三個屬性的物件進去各個設定與功能效果，可以再查文件，反正會用 `{}` 包起來的物件去進行參數設定就對了這種「傳一個物件當參數，來進行套件的功能設定」的設計，也是 javascript 套件的常用 API 設計關於物件這種資料型態，之後的課程會再進一步學習 ## 課後作業請使用 https://jsfiddle.net 接著上網尋找 10 張漂亮圖片。參考圖庫：https://unsplash.com/ 假設正在開發一個包含大量高畫質、大圖片的企業形象網站，包含這 10 張圖片，上往下依序排列一次載入，實在太慢了，尤其是手機用戶、舊電腦的用戶、或者網速很慢的用戶請替這些圖片加上 lazy loading 功能做出以上功能，你就完成這次的課程目標了！

0個讚 12留言 265瀏覽

Tony 精選技術文章 · 12月11日

寫出更好 JavaScript 的幾個實務技巧：新手推薦

JavaScript 寫起來有很大彈性，但如何改善自己的 JavaScript 品質呢？以下是一份實用的參考指南。 - 原文出處：https://dev.to/taillogs/practical-ways-to-write-better-javascript-26d4 # 使用 TypeScript 改善 JS 的第一個技巧就是，不要寫 JS。寫 TypeScript 吧。它是微軟寫的一個語言，算是 JS 的母集合（一般的 JS 可以直接在 TS 裡面跑）。TS 在 JS 之上添加了一個全面的型別系統。長期下來，整個前端生態系，幾乎都支援 TS 語言了。下面介紹一下 TS 的優點。 **TypeScript 可以確保「型別安全」** 型別安全代表編譯器驗證了所有型別是否以「合法」的方式被使用。換句話說，如果你創建一個接受「數字」的函數 `foo`： ``` function foo(someNum: number): number { return someNum + 5; } ``` 該「foo」函數呼叫時要傳一個數字：正確用法 ``` console.log(foo(2)); // prints "7" ``` 錯誤用法 ``` console.log(foo("two")); // invalid TS code ``` 除了需要花時間加型別以外，沒有其他缺點了。好處則是顯而易見。型別安全針對常見錯誤提供了額外預防，這對於像 JS 這樣鬆散的語言來說，是一件好事。 **TypeScript 的型別系統，讓你能重構大型應用程式** 重構大型 JS 應用程式是一場噩夢。主要是因為它不會檢查函數簽名。也就是說，JS函數隨便呼叫，編譯器都不會先報錯。舉個例，如果我有一個函數「myAPI」，由 1000 個不同的服務使用： ``` function myAPI(someNum, someString) { if (someNum > 0) { leakCredentials(); } else { console.log(someString); } } ``` 我稍微更改了呼叫簽名： ``` function myAPI(someString, someNum) { if (someNum > 0) { leakCredentials(); } else { console.log(someString); } } ``` 我必須自已 100% 去確認，使用此功能的1000 個地方，都有正確更新用法。漏掉的地方，在執行時就會壞掉。在 TS 中相同的情境如下： before ``` function myAPITS(someNum: number, someString: string) { ... } ``` after ``` function myAPITS(someString: string, someNum: number) { ... } ``` 如您所見，「myAPITS」函數跟在 JavaScript 中一樣修改。但是，這段程式碼無法順利產出 JavaScript，而是會出現無效 TypeScript 的錯誤提示，因為用到它的1000個地方，現在型別就出錯了。正是因為「型別安全」，這 1000 個案例會阻止編譯。 **TypeScript 使團隊溝通架構更容易** 正確設定 TS 後，要先定義介面跟類型，不然很難寫程式碼。這也順便提供了一種簡潔、可溝通的架構提案方法。例如，如果我想跟後端提出新的「請求」類型，可以使用 TS 將以下內容提交給團隊。 ``` interface BasicRequest { body: Buffer; headers: { [header: string]: string | string[] | undefined; }; secret: Shhh; } ``` 雖然也是要寫一點程式碼，但可以先提供以上內容作為初步想法、取得回饋，而不用一次設計完功能。像這樣強迫開發者先定義介面跟 API，能讓程式碼品質更好。總體而言，TS 已經發展成為一種成熟且更可預測的 vanilla JS 替代品。當然還是要熟 JS，但我現在大多數新專案都是直接寫 TS。 # 使用現代功能 JavaScript是世界上最流行的程式設計語言之一。你可能會以為這語言已經被百萬開發者摸透了，其實不是。很多新功能是近期才加上去的。 **`async` 與 `await`** 長期以來，非同步、事件驅動的 callback 是 JS 開發中不可避免的：傳統 callback ``` makeHttpRequest('google.com', function (err, result) { if (err) { console.log('Oh boy, an error'); } else { console.log(result); } }); ``` 上述程式碼會有越寫越多層的問題。JS 添加了一個新概念叫 Promises，可以避免嵌套問題。 Promises ``` makeHttpRequest('google.com').then(function (result) { console.log(result); }).catch(function (err) { console.log('Oh boy, an error'); }); ``` 與 callback 相比，Promise 的最大優勢是可讀性和可鏈性。雖然 Promise 很棒，但它們仍然有一些不足之處。寫起來感覺有點怪。為了解決這個問題，ECMAScript 委員會添加一種使用 promise 的新方法，`async` 和 `await`： `async` 與 `await` ``` try { const result = await makeHttpRequest('google.com'); console.log(result); } catch (err) { console.log('Oh boy, an error'); } ``` 需要注意的是，`await` 的內容必須先被宣告為 `async`：以前面 makeHttpRequest 舉例 ``` async function makeHttpRequest(url) { // ... } ``` 也可以直接 `await` 一個 Promise，因為 `async` 函數實際上只是 Promise 比較花哨的包裝寫法。這也意味著，`async/await` 代碼和 Promise 代碼在功能上是等價的。因此，請大方使用 `async/await` 吧。 **`let` and `const`** 以前大家寫 JS 都只能用 `var`。`var` 的變數作用域有一些獨特規則，一直讓人很困惑。從 ES6 開始，有了 `const` 跟 `let` 可以替代使用，幾乎不用再寫 `var` 了。至於何時要用 const 何時要用 let 呢？永遠從 const 先開始使用。const 因為不可修改、更可預期，會讓程式碼品質更好。使用 let 的場景比較少，我寫 const 的頻率比 let 高 20 倍左右。 **箭頭 `=>` 函數** 箭頭函數是在JS中宣告匿名函數的簡潔方法。通常作為 callback 或 event hook 傳遞。傳統的匿名 function ``` someMethod(1, function () { // has no name console.log('called'); }); ``` 在大多數情況下，這種風格沒有任何“不對”。但它的變數作用域很“有趣”，常導致許多意想不到的錯誤。有了箭頭函數之後，就沒這問題了。匿名箭頭函數 ``` someMethod(1, () => { // has no name console.log('called'); }); ``` 除了更簡潔之外，箭頭函數還具有更實用的變數範圍界定。箭頭函數從定義它們的作用域繼承「this」。在某些情況下，箭頭函數甚至可以更簡潔： ``` const added = [0, 1, 2, 3, 4].map((item) => item + 1); console.log(added) // prints "[1, 2, 3, 4, 5]" ``` 箭頭函數可以包括隱式的「return」語句。就不用寫大括弧、分號。不過，這跟“var”被完全取代不同。傳統匿名函數仍然有需要的地方，例如類別方法定義。話雖如此，如果你總是預設使用箭頭函數，程式碼錯誤會少很多。 **展開運算子 `...`** 提取一個物件的鍵/值對，並將它們添加為另一個物件的子物件，是一種很常見的場景。從歷史上看，有幾種方法可以實現，但通通都很笨拙： ``` const obj1 = { dog: 'woof' }; const obj2 = { cat: 'meow' }; const merged = Object.assign({}, obj1, obj2); console.log(merged) // prints { dog: 'woof', cat: 'meow' } ``` 這寫法以前很常見，也很囉唆。多虧了「展開運算子」，再也不需要那樣寫了： ``` const obj1 = { dog: 'woof' }; const obj2 = { cat: 'meow' }; console.log({ ...obj1, ...obj2 }); // prints { dog: 'woof', cat: 'meow' } ``` 最棒的是，與陣列也可無縫接軌： ``` const arr1 = [1, 2]; const arr2 = [3, 4]; console.log([ ...arr1, ...arr2 ]); // prints [1, 2, 3, 4] ``` 它可能不是近期 JS 中最重要的功能，但它是我的最愛之一。 **範本文字（範本字串）** 字串處理太常見了，程式語言要能處理範本字串，才夠好用。處理動態內容、多行文字時，都會需要它： ``` const name = 'Ryland'; const helloString = `Hello ${name}`; ``` 我認為程式碼不言自明。看起來好多了。 **物件解構** 物件解構是一種從資料集合（物件、陣列等）中提取值，而無需反覆運算數據或顯式訪問其鍵的方法：老方法 ``` function animalParty(dogSound, catSound) {} const myDict = { dog: 'woof', cat: 'meow', }; animalParty(myDict.dog, myDict.cat); ``` 新方法 ``` function animalParty(dogSound, catSound) {} const myDict = { dog: 'woof', cat: 'meow', }; const { dog, cat } = myDict; animalParty(dog, cat); ``` 不只這樣。您還可以在函數的簽名中定義解構：解構範例二 ``` function animalParty({ dog, cat }) {} const myDict = { dog: 'woof', cat: 'meow', }; animalParty(myDict); ``` 它也適用於陣列：解構範例三 ``` [a, b] = [10, 20]; console.log(a); // prints 10 ``` --- 以上，希望對您有幫助！

0個讚 1留言 2,001瀏覽

Tony 精選技術文章 · 12月10日

快速複習 React 基本觀念＆實務範例：推薦新手參考

0個讚 0留言 1,022瀏覽

Tony 精選技術文章 · 12月08日

如何在 React 中漂亮地 render 一個列表：四點注意事項

面試的時候，常常會被問到這題。看似簡單，其實有一些進階注意事項，此篇與您分享。 - 原文出處：https://dev.to/andyrewlee/stand-out-in-a-react-interview-by-rendering-a-list-like-a-pro-1cn5 # 基本做法以下是最基本做法。根據陣列內容，直接渲染成一個列表。 ``` import { useState, useEffect } from "react"; const App = () => { const [posts, setPosts] = useState([]); const [currentPost, setCurrentPost] = useState(undefined); useEffect(() => { const initialize = async () => { const res = await fetch("https://jsonplaceholder.typicode.com/posts"); const json = await res.json(); setPosts(json); }; initialize(); }, []); const onPostClick = (post) => { setCurrentPost(post); }; return ( <div> {currentPost && <h1>{currentPost.title}</h1>} <PostList posts={posts} onPostClick={onPostClick} /> </div> ); }; const PostList = ({ posts, onPostClick }) => { return ( <div> {posts.map((post) => ( <Post post={post} onPostClick={onPostClick} /> ))} </div> ); }; const Post = ({ post, onPostClick }) => { const onClick = () => { onPostClick(post); }; return <div onClick={onClick}>{post.title}</div>; }; export default App; ``` # 改進方法以下是四個可以改進的方向，以及背後的原因。 ## 1. 指定 key 替每個元件提供一個 key 屬性，可以幫助後續 React 渲染時改善效能。要注意 key 屬性要是唯一值，不要直接用陣列索引當成 key。 ``` {posts.map((post) => ( <Post key={post.id} post={post} onPostClick={onPostClick} /> ))} ``` ## 2. 優化渲染每次點擊列表項目時，都會重新渲染 `PostList` 和每個 `Post`。 ``` const Post = ({ post, onPostClick }) => { console.log("post rendered"); const onClick = () => { onPostClick(post); }; return <div onClick={onClick}>{post}</div>; }; ``` 可以使用 React 提供的 `memo` 功能來優化 `PostList` 元件。用 `memo` 包裝元件時，等於告訴 React：除非 props 改變，否則不要重新渲染這個元件。 ``` import { useState, useEffect, memo } from "react"; const PostList = memo(({ posts, onPostClick }) => { return ( <div> {posts.map((post) => ( <Post post={post} onPostClick={onPostClick} /> ))} </div> ); }); ``` 不過，實際跑下去，會發現還是重新渲染了。因為每次 currentPost 改變時，App 都會重新渲染。每次重新渲染都會重新建立 onPostClick 函數。當一個函數被重新建立時（即使函式內容一樣），都算是新的實體。所以技術上來說，props 確實發生了變化，所以 `PostList` 會重新渲染。 ``` const fn1 = () => {}; const fn2 = () => {}; fn1 === fn2; // => false ``` 這種狀況，就可以使用 useCallback hook 來告訴 React 不要重新建立函數。 ``` const onPostClick = useCallback((post) => { setCurrentPost(post); }, []); ``` 上面的例子中，使用 useCallback 沒問題，可以避免全部貼文被重新渲染。但要知道的是，並非什麼函式都適合包在 useCallback 裡面。 ``` const Post = ({ post, onPostClick }) => { const useCalllback(onClick = () => { onPostClick(post); }, []); return <div onClick={onClick}>{post.title}</div>; }; ``` 比方說，在 Post 元件使用 useCallback 就不太有意義。因為這個元件是輕量級的。應該只在有意義的情況下使用 useCallback（可以用 profiling 工具分析效能確認）。`useCallback` 有缺點：它增加了程式碼的複雜性。使用 useCallback 會在每次渲染時運行的額外程式碼。 ## 3. 元件卸載時清理乾淨目前的元件沒有在卸載時進行清理。例如，如果在收到 URL 回應結果之前就離開頁面怎麼辦？這時應該要取消請求。 ``` useEffect(() => { const initialize = async () => { const res = await fetch("https://jsonplaceholder.typicode.com/posts"); const json = await res.json(); setPosts(json); }; initialize(); }, []); ``` `useEffect` 可以分為兩部分：掛載時運行的程式碼、卸載時運行的程式碼： ``` useEffect(() => { // When component mounts what code should I run? return () => { // When component unmounts what code should I run (clean up)? }; }, []); ``` 我們可以使用 AbortController ，並在清理時呼叫 controller.abort() 來取消請求。 ``` useEffect(() => { const controller = new AbortController(); const signal = controller.signal; const initialize = async () => { try { const res = await fetch("https://jsonplaceholder.typicode.com/posts", { signal }); const json = await res.json(); setPosts(json); } catch (err) { console.log(err); } }; initialize(); return () => { controller.abort(); }; }, []); ``` ## 4. 增加無障礙輔助功能以上範例太過簡單，沒有太多無障礙功能可以加入。一旦應用程式變複雜，絕對應該要開始考慮這點。有個簡單的無障礙測試：可以單獨只使用鍵盤就操作一個應用程式嗎？關於這點，快速解法是：把每個項目都轉成按鈕，用鍵盤時就可以在元件之間切換。 ``` const Post = ({ post, onPostClick }) => { const onClick = () => { onPostClick(post); }; return <button onClick={onClick}>{post}</button>; }; ``` # 結論在 React 中渲染列表，乍看之下，只是個簡單的面試問題。但其實可深可淺。下次面試時遇到這問題，可以思考一下此篇文章談到的各個面向。

0個讚 0留言 277瀏覽

Tony 精選技術文章 · 12月03日

10 個現代 JavaScript 中的好用語法：新手推薦

在 ES6 版本之後，Javascript 多了很多好用的語法，建議新手一定要學起來這幾招。 - 原文出處：https://dev.to/azure/modern-javascript-10-things-you-should-be-using-starting-today-1adm # -1- 展開運算子 Spred operator 在物件或陣列前面寫 ... 可以很輕鬆地把資料展開，舉例來說： ## Spread array ``` let firstHalf = [ 'one', 'two']; let secondHalf = ['three', 'four', ...firstHalf]; ``` 寫起來非常簡潔。不然原本要這樣寫： ## NO Array spread ``` let firstHalf = [ 'one', 'two']; let secondHalf = ['three', 'four']; for(var i=0, i <firstHalf.length; i++ ) { secondHalf.push(firstHalf[i]); } ``` 用在物件也可以，能夠合併屬性： ## Spread object ``` const hero = { name: 'Xena - Warrior Princess', realName: 'Lucy Lawless' } const heroWithSword = { ...hero, weapon: 'sword' } ``` 不然的話，就要用迴圈來跑全部屬性： ## NO Object spread ``` let keys = Object.keys(hero); let obj = {}; for(var i=0; i< keys.length; i++) { obj[keys[i]] = keys[props[i]]; } ``` 舊寫法其實有 Object.assign() 可以用，看起來會像： ``` const heroWithSword = Object.assign({}, hero, {weapon:"sword"}) ``` 但展開運算子還是簡潔多了： ``` const heroWithSword = { ...hero, weapon: 'sword' } ``` # -2- 其餘參數 Rest parameter 其餘參數能夠將剩下的參數蒐集到一個陣列中。JavaScript 有足夠彈性可以處理這些參數。通常會這樣寫： ``` function add(first, second, ...remaining) { return first + second; } ``` 以上只是加總前兩個參數，也就是 add(1,2) 或 add(1,2,3, 4) 結果一樣。接著這樣改寫： ``` function add(first, second, ...remaining) { return first + second + remaining.reduce((acc, curr) => acc + curr, 0); } ``` 這樣就會把全部參數都加總在一起了。如您所見，前面加上 ... 就可以搜集其餘參數。這是一種命名變數的方式而已，比較少人知道這招，但可以知道一下。 # -3- 字串插值 String interpolation 看過這種寫法嗎？ ``` class Product { constructor(name, description, price) { this.name = name; this.description = description; this.price = price; } getDescription() { return " Full description \n" + " name: " + this.name + " description: " + this.description } } ``` 看看那個 getDescription() 方法，又長、跨行、又難讀。在大多數程式語言都只能這樣寫。幸好，有些程式語言支援字串插值，包括 JavaScript，所以可以改寫如下： ``` getDescription() { return `Full description \n: name: ${this.name} description ${this.description} `; } ``` 反引號 ` 可以定義多行字串。再使用 ${} 進行插值。是不是好多了呢：） # -4- 屬性縮寫 Shorthand properties 雖然還沒搞懂，你可能早就在用了。在 ES5 需要這樣寫： ``` function createCoord(x, y) { return { x: x, y: y } } ``` 在 ES6 之後，如果 : 後面名稱一樣，可以直接省略，像這樣： ``` function createCoord(x, y) { return { x, y } } ``` 簡潔多了吧？ # -5- 方法屬性 Method properties 在物件裡面指向方法的寫法。以下是 ES5 寫法： ``` const math = { add: function(a,b) { return a + b; }, sub: function(a,b) { return a - b; }, multiply: function(a,b) { return a * b; } } ``` 在 ES6 之後可以少寫一大堆，像這樣： ``` const math = { add(a,b) { return a + b; }, sub(a,b) { return a - b; }, multiply(a,b) { return a * b; } } ``` # -6- 解構 Destructuring 解構用得好，有益身心健康。 ## Object destructuring 這段： ``` function handle(req, res) { const name = req.body.name; const description = req.body.description; const url = req.url; log('url endpoint', url); // lots of logic happening dbService.createPerson( name, description ) } ``` 有點難讀吧，但要從多層深度挖資料，就會寫成這樣。還能怎麼辦？其實有以下妙招喔： ``` function handle(req, res) { const { body: { name, description }, url }, = req; log('url endpoint', url); // lots of logic happening dbService.createPerson( name, description ) ``` 變成俐落的一行了。 ## Array destructuring 不只物件能用，陣列也可以用，像這段： ``` const array = [1,2,3,4,5,6]; const a = array[0]; const c = array[2]; ``` 可以更優雅地改寫成這樣： ``` const array = [1,2,3,4,5,6]; const [a, ,c, ...remaining] = array; // remaining = [4,5,6] ``` 上面的模式配對，就可以拆出我們需要的變數。如果要跳過某值，就寫 , , 即可。我另外多寫了一個 rest parameter 來取得其餘資料。 ## Parameter matching 函數的參數也能這樣寫。當函數有超過 2-3 個參數時，業界慣例常常是這樣寫： ``` function doSomething(config) { if(config.a) { ... } if(config.b) { ... } if(config.c) { ... } } ``` 更漂亮的寫法其實是： ``` function doSomething({ a, b, c }) { if(a) { ... } if(b) { ... } if(c) { ... } } ``` # -7- 陣列方法 ES6 有大量好用的陣列方法，例如： - find()，回傳符合條件的項目，否則回傳 null - findIndex()，尋找項目的索引 - some(), 確認是否包含符合條件的項目 - includes(), 確認是否包含某個項目舉例說明如下： ``` const array = [{ id: 1, checked: true }, { id: 2 }]; arr.find(item => item.id === 2) // { id: 2 } arr.findIndex(item => item.id === 2) // 1 arr.some(item => item.checked) // true const numberArray = [1,2,3,4]; numberArray.includes(2) // true ``` # -8- Promises + Async/Await 在只有 callback 能寫的年代，這種寫法很常見： ``` function doSomething(cb) { setTimeout(() => { cb('done') }, 3000) } doSomething((arg) => { console.log('done here', arg); }) ``` 用來寫非同步任務時，就會這樣寫。但現在我們有 promise 能寫了，所以可以這樣： ``` function doSomething() { return new Promise((resolve, reject) => { setTimeout(() => { resolve('done') }, 3000) }) } doSomething().then(arg => { console.log('done here', arg); }) ``` 多個流程還能整個串起來，就像這樣： ``` getUser() .then(getOrderByUser) .then(getOrderItemsByOrder) .then(orderItems => { // do something with order items }) ``` ## Async/await 接著還有 async/await 可以用。上方的範例，相關 promise 變成： ``` async function getItems() { try { const user = await getUser(); const order = await getOrderByUser(user); const items = await getOrderItemsByOrder(order); return items; } catch(err) { // handle error here, the suggestion to return something or rethrow } } getItems().then(items => { // do something with order items }) ``` 看起來像是同步，但其實非同步的一段程式碼：） # -9- 模塊 Modules 幾乎所有程式語言都支援模塊功能。將程式碼分為多個檔案，各自為獨立單元，就是模塊了。像這樣： ``` // math.js export function add(a,b) { return a + b; } export function sub(a,b) { return a - b; } export default (a,b) => a * b; // main.js import mult, { add, sub } from './math'; mult(2, 4) // 8 add(1,1) // 2 sub(1,2) // -1 ``` 使用 export 關鍵字來表示 add 跟 sub 是公開可用的。export default 代表不指定函數時直接導入的內容。在 main.js 中，將預設導入命名為 mult，然後指定導入函數 add 和 sub。 # -10- 箭頭函數 + this 整篇文章一直在用箭頭函數，其實只是另一種函數的寫法而已。以前要這樣寫： ``` function printArray(arr) { // do something } ``` 現在可以這樣寫： ``` const printArray = (arr) => { // do something } ``` ## 單行函數函數還可以用一行寫完： ``` const add = (a,b) => a + b ``` 這種寫法可以省略 return 直接回傳結果。要回傳物件也可以，這樣即可： ``` const create = (a,b) = > ({ x: a, y: b }) ``` ## Lexical this 以前常常會搞混 this 代表什麼，舉例來說： ``` let array = [1,2,3]; function sum() { this.total = 0; arr.forEach(function(item) { this.total+= item; // `this` is the inner functions `this`, BAD }) return total; } ``` 這個例子中，this 在 forEach 指錯地方了。以前的解法是： ``` function sum() { this.total = 0; var self = this; arr.forEach(function(item) { self.total+= item; // now we are using `self`, it solves it but feels hacky }) return total; } ``` 雖然多寫個 self 變數可以解決，但實在很鳥。新的箭頭函數寫法則解決了這問題： ``` function sum() { this.total = 0; arr.forEach((item) => { this.total+= item; // all is well `this` points to outer function }) return total; } ``` # 結論 ES6 之後有很多好東西可以用，今天先介紹一些，希望對大家有幫助！

1個讚 0留言 4,749瀏覽