CodeLove 論壇 - 免費自學作業包＆新手友善討論區，幫你轉職工程師！

👉 讀技術文章 👉 上自學課程 👉 討論區交流

🔍 搜尋結果：this

在 React 中使用 Design Patterns：以 Strategy Pattern 舉例

在 React 前端開發時，常常會需要在不同的元件、hook、utils 中寫一些邏輯。有些時候，使用策略模式會很有幫助，這篇文章給您參考。 - 原文出處：https://dev.to/itshugo/applying-design-patterns-in-react-strategy-pattern-enn ## 出問題了：霰彈槍手術（Shotgun Surgery） Shotgun Surgery 是一種程式寫很爛的信號。想對程式規格做一點小修改，需要改一大堆地方。 ![](https://refactoring.guru/images/refactoring/content/smells/shotgun-surgery-01-2x.png) 在專案中通常如何發生？假設我們需要為產品寫一個報價卡片，我們根據客戶所在國家，調整價格、貨幣、折扣方式和文字說明： ![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5iz9oso7ozaqm0qibd76.png) 大多數工程師可能會這樣寫： - 元件：`PricingCard`、`PricingHeader`、`PricingBody`。 - Utility functions：`getDiscountMessage`（在 **utils/discount.ts** 中），`formatPriceByCurrency`（在 **utils/price.ts** 中）。 - `PricingBody` 元件會計算最終價格。完整程式碼範例：https://codesandbox.io/s/react-strategy-pattern-problem-h59r02?from-embed 現在假設我們需要更改一個國家/地區的定價計劃，或為另一個國家/地區添加新的定價計劃。您將如何處理這段修改？您必須至少修改 3 個地方，並向已經滿亂的 `if-else` 區塊添加更多條件： - 修改 `PricingBody` 組件。 - 修改 `getDiscountMessage` 函數。 - 修改 `formatPriceByCurrency` 函數。如果您聽說過 S.O.L.I.D 原則，我們已經違反了前 2 條原則：單一職責原則和開閉原則。 ## 解決方法：策略模式策略模式非常簡單。我們可以簡單的理解為，每個國家的定價方案都是一個策略。在那個策略類別中，會實現該策略的所有相關邏輯。假設您熟悉 OOP，我們可以有一個實現共享/公共邏輯的抽像類別（`PriceStrategy`），然後具有不同邏輯的策略將繼承該抽像類別。 `PriceStrategy` 抽像類別如下所示： ``` import { Country, Currency } from '../../types'; abstract class PriceStrategy { protected country: Country = Country.AMERICA; protected currency: Currency = Currency.USD; protected discountRatio = 0; getCountry(): Country { return this.country; } formatPrice(price: number): string { return [this.currency, price.toLocaleString()].join(''); } getDiscountAmount(price: number): number { return price * this.discountRatio; } getFinalPrice(price: number): number { return price - this.getDiscountAmount(price); } shouldDiscount(): boolean { return this.discountRatio > 0; } getDiscountMessage(price: number): string { const formattedDiscountAmount = this.formatPrice( this.getDiscountAmount(price) ); return `It's lucky that you come from ${this.country}, because we're running a program that discounts the price by ${formattedDiscountAmount}.`; } } export default PriceStrategy; ``` 我們只需將實例化的策略作為 prop 傳遞給 PricingCard 元件： ``` <PricingCard price={7669} strategy={new JapanPriceStrategy()} /> ``` `PricingCard` 的 props 定義為： ``` interface PricingCardProps { price: number; strategy: PriceStrategy; } ``` 同樣，如果您了解 OOP，那麼我們不僅在使用繼承，而且還在此處使用多態性（Polymorphism）。完整程式碼範例：https://codesandbox.io/s/react-strategy-pattern-solution-mm0cvm?from-embed 使用這個解決方案，我們只需要添加一個新的策略類別，而不需要修改任何現有程式碼。這樣，我們也滿足了 S.O.L.I.D 原則。 ## 結論因為我們在 React 程式碼中檢測到程式碼發臭：Shotgun Surgery，所以我們使用了策略模式來解決它。 ### Before ![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7wn31uolfo6xfy3mh8fo.png) ### After ![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xheeb2splcwj2kkqwsfo.png) 現在邏輯都存在一個地方，不再分佈在許多地方。 --- 以上是 Strategy Pattern 的簡單說明，希望對您有幫助。

0個讚 0留言 785瀏覽

小編精選 - 技術文章翻譯 · 12月15日

都要 2023 年了還在用 console.log 嗎？來看看 10 個 console 進階用法！

