13 行 JavaScript 代碼讓你看起來像是高手
Javascript 可以做許多神奇的事情,也有很多東西需要學(xué)習(xí),今天我們介紹幾個(gè)短小精悍的代碼段。
獲取隨機(jī)布爾值(True/False)
使用 Math.random() 會(huì)返回 0 到 1 的隨機(jī)數(shù),之后判斷它是否大于 0.5,將會(huì)得到一個(gè) 50% 概率為 True 或 False 的值
- const randomBoolean = () => Math.random() >= 0.5;
- console.log(randomBoolean());
判斷一個(gè)日期是否是工作日
判斷給定的日期是否是工作日
- const isWeekday = (date) => date.getDay() % 6 !== 0;
- console.log(isWeekday(new Date(2021, 0, 11)));
- // Result: true (周一)
- console.log(isWeekday(new Date(2021, 0, 10)));
- // Result: false (周日)
反轉(zhuǎn)字符串
有許多反轉(zhuǎn)字符串的方法,這里使用一種最簡單的,使用了 split(),reverse() 和 join()
- const reverse = str => str.split('').reverse().join('');
- reverse('hello world');
- // Result: 'dlrow olleh'
判斷當(dāng)前標(biāo)簽頁是否為可視狀態(tài)
瀏覽器可以打開很多標(biāo)簽頁,下面 的代碼段就是判斷當(dāng)前標(biāo)簽頁是否是激活的標(biāo)簽頁
- const isBrowserTabInView = () => document.hidden;
- isBrowserTabInView();
判斷數(shù)字為奇數(shù)或者偶數(shù)
取模運(yùn)算符 % 可以很好地完成這個(gè)任務(wù)
- const isEven = num => num % 2 === 0;
- console.log(isEven(2));
- // Result: true
- console.log(isEven(3));
- // Result: false
從 Date 對象中獲取時(shí)間
使用 Date 對象的 .toTimeString() 方法轉(zhuǎn)換為時(shí)間字符串,之后截取字符串即可
- const timeFromDate = date => date.toTimeString().slice(0, 8);
- console.log(timeFromDate(new Date(2021, 0, 10, 17, 30, 0)));
- // Result: "17:30:00"
- console.log(timeFromDate(new Date()));
- // Result: 返回當(dāng)前時(shí)間
保留指定的小數(shù)位
- const toFixed = (n, fixed) => ~~(Math.pow(10, fixed) * n) / Math.pow(10, fixed);
- // Examples
- toFixed(25.198726354, 1); // 25.1
- toFixed(25.198726354, 2); // 25.19
- toFixed(25.198726354, 3); // 25.198
- toFixed(25.198726354, 4); // 25.1987
- toFixed(25.198726354, 5); // 25.19872
- toFixed(25.198726354, 6); // 25.198726
檢查指定元素是否處于聚焦?fàn)顟B(tài)
可以使用 document.activeElement 來判斷元素是否處于聚焦?fàn)顟B(tài)
- const elementIsInFocus = (el) => (el === document.activeElement);
- elementIsInFocus(anyElement)
- // Result: 如果處于焦點(diǎn)狀態(tài)會(huì)返回 True 否則返回 False
檢查當(dāng)前用戶是否支持觸摸事件
- const touchSupported = () => {
- ('ontouchstart' in window || window.DocumentTouch && document instanceof window.DocumentTouch);
- }
- console.log(touchSupported());
- // Result: 如果支持觸摸事件會(huì)返回 True 否則返回 False
檢查當(dāng)前用戶是否是蘋果設(shè)備
可以使用 navigator.platform 判斷當(dāng)前用戶是否是蘋果設(shè)備
- const isAppleDevice = /Mac|iPod|iPhone|iPad/.test(navigator.platform);
- console.log(isAppleDevice);
- // Result: 是蘋果設(shè)備會(huì)返回 True
滾動(dòng)至頁面頂部
window.scrollTo() 會(huì)滾動(dòng)至指定的坐標(biāo),如果設(shè)置坐標(biāo)為(0,0),就會(huì)回到頁面頂部
- const goToTop = () => window.scrollTo(0, 0);
- goToTop();
- // Result: 將會(huì)滾動(dòng)至頂部
獲取所有參數(shù)的平均值
可以使用 reduce() 函數(shù)來計(jì)算所有參數(shù)的平均值
- const average = (...args) => args.reduce((a, b) => a + b) / args.length;
- average(1, 2, 3, 4);
- // Result: 2.5
轉(zhuǎn)換華氏/攝氏
再也不怕處理溫度單位了,下面兩個(gè)函數(shù)是兩個(gè)溫度單位的相互轉(zhuǎn)換。
- const celsiusToFahrenheit = (celsius) => celsius * 9/5 + 32;
- const fahrenheitToCelsius = (fahrenheit) => (fahrenheit - 32) * 5/9;
- // Examples
- celsiusToFahrenheit(15); // 59
- celsiusToFahrenheit(0); // 32
- celsiusToFahrenheit(-20); // -4
- fahrenheitToCelsius(59); // 15
- fahrenheitToCelsius(32); // 0