一行程式碼有時可以做到很多事。這邊有七個小任務都用一行就可以完成,給您參考!
在需要將陣列隨機打亂的時候,這行會很好用。
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)}`;
謝謝閱讀,希望對您有幫助!