🏠 首頁

🏠 首頁

React 生態系中,5個比較少見,但很好用的套件

我很喜歡在 NPM 目錄到處逛、尋找優質小套件。今天跟你分享五個我的近期發現! - 原文出處:https://dev.to/naubit/5-small-and-hidden-react-libraries-you-should-already-be-using-nb5 ## 1. Urlcat Urlcat 是一個小型的 Javascript 套件,可以非常方便地建立 URL、預防常見錯誤。 你當然可以直接用 URL API 來建立網址,但這種做法需要你手動處理一些細節。 Urlcat 就方便多了,隨插即用,不用花一堆時間讀文件,就能直接開始用。 https://github.com/balazsbotond/urlcat ## 2. UseHooks-ts ![](https://imgur.com/n7DL06Z.png) 如果你是 React 開發者、有在用 hook,很多時候你需要替一大堆小東西寫 custom hook。像是處理深色模式、處理視窗大小變化事件,等等。 UseHooks 是一個小套件,針對各種小案例都有現成的 hook,而且文件齊全、支援 TypeScript。 https://github.com/juliencrn/usehooks-ts ## 3. Logt ![](https://imgur.com/PU6eNCJ.gif) 我喜歡到處都有日誌,當需要知道發生了什麼時,就可以檢查。 當我寫前端時,**我也想要那些日誌**。但有一些先決條件: - 必須有完整的型別(這樣我就可以在 Typescript 中方便使用) - 必須很小 - 必須有彩色標籤(所以我很快就知道日誌類型) - 必須有分日誌級別 - 必須有一些方法,可以根據條件隱藏一些日誌(比如是否在正式環境) - 必須可以將這些日誌發送到其他地方(比如 Sentry) 經過大量時間研究(我都快自己開始寫了)我找到了 Logt,**它滿足我的所有要求**。 100% 推薦! https://github.com/sidhantpanda/logt ## 4. Loadable Components ![](https://imgur.com/H6eoKeF.png) 如果你正在嘗試優化 React 應用程式,**你可能正在使用 React.lazy** 和 Suspense 來延遲載入元件。 雖然也是可以,但還有更好的方法!比如這個套件。我無法在此完整說明原因,但請參考以下比較: https://loadable-components.com/docs/loadable-vs-react-lazy/ 基本上,它支持 **SSR**(_Server Side Rendering_)、**Library Splitting**,甚至 **完全動態導入**。還不錯吧? 此外,它真的很容易使用。**幾乎即插即用。**所以,試試吧! https://github.com/gregberge/loadable-components ## 5. Emoji Mart ![](https://imgur.com/jBA63Iu.png) 在處理不同的專案時,**我總是要處理表情符號。**現在到處都在使用它。而且我通常必須在專案中添加一些表情符號選擇器元件。 這還不算難。但是隨後開始收到更多要求:它必須**延遲載入表情符號**,它必須支持**國際化**,它必須允許**搜尋**,它必須允許使用**與 slack 相同的查詢縮寫**… 這些是可以做,但還是花時間在專案本身比較好吧。 所以,來使用 Emoji Mart 吧! https://github.com/missive/emoji-mart --- 以上是五個好用但是還不知名的小套件,希望你喜歡!

如何在 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 中渲染列表,乍看之下,只是個簡單的面試問題。但其實可深可淺。下次面試時遇到這問題,可以思考一下此篇文章談到的各個面向。

20 個一行 JavaScript 就能完成的小任務

一行程式碼可以做到很多事。這邊有20個小任務都用一行就可以完成,給您參考! - 原文出處:https://dev.to/saviomartin/20-killer-javascript-one-liners-94f # 獲取瀏覽器 Cookie 的值 讀取 `document.cookie` 來查 cookie 的值 ``` const cookie = name => `; ${document.cookie}`.split(`; ${name}=`).pop().split(';').shift(); cookie('_ga'); // Result: "GA1.2.1929736587.1601974046" ``` # 將 RGB 轉換為十六進制 ``` const rgbToHex = (r, g, b) => "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1); rgbToHex(0, 51, 255); // Result: #0033ff ``` # 複製到剪貼板 使用 `navigator.clipboard.writeText` 輕鬆將任何文字複製到剪貼板。 ``` const copyToClipboard = (text) => navigator.clipboard.writeText(text); copyToClipboard("Hello World"); ``` # 檢查日期是否有效 使用以下程式碼檢查給定日期是否有效。 ``` const isDateValid = (...val) => !Number.isNaN(new Date(...val).valueOf()); isDateValid("December 17, 1995 03:24:00"); // Result: true ``` # 查找一年中的第幾天 根據給定日期,找出是第幾天。 ``` const dayOfYear = (date) => Math.floor((date - new Date(date.getFullYear(), 0, 0)) / 1000 / 60 / 60 / 24); dayOfYear(new Date()); // Result: 272 ``` # 將字串開頭大寫 Javascript 沒有內建的 capitalize 函數。我們可以使用以下程式碼來完成。 ``` const capitalize = str => str.charAt(0).toUpperCase() + str.slice(1) capitalize("follow for more") // Result: Follow for more ``` # 求兩天之間的天數 使用以下程式碼查找 2 個給定日期之間的天數。 ``` const dayDif = (date1, date2) => Math.ceil(Math.abs(date1.getTime() - date2.getTime()) / 86400000) dayDif(new Date("2020-10-21"), new Date("2021-10-22")) // Result: 366 ``` # 清除所有 Cookie 透過 document.cookie 存取 cookie 並清除它,就可輕鬆清除網頁中的所有 cookie。 ``` const clearCookies = document.cookie.split(';').forEach(cookie => document.cookie = cookie.replace(/^ +/, '').replace(/=.*/, `=;expires=${new Date(0).toUTCString()};path=/`)); ``` # 生成隨機十六進制顏色碼 使用“Math.random”和“padEnd”屬性,生成隨機的十六進制顏色碼。 ``` const randomHex = () => `#${Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, "0")}`; console.log(randomHex()); // Result: #92b008 ``` # 從陣列中刪除重複項 使用 JavaScript 中的 `Set` 輕鬆刪除重複項。 ``` const removeDuplicates = (arr) => [...new Set(arr)]; console.log(removeDuplicates([1, 2, 3, 3, 4, 4, 5, 5, 6])); // Result: [ 1, 2, 3, 4, 5, 6 ] ``` # 從 URL 獲取查詢參數 您可以從 `window.location` 或原始 URL `goole.com?search=easy&page=3` 中輕鬆找出查詢參數 ``` const getParameters = (URL) => { URL = JSON.parse('{"' + decodeURI(URL.split("?")[1]).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g, '":"') +'"}'); return JSON.stringify(URL); }; getParameters(window.location) // Result: { search : "easy", page : 3 } ``` # 把日期物件轉成時間 把日期物件以“hour::minutes::seconds”格式轉成時間。 ``` const timeFromDate = date => date.toTimeString().slice(0, 8); console.log(timeFromDate(new Date(2021, 0, 10, 17, 30, 0))); // Result: "17:30:00" ``` # 檢查數字是偶數還是奇數 ``` const isEven = num => num % 2 === 0; console.log(isEven(2)); // Result: True ``` # 求數的平均值 使用 `reduce` 方法計算多個數字之間的平均值。 ``` const average = (...args) => args.reduce((a, b) => a + b) / args.length; average(1, 2, 3, 4); // Result: 2.5 ``` # 滾動到頂部 您可以使用 `window.scrollTo(0, 0)` 方法自動滾動到頂部。將 `x` 和 `y` 都設為 0。 ``` const goToTop = () => window.scrollTo(0, 0); goToTop(); ``` # 反轉字串 您可以使用 `split`、`reverse` 和 `join` 方法輕鬆反轉字串。 ``` const reverse = str => str.split('').reverse().join(''); reverse('hello world'); // Result: 'dlrow olleh' ``` # 檢查陣列是否為空 ``` const isNotEmpty = arr => Array.isArray(arr) && arr.length > 0; isNotEmpty([1, 2, 3]); // Result: true ``` # 取得選中的文字 使用內建的 getSelection 屬性取得用戶選取中的文字。 ``` const getSelectedText = () => window.getSelection().toString(); getSelectedText(); ``` # 打亂陣列 使用 `sort` 和 `random` 方法打亂陣列。 ``` const shuffleArray = (arr) => arr.sort(() => 0.5 - Math.random()); console.log(shuffleArray([1, 2, 3, 4])); // Result: [ 1, 4, 3, 2 ] ``` # 檢測深色模式 使用以下程式碼,檢查用戶的設備是否處於深色模式。 ``` const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches console.log(isDarkMode) // Result: True or False ``` --- 希望這些程式碼,有給您一些靈感!

