JavaScript 能够做很多神奇的事件!

从简单的框架到解决 API,有太多的货色须要学习。

然而,它也能让你只用一行代码就能做一些了不起的事件。

看看这 13 句 JavaScript 单行代码,会让你看起来像个专家!

1. 获取一个随机布尔值 (true/false)

这个函数应用Math.random()办法返回一个布尔值(true 或 false)。Math.random 将在 0 和 1 之间创立一个随机数,之后咱们查看它是否高于或低于 0.5。这意味着失去真或假的几率是 50%/50%。

const randomBoolean = () => Math.random() >= 0.5;console.log(randomBoolean());// Result: a 50/50 change on returning true of false

2. 查看日期是否为工作日

应用这个办法,你就能够查看函数参数是工作日还是周末。

const isWeekday = (date) => date.getDay() % 6 !== 0;console.log(isWeekday(new Date(2021, 0, 11)));// Result: true (Monday)console.log(isWeekday(new Date(2021, 0, 10)));// Result: false (Sunday)

3. 反转字符串

有几种不同的办法来反转一个字符串。以下代码是最简略的形式之一。

const reverse = str => str.split('').reverse().join('');reverse('hello world');// Result: 'dlrow olleh'

4. 查看以后 Tab 页是否在前台

咱们能够通过应用document.hidden 属性来查看以后标签页是否在前台中

const isBrowserTabInView = () => document.hidden;isBrowserTabInView();// Result: returns true or false depending on if tab is in view / focus

5. 查看数字是否为奇数

最简略的形式是通过应用模数运算符(%)来解决。如果你对它不太熟悉,这里是 stackoverflow 上的一个很好的图解。

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

6. 从日期中获取工夫

通过应用 toTimeString() 办法,在正确的地位对字符串进行切片,咱们能够从提供的日期中获取工夫或者以后工夫。

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: will log the current time

7. 保留小数点(非四舍五入)

应用 Math.pow() 办法,咱们能够将一个数字截断到某个小数点。

const toFixed = (n, fixed) => ~~(Math.pow(10, fixed) * n) / Math.pow(10, fixed);// ExamplestoFixed(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. 查看元素以后是否为聚焦状态

const elementIsInFocus = (el) => (el === document.activeElement);elementIsInFocus(anyElement)// Result: will return true if in focus, false if not in focus

9. 查看浏览器是否反对触摸事件

const touchSupported = () => {  ('ontouchstart' in window || window.DocumentTouch && document instanceof window.DocumentTouch);}console.log(touchSupported());// Result: will return true if touch events are supported, false if not

10. 查看以后用户是否为苹果设施

咱们能够应用 navigator.platform 来查看以后用户是否为苹果设施。

const isAppleDevice = /Mac|iPod|iPhone|iPad/.test(navigator.platform);console.log(isAppleDevice);// Result: will return true if user is on an Apple device

11. 滚动到页面顶部

window.scrollTo() 办法会取一个 x 和 y 坐标来进行滚动。如果咱们将这些坐标设置为零,就能够滚动到页面的顶部。
留神:IE 不反对 scrollTo() 办法。

const goToTop = () => window.scrollTo(0, 0);goToTop();// Result: will scroll the browser to the top of the page

12. 获取所有参数平均值

咱们能够应用 reduce 办法来取得函数参数的平均值。

const average = (...args) => args.reduce((a, b) => a + b) / args.length;average(1, 2, 3, 4);// Result: 2.5

13. 转换华氏度/摄氏度。(这个应该很少在国内用到吧)

解决温度有时会让人感到困惑。这 2 个性能将帮忙你将华氏温度转换为摄氏温度,反之亦然。

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

谢谢你的浏览!心愿你明天能学到一些新的货色。