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