阿川私房教材:學程式,拿 offer!

63 個專案實戰,直接上手!
無需補習,按步驟打造你的面試作品。

立即解鎖你的轉職秘笈

一行程式碼有時可以做到很多事。這邊有七個小任務都用一行就可以完成,給您參考!

洗亂陣列

在需要將陣列隨機打亂的時候,這行會很好用。

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)}`;

謝謝閱讀,希望對您有幫助!

按讚的人:

共有 0 則留言


精選技術文章翻譯,幫助開發者持續吸收新知。

阿川私房教材:學程式,拿 offer!

63 個專案實戰,直接上手!
無需補習,按步驟打造你的面試作品。

立即解鎖你的轉職秘笈