乐趣区

关于javascript:这些一行-JS-实现功能的代码让你看起来像一个前端专家

jiezi

文章译自 此处，老外也很会写题目。题目可能有 XX 党嫌疑，然而局部内容还是挺有用的。

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. 查看数字是否为奇数

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

const isEven = num => num % 2 === 0;
console.log(isEven(2));
// Result: true
console.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);
// 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

8. 查看元素以后是否为聚焦状态

咱们能够应用 document.activeElement 属性查看一个元素以后是否处于聚焦状态。

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;
// Examples
celsiusToFahrenheit(15);    // 59
celsiusToFahrenheit(0);     // 32
celsiusToFahrenheit(-20);   // -4
fahrenheitToCelsius(59);    // 15
fahrenheitToCelsius(32);    // 0

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

退出移动版