在 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。 --- 以上簡單分享,希望對你有幫助!

在 JavaScript 中使用 Regex 正規表示式:懶人 Cheat Sheet 備忘單

需要字串比對、搜尋等等功能時,regex 正規表示式非常好用。以下是一份 regex 的備忘單,方便需要時可以翻閱。 - 原文出處:https://dev.to/emmabostian/regex-cheat-sheet-2j2a --- **測試正規表示式** - 使用 `.test()` 方法 ``` let testString = "My test string"; let testRegex = /string/; testRegex.test(testString); ``` **測試多種模式** - 使用 OR 運算子 (|) ``` const regex = /yes|no|maybe/; ``` **忽略大小寫** - 使用 `i` 標誌不區分大小寫 ``` const caseInsensitiveRegex = /ignore case/i; const testString = 'We use the i flag to iGnOrE CasE'; caseInsensitiveRegex.test(testString); // true ``` **將第一個符合項提取到變數** - 使用 `.match()` 函數 ``` const match = "Hello World!".match(/hello/i); // "Hello" ``` **提取所有符合項到陣列中** - 使用`g`標誌 ``` const testString = "Repeat repeat rePeAT"; const regexWithAllMatches = /Repeat/gi; testString.match(regexWithAllMatches); // ["Repeat", "repeat", "rePeAT"] ``` **匹配任意字元** - 使用通配字元`.`作為任何字元的佔位符 ``` // To match "cat", "BAT", "fAT", "mat" const regexWithWildcard = /.at/gi; const testString = "cat BAT cupcake fAT mat dog"; const allMatchingWords = testString.match(regexWithWildcard); // ["cat", "BAT", "fAT", "mat"] ``` **用多種可能性匹配單個字元** - 定義一組您希望匹配的字元 - 放在中括號內即可`[]` ``` // Match "cat" "fat" and "mat" but not "bat" const regexWithCharClass = /[cfm]at/g; const testString = "cat fat bat mat"; const allMatchingWords = testString.match(regexWithCharClass); // ["cat", "fat", "mat"] ``` **匹配字母表中的字母** - 使用字元集合 `[a-z]` ``` const regexWithCharRange = /[a-e]at/; const catString = "cat"; const batString = "bat"; const fatString = "fat"; regexWithCharRange.test(catString); // true regexWithCharRange.test(batString); // true regexWithCharRange.test(fatString); // false ``` **匹配特定的數字和字母** - 還可以使用連字符來匹配數字 ``` const regexWithLetterAndNumberRange = /[a-z0-9]/ig; const testString = "Emma19382"; testString.match(regexWithLetterAndNumberRange) // true ``` **匹配一個未知字元** - 要匹配您*不*想要的一組字元,請使用否定字元集 - 使用插入符號 `^` 即可 ``` const allCharsNotVowels = /[^aeiou]/gi; const allCharsNotVowelsOrNumbers = /[^aeiou0-9]/gi; ``` **匹配連續出現一次或多次的字元** - 使用`+`符號 ``` const oneOrMoreAsRegex = /a+/gi; const oneOrMoreSsRegex = /s+/gi; const cityInFlorida = "Tallahassee"; cityInFlorida.match(oneOrMoreAsRegex); // ['a', 'a', 'a']; cityInFlorida.match(oneOrMoreSsRegex); // ['ss']; ``` **匹配連續出現零次或多次的字元** - 使用星號`*` ``` const zeroOrMoreOsRegex = /hi*/gi; const normalHi = "hi"; const happyHi = "hiiiiii"; const twoHis = "hiihii"; const bye = "bye"; normalHi.match(zeroOrMoreOsRegex); // ["hi"] happyHi.match(zeroOrMoreOsRegex); // ["hiiiiii"] twoHis.match(zeroOrMoreOsRegex); // ["hii", "hii"] bye.match(zeroOrMoreOsRegex); // null ``` **惰性匹配** - 符合要求的字串的最短部分 - 預設情況下,正則表達式是貪婪匹配(滿足要求的字串的最長部分) - 使用 `?` 字元進行惰性匹配 ``` const testString = "catastrophe"; const greedyRexex = /c[a-z]*t/gi; const lazyRegex = /c[a-z]*?t/gi; testString.match(greedyRexex); // ["catast"] testString.match(lazyRegex); // ["cat"] ``` **匹配起始字串** - 要測試字串開頭的字元,請使用插入符 `^`,但要在字元集之外 ``` const emmaAtFrontOfString = "Emma likes cats a lot."; const emmaNotAtFrontOfString = "The cats Emma likes are fluffy."; const startingStringRegex = /^Emma/; startingStringRegex.test(emmaAtFrontOfString); // true startingStringRegex.test(emmaNotAtFrontOfString); // false ``` **匹配結尾字串** - 在正則表達式末尾使用美元符號 `$` 來檢查字串末尾是否匹配 ``` const emmaAtBackOfString = "The cats do not like Emma"; const emmaNotAtBackOfString = "Emma loves the cats"; const startingStringRegex = /Emma$/; startingStringRegex.test(emmaAtBackOfString); // true startingStringRegex.test(emmaNotAtBackOfString); // false ``` **匹配所有字母和數字** - 使用 `\w` 簡寫 ``` const longHand = /[A-Za-z0-9_]+/; const shortHand = /\w+/; const numbers = "42"; const myFavoriteColor = "magenta"; longHand.test(numbers); // true shortHand.test(numbers); // true longHand.test(myFavoriteColor); // true shortHand.test(myFavoriteColor); // true ``` **匹配除字母和數字以外的所有內容** - 你可以使用 `\w` 的反義詞也就是 `\W` ``` const noAlphaNumericCharRegex = /\W/gi; const weirdCharacters = "!_$!!"; const alphaNumericCharacters = "ab283AD"; noAlphaNumericCharRegex.test(weirdCharacters); // true noAlphaNumericCharRegex.test(alphaNumericCharacters); // false ``` **匹配所有數字** - 你可以使用字元集 `[0-9]`,或者使用簡寫形式 `\d` ``` const digitsRegex = /\d/g; const stringWithDigits = "My cat eats $20.00 worth of food a week."; stringWithDigits.match(digitsRegex); // ["2", "0", "0", "0"] ``` **匹配所有非數字** - 你可以使用 `\d` 的反義詞也就是 `\D` ``` const nonDigitsRegex = /\D/g; const stringWithLetters = "101 degrees"; stringWithLetters.match(nonDigitsRegex); // [" ", "d", "e", "g", "r", "e", "e", "s"] ``` **匹配空格** - 使用 `\s` 匹配空格和換行 ``` const sentenceWithWhitespace = "I like cats!" var spaceRegex = /\s/g; whiteSpace.match(sentenceWithWhitespace); // [" ", " "] ``` **匹配非空格** - 你可以使用 `\s` 的反義詞也就是 `\S` ``` const sentenceWithWhitespace = "C a t" const nonWhiteSpaceRegex = /\S/g; sentenceWithWhitespace.match(nonWhiteSpaceRegex); // ["C", "a", "t"] ``` **匹配字元數** - 您可以使用 `{lowerBound, upperBound}` 在一行中指定特定數量的字元 ``` const regularHi = "hi"; const mediocreHi = "hiii"; const superExcitedHey = "heeeeyyyyy!!!"; const excitedRegex = /hi{1,4}/; excitedRegex.test(regularHi); // true excitedRegex.test(mediocreHi); // true excitedRegex.test(superExcitedHey); //false ``` **匹配最少的字元數** - 您可以使用 `{lowerBound,}` 要求滿足最少數量的字元 - 這稱為數量說明符 ``` const regularHi = "hi"; const mediocreHi = "hiii"; const superExcitedHey = "heeeeyyyyy!!!"; const excitedRegex = /hi{2,}/; excitedRegex.test(regularHi); // false excitedRegex.test(mediocreHi); // true excitedRegex.test(superExcitedHey); //false ``` **匹配準確的字元數** - 您可以使用 `{requiredCount}` 指定要求字元數 ``` const regularHi = "hi"; const bestHi = "hii"; const mediocreHi = "hiii"; const excitedRegex = /hi{2}/; excitedRegex.test(regularHi); // false excitedRegex.test(bestHi); // true excitedRegex.test(mediocreHi); //false ``` **某字元可以不出現** - 要允許某字元可以不出現,請使用 `?` ``` const britishSpelling = "colour"; const americanSpelling = "Color"; const languageRegex = /colou?r/i; languageRegex.test(britishSpelling); // true languageRegex.test(americanSpelling); // true ``` --- 以上是基礎用法&範例,方便工作時可以查閱!

