发表更新前端技术

JavaScript 技巧：通过一行代码实现一个功能

JavaScript 是一门极其流行的脚本语言，长期霸占热门编程语言前 3 的位置。JavaScript 可以做很多神奇的事情：从复杂的框架到 API 处理，有太多的东西值得深入学习。但是，它也能让你只用一行代码就能做一些了不起的事情。本文总结了 14 句 JavaScript 单行代码实现的功能，在某种程度上，可能是更专业的做法。

1、反转字符串

字符串反转是一个常见的需求。需求本身不难，并且有好几种不同的方法来实现，以下代码是最简单的方式之一。

1
2
3
const reverse = (str) => str.split('').reverse().join('');
reverse('Javascript');     
// Result: 'tpircsavaJ'

上面的代码通过链式调用 JavaScript 字符串方法来实现字符串反转。

2、随机返回一个布尔值 true 或 false

下面这个函数可以随机返回一个布尔值 true 或 false。该函数使用 Math.random() 方法返回一个 0-1 之间的随机数，之后我们检查它是否高于或低于 0.5。这意味着得到 true 或 false 的几率各是 50%。

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

3、检查数字是否为奇数

检查一个数字是否为奇数最简单的方式是通过使用模运算符 % 来解决。代码如下所示：

1
2
3
4
5
6
7
const isEven = (num) => num % 2 === 0;

// 示例
console.log(isEven(2));
// Result: true
console.log(isEven(5));
// Result: false

4、检查日期是否为工作日

使用下面这个方法，可以检查指定的日期是工作日还是非工作日（周末）。

1
2
3
4
5
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)

注意：上面 isWeekday() 方法的参数 date 是一个 JavaScript 日期对象，不是日期字符串。

5、从日期中获取时间

通过使用 JavaScript Date 对象的 toTimeString() 方法，在正确的位置对字符串进行切片，我们可以从提供的日期中获取时间或者当前时间。

代码如下：

1
2
3
4
5
const getTimeFromDate = (date) => date.toTimeString().slice(0, 8);
console.log(getTimeFromDate(new Date(2021, 2, 11, 14, 15, 24)));
// Result: "14:15:24"
console.log(getTimeFromDate(new Date()));
// Result: will print the current time

注意：上面函数的参数仍然是一个日期对象。

6、华氏度/摄氏度转换

关于温度的单位，我们最熟悉的是摄氏度。除了摄氏度，在国际上，还有华氏度、开氏度、兰氏度以及列氏度等其他几种单位。在处理温度时，有时候会涉及到这几种单位之间的换算。下面 2 个方法可以帮助你将华氏温度转换为摄氏温度，反之亦然。

1
2
3
4
5
6
7
8
9
10
11
12
// 摄氏度转华氏度
const celsiusToFahrenheit = (celsius) => celsius * 9/5 + 32;

// 华氏度转摄氏度
const fahrenheitToCelsius = (fahrenheit) => (fahrenheit - 32) * 5/9;

// 示例
celsiusToFahrenheit(45);    // 113
celsiusToFahrenheit(0);     // 32
celsiusToFahrenheit(-57);   // -70.60
fahrenheitToCelsius(56);    // 13.33
fahrenheitToCelsius(-9);    // -22.78

提示：这里有一个温度换算工具，可以验证一下转换结果是否正确。

7、保留小数点（非四舍五入）

使用 Math.pow() 方法，我们可以将一个数字截断到某个小数点（注意：不是四舍五入）。

1
2
3
4
5
6
7
8
9
10
const toFixed = (n, fixed) => ~~(Math.pow(10, fixed) * n) / Math.pow(10, fixed);

// 示例
toFixed(16.369254998, 1);       // 16.3
toFixed(16.369254998, 2);       // 16.36
toFixed(16.369254998, 3);       // 16.369
toFixed(16.369254998, 4);       // 16.3692
toFixed(16.369254998, 5);       // 16.36925
toFixed(16.369254998, 6);       // 16.369254
toFixed(16.369254998, 7);       // 16.3692549

8、获取所有参数的平均值

在涉及到数值运算的场景，获取所有参数平均值是一个非常常见的需求。通常的做法是使用 for 循环对参数求和，然后再除以参数个数。这里，我们可以使用 reduce 方法来获得函数所有参数的平均值。

1
2
3
4
// 获取所有参数平均值，支持任意参数数量
const average = (...args) => args.reduce((a, b) => a + b) / args.length;
average(1, 2, 3, 4);
// Result: 2.5

9、检查当前用户是否为苹果设备

我们可以使用 navigator 导航对象的 platform 属性来检查（使用正则表达式）当前用户是否为苹果设备。

代码如下：

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

10、检查浏览器是否支持触摸事件

检查浏览器是否支持触摸事件，主要是通过判断窗口是否支持 ontouchstart 事件或窗口的 DocumentTouch 属性来决定的。

代码如下：

1
2
3
4
5
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

11、检查元素当前是否为聚焦状态

我们可以使用 document.activeElement 属性检查一个元素当前是否处于聚焦状态。

1
2
3
const isInFocus = (el) => (el === document.activeElement);
isInFocus(yourElement)
// Result: will return true if in focus, false if not in focus

12、检查当前 Tab 页是否在前台

我们可以通过使用 document.hidden 属性来检查当前标签页是否在前台中。

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

13、滚动到页面顶部

window.scrollTo() 方法会取一个 x 和 y 坐标来进行滚动。如果我们将这些坐标设置为零，就可以实现滚动到页面顶部的效果。

代码如下：

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

对于上述方法，有以下注意事项：

  • IE 浏览器不支持 scrollTo() 方法（见下图）
  • 该方法没有动画效果，因为是直接把坐标变成了 (0, 0)

scrollTo 在各主流浏览器的兼容性

14、一行代码生成十六进制颜色值

如果让你生成类似 #ff669d 以十六进行表示的颜色值，你会怎么做？可能大部分人首先想到的是分别生成组成颜色的 R、G、B 对应的 2 位十六进制值，然后再拼凑到一块，最终得到要求的十六进制颜色值。

下面，我用一行代码，来生成一个随机的十六进制颜色值：

1
const getHexColor = () => "#" + (~~(Math.random() * (1 << 24))).toString(16);

你可以在控制台亲自测试一下 getHexColor() 方法，是否达到我们的要求。

上面 getHexColor() 方法的关键在于使用位运算以及 toString(16) 方法，把获得的随机数换算成 16 进制表示，以保证符合颜色值的要求。

希望颜色值以大写表示？再调用一次 toUpperCase() 方法就行了！

全文完，感谢阅读，希望对你有帮助。

#

分类

归档

×