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

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

🔍 搜尋結果：20個

20 個最優質/最豐富的 icon 圖示庫

0個讚 0留言 93瀏覽

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

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 ``` --- 希望這些程式碼，有給您一些靈感！

0個讚 0留言 742瀏覽

小編精選 - 技術文章翻譯 · 11月30日

軟體工程師必看：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. 你的頭腦會更清晰 # 結論希望這些方法，對您有幫助！

0個讚 0留言 2,134瀏覽

歡迎發文

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

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

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

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

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