關於 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.`); ``` --- 以上八個技巧,希望對您有幫助!

JavaScript 中關於陣列的 13 個入門小技巧

陣列是 JavaScript 中最常用到的概念之一。處理資料時很常用到這種資料結構。這篇文章介紹一些陣列操作的基本方法,希望對你有幫助! - 原文出處:https://dev.to/duomly/13-useful-javascript-array-tips-and-tricks-you-should-know-2jfo # 1. 從陣列中移除重複項目 很經典的面試問題,需要從陣列中找出獨立值。使用 Set 資料型態,可以輕易完成這任務。這邊介紹兩種方法,一個使用 .from() 一個使用 ... 展開運算子。 ``` var fruits = [“banana”, “apple”, “orange”, “watermelon”, “apple”, “orange”, “grape”, “apple”]; // First method var uniqueFruits = Array.from(new Set(fruits)); console.log(uniqueFruits); // returns [“banana”, “apple”, “orange”, “watermelon”, “grape”] // Second method var uniqueFruits2 = […new Set(fruits)]; console.log(uniqueFruits2); // returns [“banana”, “apple”, “orange”, “watermelon”, “grape”] ``` 很簡單吧! # 2. 從陣列中抽換掉某個元素 這個情境也很常見。有一個簡單的好方法,就是使用 .splice ,參數分別是開始修改的位置、修改幾個元素、要更改成哪些值。 ``` var fruits = [“banana”, “apple”, “orange”, “watermelon”, “apple”, “orange”, “grape”, “apple”]; fruits.splice(0, 2, “potato”, “tomato”); console.log(fruits); // returns [“potato”, “tomato”, “orange”, “watermelon”, “apple”, “orange”, “grape”, “apple”] ``` # 3. 不用 .map() 的 map 功能 .map() 很常用、大家都會用,但有一個方法也很不錯,也很簡潔,就是 .from() ``` var friends = [ { name: ‘John’, age: 22 }, { name: ‘Peter’, age: 23 }, { name: ‘Mark’, age: 24 }, { name: ‘Maria’, age: 22 }, { name: ‘Monica’, age: 21 }, { name: ‘Martha’, age: 19 }, ] var friendsNames = Array.from(friends, ({name}) => name); console.log(friendsNames); // returns [“John”, “Peter”, “Mark”, “Maria”, “Monica”, “Martha”] ``` # 4. 清空陣列 有時候你會需要清空一個陣列。一個一個把元素刪掉太慢了,下面這個方法快多了:直接把長度設為 0 吧! ``` var fruits = [“banana”, “apple”, “orange”, “watermelon”, “apple”, “orange”, “grape”, “apple”]; fruits.length = 0; console.log(fruits); // returns [] ``` # 5. 把陣列轉換為物件 有時需要把陣列轉成物件。使用 ... 展開運算子可以很快完成這任務。 ``` var fruits = [“banana”, “apple”, “orange”, “watermelon”]; var fruitsObj = { …fruits }; console.log(fruitsObj); // returns {0: “banana”, 1: “apple”, 2: “orange”, 3: “watermelon”, 4: “apple”, 5: “orange”, 6: “grape”, 7: “apple”} ``` # 6. 陣列塞滿資料 有時需要把一個陣列塞滿某些資料。使用 .fill() 可以快速完成這任務: ``` var newArray = new Array(10).fill(“1”); console.log(newArray); // returns [“1”, “1”, “1”, “1”, “1”, “1”, “1”, “1”, “1”, “1”, “1”] ``` # 7. 合併陣列 老方法是使用 .concat() 來合併。但有個新方法,就是用 ... 展開運算子,非常簡單俐落: ``` var fruits = [“apple”, “banana”, “orange”]; var meat = [“poultry”, “beef”, “fish”]; var vegetables = [“potato”, “tomato”, “cucumber”]; var food = […fruits, …meat, …vegetables]; console.log(food); // [“apple”, “banana”, “orange”, “poultry”, “beef”, “fish”, “potato”, “tomato”, “cucumber”] ``` # 8. 找出陣列交集 這也是 JavaScript 面試最常見的問題。這邊使用 filter 跟 .includes 來完成這任務。 ``` var numOne = [0, 2, 4, 6, 8, 8]; var numTwo = [1, 2, 3, 4, 5, 6]; var duplicatedValues = […new Set(numOne)].filter(item => numTwo.includes(item)); console.log(duplicatedValues); // returns [2, 4, 6] ``` # 9. 把 false 相關的值從陣列移除 false 相關值包含 false, 0, "", null, NaN, undefined。使用 .filter() 可以俐落地過濾陣列。 ``` var mixedArr = [0, “blue”, “”, NaN, 9, true, undefined, “white”, false]; var trueArr = mixedArr.filter(Boolean); console.log(trueArr); // returns [“blue”, 9, true, “white”] ``` # 10. 從陣列撈出隨機元素 有時需要隨機撈元素出來。根據陣列長度,隨機撈一個索引出來,就可以囉。 ``` var colors = [“blue”, “white”, “green”, “navy”, “pink”, “purple”, “orange”, “yellow”, “black”, “brown”]; var randomColor = colors[(Math.floor(Math.random() * (colors.length)))] ``` # 11. 逆轉陣列 不需要複雜的迴圈跟函數,也能逆轉一個陣列。這樣一行就可以: ``` var colors = [“blue”, “white”, “green”, “navy”, “pink”, “purple”, “orange”, “yellow”, “black”, “brown”]; var reversedColors = colors.reverse(); console.log(reversedColors); // returns [“brown”, “black”, “yellow”, “orange”, “purple”, “pink”, “navy”, “green”, “white”, “blue”] ``` # 12. .lastIndexOf() 方法 這個有趣的方法,可以找到特定元素最後一次出現的索引。如果陣列中有重複值,就可用上這方法。 ``` var nums = [1, 5, 2, 6, 3, 5, 2, 3, 6, 5, 2, 7]; var lastIndex = nums.lastIndexOf(5); console.log(lastIndex); // returns 9 ``` # 13. 陣列中全部數值加總 這也是面試常見考題。使用 .reduce 可以快速解決這問題。 ``` var nums = [1, 5, 2, 6]; var sum = nums.reduce((x, y) => x + y); console.log(sum); // returns 14 ``` # 結論 這 13 個小技巧,分別有一些進階觀念可以研究,這篇文章作為入門介紹,希望對您的工作有幫助!

10 個可以學習 JavaScript 的互動式網頁遊戲

