JavaScript是網(wǎng)絡(luò)開發(fā)中最關(guān)鍵的支柱。

這篇文章包含了由無菌手套手工挑選的代碼片段，并放置在一個(gè)綢緞?wù)眍^上。
一個(gè)由50人組成的團(tuán)隊(duì)檢查了這些代碼，并確保其在發(fā)布前處于高度拋光狀態(tài)。我們來自瑞士的文章發(fā)布專家點(diǎn)燃了一支蠟燭，當(dāng)他將代碼輸入金錢所能買到的最好的鑲金鍵盤時(shí)，人群中一片噓聲。

我們都有一個(gè)美妙的慶祝活動(dòng)，整個(gè)聚會(huì)沿著街道行進(jìn)到咖啡館，整個(gè)加爾各答鎮(zhèn)都向文章發(fā)布到網(wǎng)上時(shí)揮手致意 "一路順風(fēng)！"。

祝您閱讀愉快!

數(shù)組亂序

在使用需要某種程度的隨機(jī)化的算法時(shí)，你會(huì)經(jīng)常發(fā)現(xiàn)洗牌數(shù)組是一個(gè)相當(dāng)必要的技能。下面的片段以O(shè)(n log n)的復(fù)雜度對一個(gè)數(shù)組進(jìn)行就地洗牌。

const shuffleArray = (arr) => arr.sort(() => Math.random() - 0.5) 。
// 測試
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
console.log(shuffleArray(arr))。

復(fù)制到剪貼板

在Web應(yīng)用程序中，復(fù)制到剪貼板因其對用戶的便利性而迅速流行起來。

const copyToClipboard = (text) =>
  navigator.clipboard?.writeText && navigator.clipboard.writeText（text）。
// 測試
copyToClipboard("Hello World!")。

注意：根據(jù)caniuse，該方法對93.08%的全球用戶有效。所以必須檢查用戶的瀏覽器是否支持該API。為了支持所有用戶，你可以使用一個(gè)輸入并復(fù)制其內(nèi)容。

數(shù)組去重

每種語言都有自己的哈希列表的實(shí)現(xiàn)，在JavaScript中，它被稱為Set。你可以使用Set數(shù)據(jù)結(jié)構(gòu)輕松地從一個(gè)數(shù)組中獲得唯一元素。

const getUnique = (arr) => [...new Set(arr)]。
// 測試
const arr = [1, 1, 2, 3, 3, 4, 4, 5, 5];
console.log(getUnique(arr))。

檢測黑暗模式

隨著黑暗模式的普及，如果用戶在他們的設(shè)備中啟用了黑暗模式，那么將你的應(yīng)用程序切換到黑暗模式是非常理想的。幸運(yùn)的是，可以利用媒體查詢來使這項(xiàng)任務(wù)變得簡單。

const isDarkMode = () =>
  window.matchMedia &&
  window.matchMedia("(prefers-color-scheme: dark)").matches。
// 測試
console.log(isDarkMode())。

根據(jù)caniuse的數(shù)據(jù)，matchMedia的支持率為97.19%。

滾動(dòng)到頂部

初學(xué)者經(jīng)常發(fā)現(xiàn)自己在正確滾動(dòng)元素的過程中遇到困難。最簡單的滾動(dòng)元素的方法是使用scrollIntoView方法。添加行為。"smooth "來實(shí)現(xiàn)平滑的滾動(dòng)動(dòng)畫。

const scrollToTop = (element) =>
  element.scrollIntoView({ behavior: "smooth", block: "start" })。

滾動(dòng)到底部

就像scrollToTop方法一樣，scrollToBottom方法也可以用scrollIntoView方法輕松實(shí)現(xiàn)，只需將塊值切換為結(jié)束即可

const scrollToBottom = (element) =>
  element.scrollIntoView({ behavior: "smooth", block: "end" })。

生成隨機(jī)顏色

你的應(yīng)用程序是否依賴隨機(jī)顏色的生成？不用再看了，下面的代碼段可以滿足你的要求

const generateRandomHexColor = () =>
  `#${Math.floor(Math.random() * 0xffffff) .toString(16)}`;

點(diǎn)擊左下角閱讀原文，到 SegmentFault 思否社區(qū) 和文章作者展開更多互動(dòng)和交流，掃描下方”二維碼“或在“公眾號(hào)后臺(tái)“回復(fù)“ 入群 ”即可加入我們的技術(shù)交流群，收獲更多的技術(shù)文章~

- END -