九個為初學(xué)開發(fā)者準(zhǔn)備 JavaScript 單行代碼
JavaScript 可以做很多令人驚奇的事情!從復(fù)雜的框架到處理 API,有很多東西要學(xué)。但是,它還使你能夠僅使用一行代碼來完成一些很棒的事情。我們今天就一起來看看9 個適用于初學(xué)開發(fā)者的 JavaScript 單行代碼!
1. 隨機(jī)排列數(shù)組
一個超級簡單的函數(shù),它接受一個數(shù)字?jǐn)?shù)組作為參數(shù),并將其全部打亂!
const shuffleArray = (arr) => arr.slice().sort(() => Math.random() - 0.5)
console.log(shuffleArray([1, 2, 3, 4, 5, 6]))
2.Throwdice
另一個使用隨機(jī)方法的 JavaScript 是這段代碼,用random方法返回一個 1 到 6 之間的數(shù)字。
const throwdice = () => ~~(Math.random() * 6) + 1;
throwdice();
throwdice();
throwdice();
3.檢測暗模式
可以使用下面的 JavaScript 來實現(xiàn)暗模式的檢測:
const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
4. 檢查代碼是否在瀏覽器中運(yùn)行
你可能知道,JavaScript 代碼可以在各種不同的地方運(yùn)行!在服務(wù)器、終端,或者最常見的是在瀏覽器中。
如果你只想在 Web 瀏覽器上運(yùn)行代碼的某個部分時才執(zhí)行它,你可以使用下面的代碼來檢查它!
const isBrowser = typeof window === 'object' && typeof document === 'object';
5. 獲取 Cookie 的值
現(xiàn)在幾乎在每個網(wǎng)站上,你基本都無法再繞過它們了。
如果你想獲取一個你知道名字的特定cookie的值,你可以使用下面的函數(shù)來獲取它!
const cookie = name => `; ${document.cookie}`.split(`; ${name}=`).pop().split(';').shift();
cookie('_ga');
cookie('lang');
6. 創(chuàng)建過去 7 天的數(shù)組
一個非??岬募记?,它返回一個包含過去 7 天的數(shù)組,包括當(dāng)天。
你可以將 - 換成 +,然后,你將獲得接下來的 7 天!
const pastSevenDays = [Array(7).keys()].map(days => new Date(Date.now() - 86400000 * days));
console.log(pastSevenDays);
const comingSevenDays = [Array(7).keys()].map(days => new Date(Date.now() + 86400000 * days));
console.log(comingSevenDays);
7.交換兩個變量
現(xiàn)在這是一個超級基本的例子,我在幾年后才發(fā)現(xiàn)!簡單地交換兩個變量的值顯然超級簡單。
let a = 1
let b = 2
[a, b] = [b, a];
console.log(a)
console.log(b)
8. 將字符串轉(zhuǎn)換為 URL Slug
從字符串到 URL slug 可能是一個棘手的邏輯。
我們可以使用一個小的 RegEx 來解決這個問題,它會刪除特殊字符并在單詞之間添加一個“-”。
一探究竟!
const slugify = string => string.toLowerCase().replace(/\s+/g, '-').replace(/[^\w-]+/g, '');
slugify('Episode IV: A New Hope');
9. 生成隨機(jī)十六進(jìn)制顏色
你可能永遠(yuǎn)不知道何時需要隨機(jī)的十六進(jìn)制顏色值。我們可以使用下面的這個 JavaScript 單行代碼來生成一個隨機(jī)的十六進(jìn)制顏色代碼。
const randomHexColor = () => '#' + (0x1000000 + Math.random() * 0xffffff).toString(16).slice(1, 6);
randomHexColor()
randomHexColor()
randomHexColor()
寫在最后
以上就是我今天跟你分享的9個適合初學(xué)開發(fā)者學(xué)習(xí)JavaScript的知識內(nèi)容,希望對你有用,如果你覺得有用的話,請點贊我,關(guān)注我,同時不要忘記將這篇文章分享給想學(xué)習(xí)JavaScript的朋友們。
最后,非常感謝你閱讀到此,祝編程愉快!