利用玩遊戲來學習程式語言,不但好玩,還可以視覺化學習。 來看看這十個遊戲吧! - 原文出處:https://dev.to/dailydevtips1/10-games-to-learn-javascript-155j ## 1.CodinGame ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1669180583597/1D_NywE8W.png) CodinGame 是一個多語言平台,可以邊玩遊戲邊學多種程式語言,包括 JavaScript。 最酷的是有多人模式,可以跟朋友或同事一起玩。 https://www.codingame.com/ide/puzzle/onboarding ## 2.CodeCombat ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1669180891032/OPOCUVmSM.png) CodeCombat 是一款 RPG 遊戲,可以學習網路基礎知識、程式語言,等等電腦觀念。 基本關卡免費,付費可以解鎖更多學習關卡。 https://codecombat.com/play/level/dungeons-of-kithgard ## 3.Untrusted ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1669181105367/mEnfeBOA0.png) 這遊戲把命令列視窗變成密室逃脫。 需要輸入 JavaScript 程式碼才能通關。很容易讓手,也有很多提示。 https://alexnisnevich.github.io/untrusted/ ## 4.Codewars ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1669181416059/mshCexo8U.png) 通過填空來解決關卡。 可以跟別人討論、查看別人的解法。 很適合學習、發展新技能。 https://www.codewars.com/dashboard ## 5.JSRobot ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1669181700097/ANwMAnMU5.png) JSRobot 需要輸入 JavaScript 來控制機器人、清除關卡。 https://lab.reaal.me/jsrobot/#level=1&language=en ## 6.JSDares ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1669181942194/FgsC6Zo8M.png) JSDares 是一個開源遊戲平台,上面的關卡都是社群提供的。 都是小遊戲,可以每天早上玩一點。 很值得一試的遊戲平台! https://jsdares.com/ ## 7.Screeps ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1669182404647/2kevLRBHA.png) Screeps 是一款沙盒遊戲,寫 JavaScript 來控制一個殖民地。 可以學習 JavaScript 的各種方面。 關卡很多,內容龐大的遊戲。 https://screeps.com/a/#!/sim/tutorial/1 ## 8.Crunchzilla ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1669182635041/KvPpkah2d.png) Crunchzilla 有大量的圖形說明、多種難度關卡,可以逐步學習。 利用大量視覺說明,來解釋程式語言觀念。 https://www.crunchzilla.com/code-maven ## 9.Elevator Saga ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1669182844012/hF13igJGy.png) 這是個電梯遊戲,需要寫 JavaScript 來運送乘客。 有很多關卡跟說明文件。 可以不斷改進解法,來讓電梯更有效率 https://play.elevatorsaga.com/ ## 10.CheckIO ![](https://cdn.hashnode.com/res/hashnode/image/upload/v1669183173116/Yi7hnNf-0.png) CheckIO 會顯示各種解決方法,可以看到不止一種寫程式的方法。 有助於了解各種解法以及優化方案。 https://js.checkio.org/ --- 感謝閱讀,希望對您有幫助!

開發 React 時,推薦使用這些 Best Practices

在開發 React App 時,遵循一些 best practices 會使您的程式碼品質提高,這篇文章列出一些給您參考。 - 原文出處:https://dev.to/iambilalriaz/react-best-practices-ege # 強烈推薦 VS Code 作為 IDE Visual Studio Code 有幾個超好用的 React 功能。強大的外掛生態系,對開發者大有幫助: - Prettier - ES Lint - JavaScript (ES6) code snippets - Reactjs code snippets - Auto import # 使用 ES6 語法 程式碼越漂亮越好。在 JavaScript 中,採用 ES6 語法可以讓程式碼更簡潔。 ## Arrow Functions ``` // ES5 function getSum(a, b) { return a + b; } // ES6 const getSum = (a, b) => a + b; ``` ## Template Literal ``` // ES5 var name = "Bilal"; console.log("My name is " + name); // ES6 const name = "Bilal"; console.log(`My name is ${name}`); ``` ## const $ let const $ let 有各自的變數作用域。const 宣告的變數不能修改,let 宣告的變數可以修改。 ``` // ES5 var fruits = ["apple", "banana"]; // ES6 let fruits = ["apple", "banana"]; fruits.push("mango"); const workingHours = 8; ``` ## Object Destructuring ``` var person = { name: "John", age: 40, }; // ES5 var name = person.name; var age = person.age; // ES6 const { name, age } = person; ``` ## Defining Objects ``` var name = "John"; var age = 40; var designations = "Full Stack Developer"; var workingHours = 8; // ES5 var person = { name: name, age: age, designation: designation, workingHours: workingHours, }; // ES6 const person = { name, age, designation, workingHours }; ``` ES6 的語法特性、彈性,很多值得您一試。 # JSX 使用 map 時記得加上 key array map 時,永遠記得替每個元素加上獨立的 key 值。 ``` const students = [{id: 1, name: 'Bilal'}, {id: 2, name: 'Haris'}]; // in return function of component <ul> {students.map(({id, name}) => ( <li key={id}>{name}</li> ))} </ul>; ``` # 元件名稱使用 PascalCase ``` const helloText = () => <div>Hello</div>; // wrong const HelloText = () => <div>Hello</div>; // correct ``` # 變數和函數名稱使用 camelCase ``` const working_hours = 10; // bad approach const workingHours = 10; // good approach const get_sum = (a, b) => a + b; // bad approach const getSum = (a, b) => a + b; // good approach ``` # ID 和 css class 名稱使用 kebab-case ``` <!--bad approach--> <div className="hello_word" id="hello_world">Hello World</div> <!--good approach --> <div className="hello-word" id="hello-world">Hello World</div> ``` # 永遠要檢查物件&陣列的 null & undefined 忘記檢查的話,常常會導致一堆錯誤。 所以要保持檢查的習慣。 ``` const person = { name: "Haris", city: "Lahore", }; console.log("Age", person.age); // error console.log("Age", person.age ? person.age : 20); // correct console.log("Age", person.age ?? 20); //correct const oddNumbers = undefined; console.log(oddNumbers.length); // error console.log(oddNumbers.length ? oddNumbers.length : "Array is undefined"); // correct console.log(oddNumbers.length ?? "Array is undefined"); // correct ``` # 避免 Inline Styling Inline styling 會讓 jsx 程式碼變得很亂。用單獨的 css 文件拆分出來比較好。 ``` const text = <div style={{ fontWeight: "bold" }}>Happy Learing!</div>; // bad approach const text = <div className="learning-text">Happy Learing!</div>; // good approach ``` 在 .css 文件中: ``` .learning-text { font-weight: bold; } ``` # 避免 DOM 操作 用 React state 為主,別用 DOM 操作 糟糕做法: ``` <div id="error-msg">Please enter a valid value</div> ``` ``` document.getElementById("error-msg").visibility = visible; ``` 推薦做法: ``` const [isValid, setIsValid] = useState(false); <div hidden={isValid}>Please enter a valid value</div>; ``` 使用 isValid 來管理 UI 顯示邏輯。 # 在 useEffect 記得清乾淨每個事件監聽器 加過的事件監聽器,都要記得清乾淨: ``` const printHello = () => console.log("HELLO"); useEffect(() => { document.addEventListener("click", printHello); return () => document.removeEventListener("click", printHello); }); ``` # 避免重複開發,多寫通用元件 讓程式碼越乾淨越好。相似的東西可以寫通用元件。再根據 props 內容傳遞來處理相異處即可: ``` const Input=(props)=>{ const [inputValue, setInputValue]=useState(''); return( <label>{props.thing}</label> <input type='text' value={inputValue} onChange={(e)=>setInputValue(e.target.value)} /> ) } ``` 在其他元件中,就能這樣用: ``` <div> <Input thing="First Name" /> <Input thing="Second Name" /> </div> ``` # 檔案要分類一下 相關檔案可以分類成一個資料夾。 例如在 React 寫一個導覽列,那就可以開一個資料夾,相關的 .js 與 .css 檔案放裡面。 # 寫 functional components 為主 簡單顯示一些東西、沒用到 state 的話,那寫 functional components 比寫 class components 好。 如果你會寫 react hooks 的話,那就連 state 都完全不成問題。 # 養成編寫輔助函數的習慣 有時你在 React App 中會需要一些通用功能。 這種情況,可以開一個 `helper-functions.js` 檔案,在裡面寫輔助函數,就可以到處使用了。 ## 使用三元運算子代替 if/else if 使用 `if/else if` 語句會使程式碼變得龐大。使用三元運算子,就簡潔、清楚多了: ``` // Bad approach if (name === "Ali") { return 1; } else if (name === "Bilal") { return 2; } else { return 3; } // Good approach name === "Ali" ? 1 : name === "Bilal" ? 2 : 3; ``` # 新增 index.js 檔案,讓匯入元件更簡單 如果你在 actions 資料夾中有一個 index.js 檔案,當你想在元件中導入時,會像這樣: ``` import { actionName } from "src/redux/actions"; ``` actions 後面的 index.js 可以省略不寫,就不用這樣囉唆了: ``` import { actionName } from "src/redux/actions/index"; ``` # Destructuring of Props 物件屬性名稱可以拆出來,後面用起來比較方便。 假設你的元件有 `name`、`age` 和 `designation` 這些 props: ``` // Bad approach const Details = (props) => { return ( <div> <p>{props.name}</p> <p>{props.age}</p> <p>{props.designation}</p> </div> ); }; // Good approach const Details = ({ name, age, designation }) => { return ( <div> <p>{name}</p> <p>{age}</p> <p>{designation}</p> </div> ); }; ``` # 不要嘗試在同一函數中,去碰修改過的 state 變數 在一個函數中,如果你正在為一個狀態變數賦值,在同一個函數中,是拿不到新值的 ``` const Message = () => { const [message, setMessage] = useState("Hello World"); const changeMessage = (messageText) => { setMessage("Happy Learning"); console.log(message); // It will print Hello World on console }; return <div>{message}</div>; }; ``` # 使用 === 運算子代替 == 在比較兩個值時,嚴格檢查變數型別比較好: ``` "2" == 2 ? true : false; // true "2" === 2 ? true : false; // false ``` --- 以上 Best Practices 供您參考,祝福您不斷變強!

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 之後有很多好東西可以用,今天先介紹一些,希望對大家有幫助!

