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

👉 讀技術文章  👉 上自學課程  👉 討論區交流
最新出爐教材
⭐ 自學網頁の嬰兒教材：JavaScript（十）—— 玩玩看 Node，做做看老派 CLI 應用程式
⭐ Git 入門上手教材 —— 基本觀念與指令玩玩看
⭐ 自學網頁の嬰兒教材：JavaScript（九）—— 不想教你 Vue，只想讓你做酷炫元件
⭐ 自學網頁の嬰兒教材：JavaScript（八）—— 不想教你 Vue，只想讓你寫有趣專案
⭐ 自學網頁の嬰兒教材：JavaScript（七）—— 不想教你 Vue，只想教你怎麼學框架

🔍 搜尋結果：20個

🔍 搜尋結果：20個

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留言 460瀏覽

軟體工程師必看：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留言 1,351瀏覽
熱門文章
🔥 最新 js 教材上線：玩玩看 Node，做做看老派 CLI 應用程式
🔥 常常懷疑自己該不該繼續走程式設計？簡單分享幾個觀點
🔥 工作上遇到CSS權重的問題
🔥 個人頁面小更新：增加貼文瀏覽統計
🔥 增加開發者生產力：19 個簡單好用的 VScode 外掛
  近期留言
熱門搜尋： C JavaScript JavaScript 系列 系列 c onclick typescript Java jav hooks 搜尋 react ci 嬰兒 console 自學網頁の嬰兒教材 . API ajax todo 系列五 angular 20 Vue 測試 英文 vue this local storage api javascript birdi Hook jquery OOP local REACT git Git jqu React html fetch 練習 result hoisting birdie 2023 HTML model Ai 工程師的缺德行為 textarea 面試 oop 寫測試 單元測試 restcountries laravel Node java signals 轉職 謝謝 BASIC for JavaScript 自學網頁の嬰兒教材 MVC mail 20個 discord JavaScript' useRef 導覽列 codesandbox Toptal side project history for of Django signal globalthis lissy93 AI 取代 html' android 履歷 PYTHON todolist clean 偽類 callback computed C# Cpu 給新手 react strict svelte todol
每日接收程式設計新知，軟體工程師們一起來學習！
🛡️ 隱私及網站安全：本站註冊過程「不須提供任何個資」，只要 E-Mail 與帳密即可註冊，請安心註冊！線上付款過程使用「綠界科技 ECPay 」第三方專業金流廠商，全程在「綠界科技 ECPay 」網站進行付款程序，本站「不會紀錄任何信用卡資訊」，請放心付款、解鎖課程！您隨時可以透過 FB 粉專或者 Email 聯絡站長，請求刪除網站上的個人資料。