全世界有超過(guò) 1000 萬(wàn) Javascript 開(kāi)發(fā)人員看铆，而且這個(gè)數(shù)字每天都在增加楼镐。盡管 JavaScript 以其動(dòng)態(tài)特性而聞名，但它還具有許多其他出色的特性充活。在這篇博客中硼砰，我們將看到 10 個(gè)有用的 JavaScript 單行代碼且蓬，你應(yīng)該知道它們來(lái)提高你的工作效率。
1题翰、生成一個(gè)范圍內(nèi)的隨機(jī)數(shù)
在很多情況下恶阴，我們需要在一個(gè)范圍內(nèi)生成一個(gè)隨機(jī)數(shù)。Math.random() 函數(shù)可以為我們生成一個(gè)隨機(jī)數(shù)豹障，然后我們可以將其轉(zhuǎn)換為我們想要的范圍冯事。
const max = 20;
const min = 10;
// Math.floor() 返回小于或等于一個(gè)給定數(shù)字的最大整數(shù)。
// Math.random() 返回一個(gè)浮點(diǎn)型偽隨機(jī)數(shù)字沼填，在0（包括0）和1（不包括）之間桅咆。
const random = Math.floor(Math.random() * (max - min + 1)) + min;
console.log(random);
//output: 17
//output: 10
2、反轉(zhuǎn)字符串
有幾種不同的方法可以反轉(zhuǎn)字符串坞笙。這是最簡(jiǎn)單的一個(gè)岩饼，使用 split() 、reverse() 和 join() 方法薛夜。
split()方法使用指定的分隔符字符串將一個(gè)String對(duì)象分割成子字符串?dāng)?shù)組籍茧。reverse()方法將數(shù)組中元素的位置顛倒，并返回該數(shù)組join()方法將一個(gè)數(shù)組（或一個(gè)類數(shù)組對(duì)象）的所有元素連接成一個(gè)字符串并返回這個(gè)字符串梯澜。如果數(shù)組只有一個(gè)項(xiàng)目寞冯，那么將返回該項(xiàng)目而不使用分隔符。
const reverse = (str) => str.split('').reverse().join('');
const str = 'hello world';
console.log(reverse(str));
// output: dlrow olleh
3晚伙、生成一個(gè)隨機(jī)的十六進(jìn)制碼
適用于元素隨機(jī)顏色生成的場(chǎng)景
-
padEnd()方法會(huì)用一個(gè)字符串填充當(dāng)前字符串（如果需要的話則重復(fù)填充）吮龄，返回填充后達(dá)到指定長(zhǎng)度的字符串。從當(dāng)前字符串的末尾（右側(cè)）開(kāi)始填充咆疗。
const color =
'#' +
Math.floor(Math.random() * 0xffffff)
.toString(16)
.padEnd(6, '0');
console.log(color);
//output: #ed19ed
4漓帚、數(shù)組隨機(jī)排序
在使用隨機(jī)算法時(shí)，數(shù)組的隨機(jī)排序是一項(xiàng)經(jīng)常用到的場(chǎng)景午磁，在 JavaScript 中尝抖，我們沒(méi)有模塊像python 中的 random.shuffle() 方法一樣實(shí)現(xiàn)數(shù)組元素的隨機(jī)排序毡们，但仍然有一種方法只需一行代碼就可以將數(shù)組的所有元素隨機(jī)排序。
const shuffleArray = (arr) => arr.sort(() => 0.5 - Math.random());
const arr = Array.from({ length: 10 }, (_, i) => i + 1);
console.log('array: ', arr);
console.log('shuffled array: ', shuffleArray(arr));
//output:
// array: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
// shuffled array: [5, 7, 8, 9, 1, 2, 3, 4, 10, 6]
5昧辽、滾動(dòng)到頂部/滾動(dòng)到底部
初學(xué)者經(jīng)常會(huì)發(fā)現(xiàn)自己很難正確地將元素滾動(dòng)到視圖中衙熔。滾動(dòng)元素最簡(jiǎn)單的方法是使用 scrollIntoView() 方法。
//Add behavior: "smooth" for a smooth scrolling animation.
const scrollToTop = (element) =>
element.scrollIntoView({ behavior: 'smooth', block: 'start' });
const scrollToBottom = (element) =>
element.scrollIntoView({ behavior: 'smooth', block: 'end' });
6搅荞、檢查是否有人在使用暗色主題
如果您希望您顯示的內(nèi)容遵循使用您網(wǎng)站的人的配色方案红氯，JavaScript 包含一種檢測(cè)某人是否使用暗色主題的方法，以便您可以相應(yīng)地調(diào)整顏色取具。
const isDarkMode1 =
window.matchMedia &&
window.matchMedia('(prefers-color-scheme: dark)').matches;
// 如果您想將其用作函數(shù)
const isDarkMode2 = () =>
window.matchMedia &&
window.matchMedia('(prefers-color-scheme: dark)').matches;
console.log(isDarkMode1);
console.log(isDarkMode2());
//output:
// true
// true
7脖隶、復(fù)制到剪貼板
將文本復(fù)制到剪貼板非常有用扁耐，也是一個(gè)難以解決的問(wèn)題暇检。您可以在網(wǎng)上找到各種解決方案，但下面的解決方案可能是最簡(jiǎn)潔和最聰明的解決方案之一婉称。
const copyToClipboard = (text) =>
navigator.clipboard?.writeText && navigator.clipboard.writeText(text);
8块仆、獲取兩個(gè)日期之間的天數(shù)
確定如用戶的年齡時(shí)，你必須計(jì)算從某個(gè)時(shí)間點(diǎn)到現(xiàn)在已經(jīng)過(guò)去的天數(shù)王暗。
const ageDays = (old, recent) =>
Math.ceil(Math.abs(old - recent) / (1000 * 60 * 60 * 24)) + ' Day(s)';
const firstDate = new Date('2021-06-10');
const secondDate = new Date('2022-03-03');
console.log(ageDays(firstDate, secondDate));
// output: 266 Day(s)
9悔据、獲取隨機(jī)布爾值
Javascript 中的 Math.random 函數(shù)可用于生成范圍之間的隨機(jī)數(shù)。要生成隨機(jī)布爾值俗壹，我們需要隨機(jī)獲取 0 到 1 之間的數(shù)字科汗，然后檢查它是大于還是小于 0.5。
const randomBoolean = () => Math.random() >= 0.5;
console.log(randomBoolean());
// output: false
10绷雏、 檢查當(dāng)前用戶是否在蘋(píng)果設(shè)備上
我們可以使用 navigator.platform 來(lái)檢查瀏覽器運(yùn)行的平臺(tái)头滔。
const isAppleDevice = /Mac|iPod|iPhone|iPad/.test(navigator.platform);
console.log(navigator.platform);
console.log(isAppleDevice);
// output:
// Win32
// false
注意：此屬性的推薦替代方案是 navigator.userAgentData.platform。但是涎显，navigator.userAgentData.platform 還沒(méi)有被一些主流瀏覽器支持坤检，并且定義它的規(guī)范還沒(méi)有被任何標(biāo)準(zhǔn)組采用（具體來(lái)說(shuō)，它不是 W3C 或 WHATWG 發(fā)布的任何規(guī)范的一部分）期吓。
————————————————
本文由木偶筆記發(fā)表于 2022-04-02
轉(zhuǎn)載請(qǐng)務(wù)必保留本文鏈接：https://www.muouseo.com/article/8loyn2ryz3.html