一行 JavaScript 就能完成的 7 個小任務

一行程式碼有時可以做到很多事。這邊有七個小任務都用一行就可以完成,給您參考! - 原文出處:https://dev.to/ruppysuppy/7-killer-one-liners-in-javascript-one # 洗亂陣列 在需要將陣列隨機打亂的時候,這行會很好用。 ``` const shuffleArray = (arr) => arr.sort(() => Math.random() - 0.5); // Testing const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; console.log(shuffleArray(arr)); ``` # 複製到剪貼板 在寫網站功能的時候,有時會需要這個功能。 ``` const copyToClipboard = (text) => navigator.clipboard?.writeText && navigator.clipboard.writeText(text); // Testing copyToClipboard("Hello World!"); ``` # 不重複元素 每種語言都有實作自己的 Hash List ,在 JavaScript 中,叫做 Set。可以使用 Set Data Structure 輕鬆地找出不重複元素。 ``` const getUnique = (arr) => [...new Set(arr)]; // Testing const arr = [1, 1, 2, 3, 3, 4, 4, 4, 5, 5]; console.log(getUnique(arr)); ``` # 檢測深色模式 深色模式日益流行,如果用戶在他們的設備中啟用了深色模式,最好將您的應用程序也切換到深色模式。 ``` const isDarkMode = () => window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches; // Testing console.log(isDarkMode()); ``` # 滑到頂部 新手常常發現滑動元素很難做。最簡單的方法是使用 scrollIntoView。加上 behavior 可以讓動畫更流暢。 ``` const scrollToTop = (element) => element.scrollIntoView({ behavior: "smooth", block: "start" }); ``` # 滑到底部 一樣使用 scrollIntoView 就可以,只需要將 block 值改成 end ``` const scrollToBottom = (element) => element.scrollIntoView({ behavior: "smooth", block: "end" }); ``` # 產生隨機顏色 如果您需要隨機色碼,可以參考這段: ``` const generateRandomHexColor = () => `#${Math.floor(Math.random() * 0xffffff).toString(16)}`; ``` --- 謝謝閱讀,希望對您有幫助!

軟體工程師:面試的時候,你應該問公司的 36 個重要問題

面試的時候,通常面試官會問:你有什麼問題想問我們嗎? 就跟公司面試你一樣,其實你也在面試公司。應該把握機會問對問題。 這邊有幾個重要問題,給你參考,下次面試可以問問看。 - 原文出處:https://dev.to/semaphore/36-questions-to-ask-your-future-software-employer-552g --- # 可以問人資的問題 面試通常會先跟人資聊聊,有些問題可以先問他們。建議可以問一下公司的運作方式以及面試流程。 ## 關於職位 **1. 公司為什麼要招人?** 這是個暖身問題。可以了解公司的大致狀態。缺人是因為在擴編?還是有人剛離職呢? **2. 這個職位上一個人怎麼樣了?他們是辭職了,還是被開除?** 如果不是擴編,那可以先搞清楚這職位剛發生什麼事。弄清楚這段,可以更了解公司對這個職位的期望。 **3. 公司的離職率是多少?去年僱用了多少開發人員,又有多少人辭職了?團隊中待最久、跟最新進的人員分別是多久?** 這問題可以嗅出一些端倪。高流動率代表工作條件有點問題。可能得不到直接答覆,但別擔心,後面的流程有機會深入討論。 **4.到職流程如何運作?面試過程的下一步是什麼?** 獲取準備下一步所需的資訊。 ## 關於員工生活 **5. 公司是否投資於員工發展、培訓或認證?是否有用於學習活動或參加研討會的預算?** 公司當然喜歡積極進修的員工。所以員工至少要有一點時間能學習或參加活動。如果他們有提供進修預算,那非常加分。 **6. 公司允許遠端工作嗎?我應該在辦公室待多少天?遠端工作者的比例是多少?** 疫情讓遠端成為常態。有些公司 100% 遠端工作。有些公司則是混合辦公。你需要知道公司是哪種 。如果是完全遠端,你要問一下有沒有定期的團建活動,或是聚餐之類的。 **7. 有補助去共享空間工作嗎?** 有些人在家很難專心。這時可以考慮去租共享工作空間。 **8. 有育嬰假嗎?有無薪假嗎?病假和特休等等,怎麼安排?** 如果應徵公告沒有寫清楚,你可以這時先問清楚相關規則。 --- # 技術面試後要問的問題 這時你應該在跟技術人員交談。可能是未來的同事、技術主管、或技術長。 藉此機會暸解工作環境。有些問題可以防止踩雷。 ## 關於每日作息 **9. 通常我一周開幾次會議?** 會議一定會有,但有些公司實在開太多了。這問題可幫助評估,工作時會不會一直被打斷。 **10. 公司有 CI/CD 嗎?或者其他開發流程呢?** DevOps、Scrum、Lean 和 Agile 等術語已被濫用到沒什麼意義了。CI/CD 的意義清楚多了。公司有實踐嗎?如果沒有,代表團隊依賴手動部署、測試。 當然,也有CI/CD不可行的地方。但 99% 的情況下,利大於弊。 **11. 多久部署一次?如何部署?** 關於 CI/CD ,需要知道一天部署幾次。這代表部署流程多順暢。 除非是受到政府監管的產業,不然手動、久久部署一次,代表緩慢又低效率的開發文化。 **12. 你們使用 TDD 還是 BDD?如何寫測試?** 測試驅動開發和行為驅動開發對生產力很有幫助。無論是不是在測試團隊,都應該知道一下公司的測試習慣。如果公司完全不寫測試,那就要小心了。 **13. 你們如何追蹤錯誤/問題?寫功能和修理之間的比例是多少?** 這能幫助了解技術債。有技術債是正常的,但如果太多,你可能就一直在救火、整理超亂的程式碼。 **14. 你們偏好哪種:系統穩定或者快速上新功能?你們對技術債的態度是什麼?** 直接問技術債的態度,但也要知道滿足客戶需求的重視程度。 **15. 文件完整嗎?有程式碼風格指南嗎?有現成的測試規格嗎?** 了解一下文件的習慣。可以詢問 API 規範、技術文件、風格指南、用戶故事之類的。文件不夠通常代表你需要一直開會、一直詢問同事。 測試本身就是一種文件,所以有寫測試也很重要。 ## 工具和文件 **16. 使用什麼版本控制系統?** 如果沒有在用版本控制,建議直接換別間面試。除非你在面試技術長或者技術副總之類的。這情況,要詢問能否導入。如果能,你需要很痛苦的花幾個月導入,談薪水的時候要一併考慮進去。 **17. 使用什麼技術/語言/框架?** 不熟悉也沒關係。通常幾週內就都能上手。 **18. 我可以使用我 ${最愛的 IDE} 嗎?** 用自己最愛的,最棒。 **19.公司有提供設備嗎?我有設備的全部權限嗎?我可以用自己的設備嗎?** 如果在自己的電腦上沒有根權限,代表公司不信任員工。 ## 開發團隊文化 **20. 你為什麼選擇加入這家公司?** 如果跟面試官聊開了,請問一些個人問題。了解你將要為之工作或與之共事的人的價值觀,是很有價值的。 **21. 團隊有多大?新手與資深工程師的比例是多少?** 試著深入了解團隊組成與規模。如果你是應徵初階職位,同事大部分都是資深人士,那就是好事一件。 **22. 有多少女性員工?公司有確保員工多樣性的流程嗎?** 了解一下團隊都是同一種人、或者具有很高多樣性。這對工作氛圍也有影響。 **23. 你在這家公司犯過的最大錯誤是什麼?** 我喜歡這個問題,因為它與「生成式文化」的概念有關。生成式文化是一種風險共擔、鼓勵創新、人們不會因失敗而受到譴責(而是被用作學習機會)的文化。 當人們在心理上感到安全,他們會把握更多機會並進行更多嘗試,從而實現創新。 反例則是,病態或官僚文化。在這種情況下,人們傾向於「謹慎行事」——以免因失敗而受到懲罰。這絕對是很差的工作環境,對你的工作跟心情都很不好。 ## 工作與生活的平衡 **24. 人們平均每週工作多少小時?人們通常什麼時候下班?** 你需要每天早點回家、好好享受生活,才能持續打拼。長期過勞代表團隊生產力很差,只能透過加班彌補。 **25. 有 on-call 的時間表嗎?標準工時以及您對加班的期望?我將多久 on-call 一次?緊急情況或人們被迫加班的頻率有多高?** 這個問題是對上一個問題的補充。一個月通常要加班幾次? 大量加班、習慣性的周末工作以及不頻繁、手動部署,是工作與生活不平衡的跡象。如果公司有這些危險信號,請繼續貨比三家。 **26. 我是否需要一直在 Slack/Teams 上面,還是可以分批處理我的工作?** 我常常在沒有鍵盤的時候解決問題。常常在散步或洗澡的時候有新想法。能夠離開電腦散步一下,生產力會更好。 --- # 向經理、首席執行長或創辦人提出的問題 痛苦的技術面試完成後,你可能會見到經理、首席執行長、甚至創辦人。可以把握機會了解公司在市場上的表現、也能讓公司知道你對公司很有興趣。 ## 關於公司 **27. 有公司運作 SOP 嗎?** 查看各種 SOP 可以知道公司的運作方式,讓新員工快速進入狀況。 **28. 公司是怎麼賺錢的?損益兩平了嗎?成長速度有多快?** 如果在面試新創公司,獲利需要好幾年的時間,而且機率不高。所以,你其實正在賭一個高風險、高報酬的事情。 您的專業成長通常會反應到公司的成長。如果你追求穩定並打算待好幾年,那麼選擇一家現金流穩定的老牌公司比較好。 **29. 公司或團隊現在面臨的最大挑戰和機會是什麼?** 開放式問題可以讓你深入了解公司的目標和管理層的心態。檢查您的職涯目標是否與公司的目標一致。 **30. 您認為未來 5/10 年後,公司會在哪?** 面試的時候,被問這個是最難回答的。所以你當然也要問公司,這樣才公平。 **31. 公司如何設定季度/年度目標?這一季/今年的目標是?** 如果沒有公司或團隊目標,那麼您要么是在與錯誤的人交談,要么是在與錯誤的公司交談。 對公司的目標表現出興趣,更重要的是,了解當季、當年的優先事項。是否使用 OKR 管理?如果沒有,那是用什麼規劃目標?如何評估成效? ## 關於職位 **32. 你如何定義我這個職位的成功?你希望我在頭 3 個月內完成什麼?您將如何評估我在試用期的表現?您如何確定某人是否適合您的公司?** 你需要了解試用期如何評估。 **33. 績效考核如何進行?升遷流程如何運作?績效考核與加薪掛鉤嗎?** 您和您的主管可能對成功有不同定義。但績效評估使您、您的主管和公司保持一致。雖然很可怕,但能促進人員和公司的持續改進。這是主管提供回饋、認可成就並提供職業發展指導的好時間。 沒有績效評估,就沒有回饋,晉升或加薪的機會也很小。 **34. 我有多少自主權來決定要做什麼?工作的優先順序如何?是否有分配用於副專案/實驗的時間?** 弄清楚有多大自主空間,藉此了解團隊目前專注什麼。 如果有分配用於副專案/實驗的時間,那就太幸運囉。 ## 提升職業生涯 **35. 我的主管會定期進行一對一的交流嗎?** 一對一對於讓你和主管保持一致非常重要 **36. 我可以為 XXX 開源專案做貢獻嗎?可以去研討會演講嗎?是否需要任何批准?** 如果你有這些興趣,就要問問。這些都是職業發展的寶貴機會。 --- # 結論 公司會展現好的一面,吸引面試者。你需要看穿表面宣傳、弄清楚真實狀況。找到有興趣的問題,不斷提問,直到放心為止。 不要問你本來就該知道的事情。職位描述看清楚,公司網站跟之前的對話看清楚,問重複問題會很鳥。 祝你好運,感謝閱讀!