1個讚 0留言 7,275瀏覽

小編精選 - 技術文章翻譯 · 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,581瀏覽

小編精選 - 技術文章翻譯 · 12月10日

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

0個讚 0留言 1,465瀏覽

小編精選 - 技術文章翻譯 · 12月07日

在 JavaScript 新版 ES2020 之中，值得留意的 10 個新功能

ES2020 已經上線一段時間了，但是滿多新功能都大家不太知道。這篇文章跟大家介紹一下！ - 原文出處：https://dev.to/worldindev/10-new-javascript-features-in-es2020-that-you-should-know-3ohf # 1. BigInt BigInt 是最受期待的新功能之一，允許工程師處理資料時，能存一個更大的整數。目前在 JavaScript 中可以儲存的最大整數是 `pow(2, 53) - 1`。BigInt 讓你可以存更大的數字。 ![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/588khrk3rpei76gho4e9.png) 如上所示，需要在後面加上一個 `n`。這個 `n` 表示這是一個 BigInt ，讓 JavaScript 引擎（v8 引擎）能夠特別處理。這個功能不向後兼容，因為傳統的數字系統是 IEEE754（不能支援這種大小的數字）。 # 2.Dynamic import 動態導入讓你可在程式碼中，有條件地動態導入模組。跟你現在用 Webpack 和 Babel 做的事一樣。此功能讓你可以按需求讀取程式碼，也就是所謂的 code splitting。讓你不再需要 webpack 或其他模組打包工具就能做到。您還可以在 if-else 中有條件地載入程式碼。這有個額外好處，就是不會污染全域命名空間。 ![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/utai4m6xcc1nk3aooqxf.png) # 3. Nullish Coalescing Nullish Coalescing 可以確實檢查 nullish 而不是 falsy 值。什麼是 nullish 與 falsy 值？在 JavaScript 中，許多值都是 `falsy`，例如空字串、數字 0、`undefined`、`null`、`false`、`NaN` 等等。但有時候你想要檢查 undefined 跟 null。這種情況下，就可以用新的運算子 `??` ![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uupnryjugtdtb6xvv7yk.png) 如圖， **OR** 運算子始終回傳 truthy 值，而 ?? 運算子回傳 non-nullish 值。 # 4. Optional Chaining Optional Chaining 語法讓你可以取得深度嵌套的物件屬性，而不用擔心屬性不存在。如果找不到屬性，會回傳 undefined，而不會報錯壞掉。物件屬性可用，呼叫函數跟陣列也可以用。超方便！請參考： ![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r4w5zkv64r0cs46xpjie.png) # 5. Promise.allSettled `Promise.allSettled` 方法接受一個 Promise 陣列，並且只有在所有 Promise 都完成時才 resolve 或 reject。以前只能用 `race` 和 `all` 做出類似效果。 ![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6xi1hpkcazxgxsl81d90.png) # 6. String#matchAll `matchAll` 是添加到 `String` 原型的新方法，與正則表達式相關。這將回傳一個迭代器，該迭代器依次返回所有匹配的組。舉例： ![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nmmk478r36d1bfjovi1v.png) # 7. globalThis 如果你是寫跨平台的 JS 程式碼，可以在 Node 上運行、在瀏覽器運行、也可以在 web-workers 中運行，你很難操作全域物件。因為對於瀏覽器來說它是 window ，對於 Node 來說是 global ，對於 web-workers 來說是 self。如果有其它的運行環境，它們的全局物件也都不同。變成你需要自己寫一段來檢測環境。所以 ES2020 實作了 globalThis，無論您在哪裡執行，它始終引用全域物件： ![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u5dczfi8moefwl4y1jo6.png) # 8. 模組命名空間匯出在 JavaScript 模組中，可以使用以下語法： ``` import * as utils from './utils.mjs' ``` ES2020 新增了相對的匯出語法： ``` export * as utils from './utils.mjs' ``` 這等同於以下內容： ``` import * as utils from './utils.mjs' export { utils } ``` # 9. 定義好 for-in 順序雖然大部份瀏覽器都實做了一樣的順序，但 ECMA 規範其實沒有指定 for (x in y) 的運行順序。在 ES2020 中正式標準化了。 # 10. import.meta `import.meta` 物件帶有一個 `null` 原型。考慮以下模組，`module.js`： ``` <script type="module" src="module.js"></script> ``` 您可以使用 import.meta 物件取得有關模組的元信息： ``` console.log(import.meta); // { url: "file:///home/user/module.js" } ``` 對於 external scripts，它代表存取腳本的 URL，對於 inline scripts，它代表檔案的 URL。 --- 以上簡單分享，希望對你有幫助！

