13個常用的JavaScript程式碼片段

「來源: |web前端開發 ID:web_qdkf」

13個常用的JavaScript程式碼片段

JavaScript 可以做很多好玩的事, 從複雜的框架到處理API,有太多的東西需要學習。但是,它也能讓我們只用一行就能做一些了不起的事情。

1、獲得一個隨機的布林值(true/false)

該函式使用Math。random()方法返回一個布林值(true 或者 false)。Math。random建立一個0到1之間的隨機數,我們只要檢查它是否高於或低於0。5,就有50%機會得到true或false。

const randomBoolean = () =>Math。random() >= 0。5;console。log(randomBoolean());

2、 檢查所提供的日期是否為工作日

使用這種方法,我們能夠檢查在函式中提供的日期是否是工作日或週末的日子。

const isWeekday = (date) => date。getDay() % 6 !== 0;

console。log(isWeekday(newDate(2021, 7, 6)));// true 因為是週五

console。log(isWeekday(newDate(2021, 7, 7)));// false 因為是週六

3、反轉字串

有幾種不同的方法來反轉一個字串。這是最簡單的一種,使用split()、reverse()和join()方法。

const reverse = str => str。split(‘’)。reverse()。join(‘’);reverse(‘hello world’); //‘dlrow olleh’

4、檢查當前標籤是否隱藏

Document。hidden (只讀屬性)返回布林值,表示頁面是(true)否(false)隱藏。

const isBrowserTabInView = () =>document。hidden;isBrowserTabInView();

場外:無意間發現愛奇藝廣告播放時間居然是在當前標籤頁啟用的時候才會進行倒計時,離開當前標籤頁的時候,倒計時停止,百度一下發現document。hidden這個東東。

document。hidden是h5新增加api使用的時候有相容性問題。

var hiddenif (typeofdocument。hidden !== “undefined”) { hidden = “hidden”;} elseif (typeofdocument。mozHidden !== “undefined”) { hidden = “mozHidden”;} elseif (typeofdocument。msHidden !== “undefined”) { hidden = “msHidden”;} elseif (typeofdocument。webkitHidden !== “undefined”) { hidden = “webkitHidden”;}console。log(“當前頁面是否被隱藏:” + document[hidden])

5、檢查一個數字是偶數還是奇數

const isEven = num => num % 2 === 0;console。log(isEven(2));// trueconsole。log(isEven(3));// false

6、從一個日期獲取時間

const timeFromDate = date => date。toTimeString()。slice(0, 8);

console。log(timeFromDate(newDate(2021, 0, 10, 17, 30, 0))); // “17:30:00”

console。log(timeFromDate(newDate()));// 列印當前的時間

7、保留 n 位小數

const toFixed = (n, fixed) => ~~(Math。pow(10, fixed) * n) / Math。pow(10, fixed);// 事例toFixed(25。198726354, 1); // 25。1toFixed(25。198726354, 2); // 25。19toFixed(25。198726354, 3); // 25。198toFixed(25。198726354, 4); // 25。1987toFixed(25。198726354, 5); // 25。19872toFixed(25。198726354, 6); // 25。198726

8、檢查當前是否有元素處於焦點中

我們可以使用document。activeElement屬性檢查一個元素是否當前處於焦點。

const elementIsInFocus = (el) => (el === document。activeElement);elementIsInFocus(anyElement)// 如果在焦點中返回true,如果不在焦點中返回 false

9、檢查當前瀏覽器是否支援觸控事件

const touchSupported = () => { (‘ontouchstart’inwindow || window。DocumentTouch && documentinstanceofwindow。DocumentTouch);}console。log(touchSupported());// 如果支援觸控事件,將返回true,如果不支援則返回false。

10、檢查當前瀏覽器是否在蘋果裝置上

const isAppleDevice = /Mac|iPod|iPhone|iPad/。test(navigator。platform);console。log(isAppleDevice);

11、滾動到頁面頂部

const goToTop = () =>window。scrollTo(0, 0);goToTop();

12、獲取引數的平均數值

const average = (。。。args) => args。reduce((a, b) => a + b) / args。length;average(1, 2, 3, 4);// 2。5

13、華氏/攝氏轉換

const celsiusToFahrenheit = (celsius) => celsius * 9/5 + 32;const fahrenheitToCelsius = (fahrenheit) => (fahrenheit - 32) * 5/9;// 事例celsiusToFahrenheit(15); // 59celsiusToFahrenheit(0); // 32celsiusToFahrenheit(-20); // -4fahrenheitToCelsius(59); // 15fahrenheitToCelsius(32); // 0

感謝你的閱讀。

學習更多技能

13個常用的JavaScript程式碼片段