工程師大補丸:五個整理了大量學習資源的 github 專案

Github 是開發人員互相分享的寶庫。可以在上面找到任何與軟體工程有關的東西。就跟一般礦山一樣,要懂得採礦,才能得到有價值的礦物。 我一直在尋找 github 上面的寶庫,以下列出五個優質寶庫: - 原文出處:https://dev.to/wizdomtek/5-github-repositories-every-developer-should-know-1p93 # 1. Professional Programming 整理了大量經典書籍、優質網站的專案。 閱讀相關內容會有點花時間,但如果你想要持續提升自己,那這專案很適合你。 https://github.com/charlax/professional-programming # 2. Web Dev For Beginners 這是由 Microsoft 的 Azure Cloud Advocates 團隊,提供的 12週、24週線上課程。通通關於 JavaScript、CSS 和 HTML 基礎知識。每節課都包括課前和課後測驗、內容說明、解決方案、作業等。這種以寫專案為主的教學法,讓您一邊開發、一邊學習,是一種讓有效學習新技能的方法。 https://github.com/microsoft/Web-Dev-For-Beginners # 3. The art of command line 命令列是一門藝術,每個開發人員都有自己的使用習慣。最有用的指令是 man,可以用來查詢各種指令。 這個專案列出了各種常用指令與說明,值得一讀。 https://github.com/jlevy/the-art-of-command-line # 4. Project Based Learning 以專案開發為主的一系列學習資源。由一群熱心分享的工程師所整理。內含多種程式語言。 動手開發是學習程式設計的最好方法。不斷解決問題時,同時學習了知識。因為有了目標,大腦的記憶也更有效率。 https://github.com/practical-tutorials/project-based-learning # 5. Every Programmer Should Know 無論您有多熟練,您對技術的了解可能永遠都不夠。 聽起來很刺耳,但這句話是真的。技術世界太廣闊了,不可能了解一切。但這不是停止學習的理由。 瀏覽此專案,可以掌握很多新知識。 如果您想學習一些新鮮有趣的東西,可以將它當成學習工具。 https://github.com/mtdvio/every-programmer-should-know --- 以上,歡迎有空逛逛這些資源,祝您不斷變強。

7個超特別的工程師作品集網頁:讓您大開眼界

工程師要怎麼設計作品集網頁呢?來看看這些人的網頁,或許能給你一些靈感! - 原文出處:https://dev.to/ruppysuppy/7-developer-portfolio-for-inspiration-4no7 # 1. Bruno Simon 如果您有試過開發 3D 網站,那你一定聽過 Bruno Simon。他是 Three.js Journey 的作者。從他的作品集就可看出為什麼他是這個領域的高手。 他的作品集網站,本身就是一個電玩遊戲。你可以在裡面控制吉普車,在 3D 世界裡面開車,然後可在裡面探索他的作品集世界。這網站可說是作品集網站的巔峰之作。 https://bruno-simon.com/ ![](https://imgur.com/kqpLGNH.png) # 2. Robby Leonardi 另一個超厲害的作品集網站!Robby Leonardi 的作品集是一個互動式的履歷表,往下滑就可以瀏覽他的作品、看到更多個人資訊。 http://www.rleonardi.com/interactive-resume/ ![](https://imgur.com/tZ6QJcX.png) # 3. Nitin Ranganath 一個有創意、又很新潮的網站!整個作品集頁面,看起來就像是 VS Code 編輯器! https://vscode-portfolio.vercel.app/ ![](https://imgur.com/4ePEkBe.png) # 4. Dejan Markovic 與傳統網頁設計的風格大相徑庭,但實際操作起來,卻非常順暢、巧妙! https://www.dejan.works/ ![](https://imgur.com/w0jf0i6.png) # 5. Hype4 極簡主義風格的網站,具有超級簡潔、專業的設計感。 https://hype4.com/ ![](https://imgur.com/FhT8j3c.png) # 6. Jacek Jeznach 利用微互動來提高留存率的絕佳範例。雖然網站上的廣告很煩人,但對於互動細節的設計,值得您親自見識一下! https://jacekjeznach.com/ ![](https://imgur.com/NR7v2KV.png) # 7. Tapajyoti Bose 最後一個範例讓我老王賣瓜一下!😜 我做了一個帶有滾動特效的單頁式作品集網站! https://tapajyoti-bose.vercel.app/ ![](https://imgur.com/GpmgsPC.png) --- 以上,希望大家覺得有趣、有啓發性!