0個讚 0留言 677瀏覽

小編精選 - 技術文章翻譯 · 12月06日

關於 JavaScript 開發的 8 個少見、但還不錯用小技巧

JavaScipt 是非常流行的程式語言，其中有些少見技巧，但還不錯用，這篇文章會分享八個，給您參考看看！ - 原文出處：https://dev.to/worldindev/8-javascript-tips-tricks-that-no-one-teaches-24g1 # 函數繼承函數繼承就是先寫一個基礎函數，再寫一個擴充函數，來擴充屬性與方法，會像這樣： ``` // Base function function Drinks(data) { var that = {}; // Create an empty object that.name = data.name; // Add it a "name" property return that; // Return the object }; // Fuction which inherits from the base function function Coffee(data) { // Create the Drinks object var that = Drinks(data); // Extend base object that.giveName = function() { return 'This is ' + that.name; }; return that; }; // Usage var firstCoffee = Coffee({ name: 'Cappuccino' }); console.log(firstCoffee.giveName()); // Output: "This is Cappuccino" ``` # .map() 的替代方案 `.map()` 有一個替代方案，就是 `.from()`: ``` let dogs = [ { name: ‘Rio’, age: 2 }, { name: ‘Mac’, age: 3 }, { name: ‘Bruno’, age: 5 }, { name: ‘Jucas’, age: 10 }, { name: ‘Furr’, age: 8 }, { name: ‘Blu’, age: 7 }, ] let dogsNames = Array.from(dogs, ({name}) => name); console.log(dogsNames); // returns [“Rio”, “Mac”, “Bruno”, “Jucas”, “Furr”, “Blu”] ``` # 數字轉字串/字串轉數字通常，要讓數字轉為字串，會這樣寫 ``` let num = 4 let newNum = num.toString(); ``` 然後字串轉數字，會這樣寫 ``` let num = "4" let stringNumber = Number(num); ``` 但有個更快的寫法是： ``` let num = 15; let numString = num + ""; // number to string let stringNum = + numString; // string to number ``` # 使用長度來調整和清空陣列在 javascript 中，我們可以改寫 length 內建方法，直接設定一個新值。舉個例： ``` let array_values = [1, 2, 3, 4, 5, 6, 7, 8]; console.log(array_values.length); // 8 array_values.length = 5; console.log(array_values.length); // 5 console.log(array_values); // [1, 2, 3, 4, 5] ``` 還能用來清空陣列： ``` let array_values = [1, 2, 3, 4, 5, 6, 7,8]; console.log(array_values.length); // 8 array_values.length = 0; console.log(array_values.length); // 0 console.log(array_values); // [] ``` # 使用陣列解構來交換值陣列解構讓陣列或物件的屬性，可以拆出來到變數中。還可以用它來交換兩個元素，舉例如下： ``` let a = 1, b = 2 [a, b] = [b, a] console.log(a) // result -> 2 console.log(b) // result -> 1 ``` # 刪除陣列中的重複元素這個技巧很簡單。比方說，我創建了一個包含重複元素的陣列，然後我想刪除重複項： ``` const array = [1, 3, 2, 3, 2, 1, true, false, true, 'Kio', 2, 3]; const filteredArray = [...new Set(array)]; console.log(filteredArray) // [1, 3, 2, true, false, "Kio"] ``` # for 迴圈的簡寫版可以這樣寫： ``` const names = ["Kio", "Rio", "Mac"]; // Long Version for (let i = 0; i < names.length; i++) { const name = names[i]; console.log(name); } // Short Version for (let name of names) console.log(name); ``` # 效能監測下面這張圖是 google 用秒數提示效能： https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i7ed89oyhcyyjhqirvc6.png 在 JavaScript 中也能做到，就像這樣： ``` const firstTime = performance.now(); something(); const secondTime = performance.now(); console.log(`The something function took ${secondTime - firstTime} milliseconds.`); ``` --- 以上八個技巧，希望對您有幫助！

0個讚 0留言 631瀏覽

小編精選 - 技術文章翻譯 · 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留言 5,529瀏覽

歡迎發文

💡 記錄日常工作的實踐、心得

💡 發表對生活和職場的感悟

💡 針對感興趣的事件發表隨筆或者雜談

💡 詳細介紹你掌握的一門語言、一個技術，或者一個興趣

💡 或者，就直接把你的部落格搬到這裡（支援 API 可以撈）