10 個(gè) JavaScript 單行代碼 - 提高你的工作效率

KIUcOgG_xg7rje.png

全世界有超過(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

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末早歇,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子讨勤,更是在濱河造成了極大的恐慌箭跳,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,378評(píng)論 6 516
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件潭千,死亡現(xiàn)場(chǎng)離奇詭異谱姓,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)脊岳,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,970評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門(mén)逝段,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)垛玻,“玉大人,你說(shuō)我怎么就攤上這事奶躯≈阕” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 168,983評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵嘹黔,是天一觀的道長(zhǎng)账嚎。 經(jīng)常有香客問(wèn)我,道長(zhǎng)儡蔓,這世上最難降的妖魔是什么郭蕉? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 59,938評(píng)論 1 299
  • 正文 為了忘掉前任,我火速辦了婚禮喂江,結(jié)果婚禮上召锈,老公的妹妹穿的比我還像新娘。我一直安慰自己获询,他們只是感情好涨岁,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,955評(píng)論 6 398
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著吉嚣,像睡著了一般梢薪。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上尝哆,一...
    開(kāi)封第一講書(shū)人閱讀 52,549評(píng)論 1 312
  • 那天秉撇,我揣著相機(jī)與錄音,去河邊找鬼秋泄。 笑死琐馆,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的印衔。 我是一名探鬼主播啡捶,決...
    沈念sama閱讀 41,063評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼奸焙!你這毒婦竟也來(lái)了瞎暑?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 39,991評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤与帆,失蹤者是張志新(化名)和其女友劉穎了赌,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體玄糟,經(jīng)...
    沈念sama閱讀 46,522評(píng)論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡勿她,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,604評(píng)論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了阵翎。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片逢并。...
    茶點(diǎn)故事閱讀 40,742評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡之剧,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出砍聊,到底是詐尸還是另有隱情背稼,我是刑警寧澤,帶...
    沈念sama閱讀 36,413評(píng)論 5 351
  • 正文 年R本政府宣布玻蝌,位于F島的核電站蟹肘,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏俯树。R本人自食惡果不足惜帘腹,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,094評(píng)論 3 335
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望许饿。 院中可真熱鬧阳欲,春花似錦、人聲如沸米辐。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,572評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)翘贮。三九已至,卻和暖如春爆惧,著一層夾襖步出監(jiān)牢的瞬間狸页,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,671評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工扯再, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留芍耘,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 49,159評(píng)論 3 378
  • 正文 我出身青樓熄阻,卻偏偏與公主長(zhǎng)得像斋竞,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子秃殉,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,747評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容