軟體工程師必看:20個提高生產力的簡單方法!

每個人都想提高生產力,但該如何提高呢?此文章整理20種簡單、我親自試過、且有效的方法!希望對大家有幫助! - 原文出處:https://dev.to/code_jedi/20-easy-ways-to-be-more-productive-as-a-developer-5f99 # 1. 時間箱子 將您的時間當成多個箱子安排,例如: ``` 9:30 --> 10:00 回電子郵件 10:00 --> 12:00 處理新登錄頁面的設計與功能 12:00 --> 13:00 午餐和休息 13:00 --> 15:00 編輯文件 15:00 --> 17:30 動手重新設計登陸頁 ``` # 2. 深度工作 深度工作是一種強調進入狀態來提高工作效率的方法。這方法希望你嘗試長時間(2 到 3 小時)不被打斷地工作,讓你進入一種心流狀態。然後,當你處於那種狀態時,就不太會被中斷、就不會在工作上又拖拖拉拉的。 # 3. 80/20 法則 80/20 法則也稱為柏拉圖法則,它鼓勵您專注在最高價值的工作。這法則認為您 80% 的產出往往來自您 20% 的努力。這方法的重點在於要認出哪些任務最重要、能夠提供最大的回報。重點在於將心力花在「正確的任務」上,而不要浪費時間在次要細節上。 # 4. 三的法則 對於那些常常寫下一堆待辦事項,卻沒完成幾件的人來說,這法則會很有幫助。您需要找出最重要、有意義的三件事情。要列出的不是任務本身,而是明確的結果。比方說「部署 AWS 應用程式」。每天都安排三件明確、有意義的事情,就可以不斷提醒自己,什麼是最重要的、最需要關心的。這個小技巧的效果非常巨大。 # 5. 做點小事情 我們都有那種感覺整天什麼都做不了的經驗。覺得沒有任何動機與精力、好像做什麼都沒力氣。發生這種情況時,最好的辦法就是做點小事情。在房子/公寓周圍做一些家事,寫一些程式碼(未必要與您的工作/專案相關),寫一篇部落格文章。光是做一些小事情,通常就足以將您拉回正軌! # 6. 硬著頭皮開始 想想看你拖延了很久的事情。可能是一個困難的專案,或者是學一些很困難的東西。別再猶豫了,硬著頭皮開始吧。可能會犯一些錯或者看半天看不懂,但只要有了起步,之後一定會慢慢適應的! # 7. 不要重複做工(Don’t Repeat Yourself 原則) 重複使用已經做過的東西(簡稱 DRY 原則),可以節省不少時間。重複做工是很低效且沒必要的。DRY 原則鼓勵您建立工作流程與模板,盡量減少重複做工。程式碼、電子郵件、部落格文章,都可以適用。 # 7. 不要重複做工 開玩笑的哈哈😄 # 8. 兩分鐘法則 如果待辦事項中有兩分鐘內可以完成的任務,就應該立刻去完成再說。這法則讓您可以克服拖延的習慣。如果有一封該回的郵件放著會讓你心煩意亂,但回起來只要兩分鐘的話,那就立刻先回覆。這會讓你覺得有進度,反過來又會激勵自己、增強動力。此外,它還可以幫助您理清思緒,讓您不必再為那些待辦小任務煩惱。 # 9. 單工 多工(一次忙很多事)會降低生產力。單工是鼓勵您一次專注一件事。如此一來,您將花費更少的時間和精力在任務之間來回切換。 # 10. 必須、應該、想要 在一天開工之前,根據以下標準整理一份清單: ``` 我必須 ... 我需要 ... 我想要 ... ``` 這將幫助您確定優先順序與當天的目標。 # 11. 艾森豪矩陣 名字聽起來很花俏,但這方法只是列出所有待辦任務,然後分成四種類別而已。 這四個類別是: ``` 緊急而重要的任務 重要但不緊急的任務 緊急但不重要的任務 不緊急也不重要的任務 ``` 這能幫助您根據類別來安排時間優先順序。 # 12. 生物黃金時間 在一天當中,觀察、發覺您的自然能量水平。 請花幾週時間,記錄您一整天的精力充沛程度。 對於一天中的每個小時,給它一個 1-10 之間的等級(10 是最高能量)。根據結果 - 相應地規劃您的一天作息。如果您在早上精力充沛 – 就在早上做您最需要做的事情。 如果您下午的精力不足 – 將比較不花心力的任務留到下午吧。像是寫電子郵件或寫部落格文章之類的。 # 13. 每週回顧 每週一次,找一個安靜的地方坐坐,在那裡思考和反省一下。如果您想動手紀錄,也可以使用筆記本和筆。 回顧過去一周的工作效率、精力水平、哪些事情對您有用,哪些事情沒有用。 例如: - 早上洗個冷水澡對我的工作效率有幫助。 - 早上吃得太少讓我在接下來的幾個小時裡感覺沒力氣。 除了思考這一周過得如何,您還需要查看您做出了哪些決定以及您想要更改哪些決定。可以想想改善的方法,或者想想哪些事情沒做到。 # 14. 番茄鐘 這可能是最知名的生產力方法了。番茄工作法就是: - 工作 20-30 分鐘 - 休息 5-10 分鐘 - 重複以上 這種方法剛好與深度工作法相反。所以如果深度工作方法對你有用,就不要理會這個,反之亦然。 # 15. 非待辦清單 許多提高效率的方法都會鼓勵您列出某種待辦事項清單。但是,不要做的事情,也可以寫成列表,而且也很有用! 每天開工前,列一個不要做的清單。此列表包含您希望避免做的無用事情,例如使用社群網站、邊上班邊跟朋友聊天、收聽分散您注意力的播客。 如此一來,您就會清楚知道一天中要避免做的無用事情。 # 16. 今天就組織明天 睡覺前組織和計劃明天的任務。如此一來,您就可以在第二天毫不猶豫、也不用計劃就開始這些任務。 # 17. 檢查表清單 對於每件做過多次的事情、或者想完成的複雜任務,創建一個詳細的檢查表清單,列出你需要做什麼才能正確完成它。 例如: ``` 寫部落格文章 * 寫提綱 * 寫下大概的內容 * 審查和編輯 * 讀過一遍 * 最終檢查和編輯 * 發布 ``` # 18. 不要打斷連續工作日數 這方法希望您能在一段時間內,每天固定有一些進度。每天完成之後,就在日曆標記已完成。像是寫部落格文章、學習新東西、或閱讀30分鐘的書。 做出承諾的前幾天通常是最難的,但渴望改變的心將幫助您度過難關。 隨著連續日數變長,希望連續記錄不被打破,本身就會激勵你繼續前進。 # 19. SMART目標法 SMART 是一個目標設定公式,鼓勵你對於目標盡可能詳細和具體。SMART代表特定的(Specific)、可衡量的(Measurable)、可分配的(Assignable)、實際的(Realistic)、與時間相關的(Time-related)。這意味著當你設定一個目標時,它應該被清楚定義。 包括:你想要達到的目標是什麼、如何衡量成功、誰負責、有基礎、可行、需要在什麼時間範圍內實現。 # 20. 充電法 當你覺得自己累了,不能再工作時,不要逼迫自己,承認你需要休息,然後休息一下。當你精神疲憊時,休息一下通常比逼迫自己更好,原因有 3 個: 1. 你會少犯錯誤 2. 你會減輕壓力 3. 你的頭腦會更清晰 # 結論 希望這些方法,對您有幫助!

寫出優雅 JavaScript 程式碼的 8 個簡單技巧

Javascript 是一個很棒的程式語言,但是,要寫出乾淨的 javascript 程式碼可不簡單,即便是資深工程師也一樣。 乾淨的 JavaScript 程式碼該長怎樣?它應該要: - 易於閱讀 - 易於測試 - 高效和高性能 以下是您可以使用的優質工具和技巧,可將您的 Javascript 功力提升到全新水平: - 原文出處:https://dev.to/alexomeyer/8-must-know-tips-for-writing-clean-code-with-javascript-i4 # 1. 對所有 api 請求和 JSON 方法使用 try catch 發出 api 請求來撈資料時,許多事情都可能出錯,因此必須注意這些情況。在處理 JSON 時,不要自動信任拿到的資料格式,請試著處理可能出乎意料的格式,來讓您的程式碼更健壯。 ![](https://imgur.com/KVzrdd0.png) # 2. 使用 linter (ESLint) linter 是一種靜態程式碼分析工具,可根據一組預定義的規則和配置檢查程式和風格錯誤。簡而言之,它將改進您的 Javascript/Typescript 程式碼品質,並讓風格更加一致。 # 3. 在編輯器中​追蹤 Javascript issues 保持 Javascript 程式庫簡潔的一個重要方式,是能夠輕易追蹤和查看程式碼本身的問題。在編輯器中追蹤 issues 允許工程師: - 全面了解技術債等更大的問題 - 查看每問題的上下文 - 減少上下文前後查看的頻率 - 持續地處理技術債 您可以使用各種工具來追蹤您的技術債,但最快速、最簡單的入門方法是使用與 Jira、Linear、Asana 和其他專案管理工具整合的 VSCode 或 JetBrains 的免費 Stepsize 外掛。 # 4.使用模板字符串 模板字符串讓您在保留格式的同時將值注入字符串,並且程式碼比字串運算更容易閱讀。 ![](https://imgur.com/ccagbwx.png) # 5. 需要搜尋字串時,使用正規表示式 正規表示式雖然乍看之下很深奧,但它是非常強大的字串解析工具,允許您建立複雜的模式來解決各種困難的字串配對情境。 # 6. 使用可選串連運算子 停止使用冗長的邏輯運算子,使用可選串連運算子來簡化您的程式碼。 ![](https://imgur.com/4TtpBdm.png) # 7.避免巢狀結構 巢狀結構絕對會增加程式碼的複雜度,也讓它更難閱讀、更難理解。如果深度超過兩層,請考慮重構,改成在根層就有條件回傳、使用更短小的區塊、並將巢狀邏輯抽像化成獨立的函式。 # 8. 替所有特殊程式碼寫註解,但不要讓它取代程式碼可讀性 有時需要針對特殊情境寫專門處理。替這段程式碼寫註解,解釋它的功能與上下文的由來,這對其他工程師幫助會很大。也能幫助未來重讀這段的自己。但讓程式碼本身就很易讀還是最優先,不要習慣用寫註解來偷懶!

資深軟體工程師:10年經驗教會我的20件事情!

在軟體產業工作超過十年之後,我總結出了二十條原則,跟大家分享如下: - 原文出處:https://dev.to/ondrejsevcik/20-principles-i-learned-from-10-years-of-developing-software-5354 1. **謙虛**——世界上沒有無所不知的工程師,你也一樣。 2. **先讓它能跑,再讓它正確**——可能的話,再讓它更快。 3. **修改時再優化**——寧可出現重複,也不要出現錯誤的抽象化設計。 4. **始終寫測試**——如果您不寫測試,那麼您就是在手動測試。 5. **解決 80% 的使用情境就好**——你永遠無法解決所有人的問題。 6. **盡量用函數式編程**——比較容易理解。如果您的程式碼需要博士學位才能看懂,那你的方法有點問題。 7. **刪除越多程式碼越好** 8. **足夠好勝於完美**——不要僅僅因為它不完美,就放棄有意義的改進。 9. **私下批評,公開表揚** 10. **做筆記**——如果你認為你會記住它,那你就是在自欺欺人。 11. **與您的用戶溝通**——最好的軟體是由對用戶有同理心的工程師開發的。 12. **有意識地學習**——練習時要牢記一個明確而具體的目標 - 你想要改進什麼以及如何改進(刻意練習)。 13. **不要過早概括**——等到你有至少 3 段重複的程式碼,再進行抽象化(又名:三規則)。 14. **修復破損的窗戶**——代碼中的一段技術債會導致另一段技術債。您的程式碼很快將變得難以管理。 15. **解決問題**——不管是誰的錯,都是你要負責解決。 16. **做有用的事,而不是時髦的事**——先和一個小團隊一起嘗試。如果可行,請擴大實施。如果不行,則中止。 17. **良好的休息才有最佳成果**——定期休息對於獲得最佳表現至關重要。你也不會認為專業短跑運動員一直在短跑吧。 18. **採取小步驟**——大的重寫是行不通的。您將在過程中失去動力和注意力。試著每天發布更新。它使您可以在必要時,自由地調整重點。 19. **表揚出色的工作**——我們在動物身上觀察到的這件事,同時也適用於人類。當你表揚人們的好表現而不是懲罰他們的壞表現時,你會得到更好的結果。 20. **完美的代碼不存在**——最好接受這事實,而不是浪費時間、追逐不可能的事情。

給工程師的12個超好用API、可串接大量有趣資料~!

不管是寫程式的新手、老手,在做專案的時候,常常需要資料,來讓專案內容更豐富吧! 這時候需要去找有趣、夠酷、免費的 API 來用! 這篇文章一次整理出 12 個有豐富資料的有趣 API!有空要用用看喔! - 原文出處:https://dev.to/monicafidalgo/12-apis-that-you-as-a-developer-will-love-it-4ec6 # ✨1. PokéAPI 來串寶可夢精靈 API 吧!可以撈到大量神奇寶貝資訊(動作、類型、能力)! - https://pokeapi.co/ - 需要 API 密鑰:否 # ✨2. GIPHY GIPHY 是世界上最大的 GIF 資料庫,可以撈到一大堆梗圖,方便你開發有趣的 side project! - https://developers.giphy.com/ - 需要 API 密鑰:是 # ✨3. Open Weather 串接這個API,馬上得知明天天氣!Open Weather API 收集和處理來自不同來源的天氣數據,例如全球和本地天氣模型、衛星、雷達、各種氣象站資訊! - https://openweathermap.org/api - 需要 API 密鑰:否 # ✨4. {JSON} Placeholder 快速撈一些 json 假資料,方便開發時有資料可以快速測試! - https://jsonplaceholder.typicode.com/ - 需要 API 密鑰:否 # ✨5. SWAPI 電影「星際大戰」API,擁有大量行星、宇宙飛船、車輛、電影和物種的數據~! - https://swapi.dev/ - 需要 API 密鑰:否 # ✨6. NASA NASA 就是美國國家航空暨太空總署,提供大量來自 NASA 的真實數據,包括 NASA 好奇號、機遇號和精神號探測器在火星上收集的圖像數據! - https://api.nasa.gov/ - 需要 API 密鑰:是 # ✨7. Unsplash 由大量攝影師上傳照片的優質圖片資料庫!開發網站首頁、串接漂亮照片的必備 API 網站! - https://unsplash.com/developers - 需要 API 密鑰:是 # ✨8. Dev.to dev.to 是國外一個開發者討論區,在上面寫文章的話,可以透過 API 把文章撈出來! - https://developers.forem.com/api - 需要 API 密鑰:否 # ✨9. Breaking Bad Netflix 神劇,《絕命毒師》的的 API。它可以讓你拿到劇中名言、人物、集數、各式死亡資訊! - https://breakingbadapi.com/documentation - 需要 API 密鑰:否 # ✨10. Random Data 想發揮創意並在專案中使用各種奇怪資料嗎?也許是一款隨機獲得啤酒或電腦的遊戲?試試看隨機資料 API 吧~! - https://random-data-api.com/documentation - 需要 API 密鑰:否 # ✨11. Rest Countries Rest Countries 讓您可以通過 RESTful API 拿到有關各個國家/地區的大量豐富資訊~! - https://restcountries.com/#rest-countries - 需要 API 密鑰:否 # ✨12. Rick and Morty Rick and Morty 系列很受工程師歡迎!這個 API 可以讓你按劇集、角色、地點進行查詢~! - https://rickandmortyapi.com/documentation - 需要 API 密鑰:否