38 个非常有用的 JavaScript 单行代码汇总

今天的这些技巧的汇总，希望可以帮助到你。

1.判断日期是否正确

此方法用于检查给定日期是否有效。

const isDateValid = (...val) => !Number.isNaN(new Date(...val).valueOf());
isDateValid("December 27, 2022 13:14:00");  // true

2. 计算两个日期之间的间隔

此方法用于计算两个日期之间的间隔。

const dayDif = (date1, date2) => Math.ceil(Math.abs(date1.getTime() - date2.getTime()) / 86400000)
dayDif(new Date("2022-08-27"), new Date("2022-12-25"))  // 120

距离圣诞节还有 120 天。

3. 确定日期所在的一年中的哪一天

此方法用于检测给定日期所在的一年中的哪一天。

const dayOfYear = (date) => Math.floor((date - new Date(date.getFullYear(), 0, 0)) / 1000 / 60 / 60 / 24);
dayOfYear(new Date());   // 239

2022年已经过去了239天。

4.格式化时间

此方法可用于将时间转换为 hh:mm:ss 格式。

const timeFromDate = date => date.toTimeString().slice(0, 8);
timeFromDate(new Date(2021, 11, 2, 12, 30, 0));  // 12:30:00
timeFromDate(new Date());  // now time 09:00:00

5.字符串的初始大写

此方法用于将字符串的第一个字母大写。

const capitalize = str => str.charAt(0).toUpperCase() + str.slice(1)
capitalize("hello world")  // Hello world

6.翻转字符串

该方法用于翻转字符串并返回翻转后的字符串。

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

7. 随机字符串

此方法用于生成随机字符串。

const randomString = () => Math.random().toString(36).slice(2);
randomString();

8. 字符串截断

此方法将字符串截断为指定长度。

const truncateString = (string, length) => string.length < length ? string : `${string.slice(0, length - 3)}...`;
truncateString('Hi, I should be truncated because I am too loooong!', 36)   // 'Hi, I should be truncated because...'

9. 从字符串中删除 html

此方法用于从字符串中删除 HTML 元素。

const stripHtml = html => (new DOMParser().parseFromString(html, 'text/html')).body.textContent || '';

10.从数组中删除重复项

删除重复元素是我们在数组中做的常见事情之一，这里有两种方法，根据情况选择使用。

const removeDuplicates = (arr) => [... .new Set(arr)];
console.log(removeDuplicates([1, 2, 2, 3, 3, 4, 4, 5, 5, 6]));

const num = [1,2,2,2,5,66,666,55,5]
const name = ["adarsh","gupta","adarsh","raj","ratesh","raj"]
const uniquenum = [... new Set(num)]
// [1,2,5,66,666,55]
const uniquenames = [... new Set(name)
// ["adarsh","gupta","raj","ratesh"]

11.判断数组是否为空

1）、使用 isArray 方法检查数组是否为空，并通过传递数组检查 Object.keys(arr) 的长度来确认它。

Object.keys() 方法返回给定对象自己的可枚举属性名称的数组，以与正常循环相同的顺序进行迭代。

const isArrayNotEmpty = (arr) => Array.isArray(arr) && 
Object.keys(arr).length > 0; // Examples
isArrayNotEmpty([]); // false
isArrayNotEmpty([1, 2, 3]); // true

2）、该方法用于判断一个数组是否为空数组，它返回一个布尔值。

const isNotEmpty = arr => Array.isArray(arr) && arr.length > 0;
isNotEmpty([1, 2, 3]);  // true

12.组合两个数组

可以使用以下两种方法来合并两个数组：

const merge = (a, b) => a.concat(b);
const merge = (a, b) => [. . a, . . b];

13.判断一个数是奇数还是偶数

此方法用于确定数字是奇数还是偶数。

const isEven = num => num % 2 === 0;
isEven(996);

14.得到一组数字的平均值

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

15. 从两个整数中确定随机整数

此方法用于获取两个整数之间的随机整数。

const random = (min, max) => Math.floor(Math.random() * (max — min + 1) + min);
random(1, 50);

16.四舍五入到指定位数

此方法可用于将数字四舍五入到指定的数字。

const round = (n, d) => Number(Math.round(n + “e” + d) + “e-” + d)
round(1.005, 2) //1.01
round(1.555, 2) //1.56

17.RGB到十六进制转换机制

此方法可以将 RGB 颜色值转换为十六进制值。

const rgbToHex = (r, g, b) => "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
rgbToHex(255, 255, 255);  // '#ffffff'

18. 随机选择一种十六进制颜色

此方法用于获取随机的十六进制颜色值。

const randomHex = () => `#${Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, "0")}`;
randomHex();

19.将内容复制到剪贴板

此方法使用 navigator.clipboard.writeText 将文本复制到剪贴板。

const copyToClipboard = (text) => navigator.clipboard.writeText(text);
copyToClipboard("Hello World");

20.删除所有cookies

该方法使用 document.cookie 访问 cookie 并清除网页上存储的所有 cookie。

const clearCookies = document.cookie.split(';').forEach(cookie => document.cookie = cookie.replace(/^ +/, '').replace(/=.*/, `=;expires=${new Date(0).toUTCString()};path=/`));

21.检索选择的文本

该方法通过内置的 getSelection 属性获取用户选择的文本。

const getSelectedText = () => window.getSelection().toString();
getSelectedText();

22.判断是否处于暗模式

该方法用于检测当前环境是否处于暗模式，它是一个布尔值。

const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
console.log(isDarkMode)

23. 导航到页面顶部

此方法用于返回页面顶部。

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

24. 确定当前选项卡是否处于活动状态

此方法用于检查当前选项卡是否处于活动状态。

const isTabInView = () => !document.hidden;

25.判断当前设备是否为苹果设备

此方法用于检查当前设备是否为 Apple 设备。

const isAppleDevice = () => /Mac|iPod|iPhone|iPad/.test(navigator.platform);
isAppleDevice();

26. 是否滚动到页面底部

该方法用于判断页面是否在底部。

const scrolledToBottom = () => document.documentElement.clientHeight + window.scrollY >= document.documentElement.scrollHeight;

27. 重定向到一个 URL

此方法用于重定向到新 URL。

const redirect = url => location.href = url
redirect("https://www.google.com/")

28. 打开浏览器打印框

该方法用于打开浏览器的打印框。

const showPrintDialog = () => window.print()

29.生成随机字符串

有时可能会出现需要生成随机字符串的情况，请使用此代码片段来获取它。

const randomstr = Math.random().toString(36).substring(7)

由于在对浮点进行字符串化时会删除尾随零，因此它将生成 0 到 6 个字符之间的任何字符。

30.反转字符串

反转字符串从未如此简单，首先我们将其转换为数组（字符数组），现在我们反转该数组，然后将该数组转换为字符串。

使用这个单线来实现这一点：

const rev = (str) => str.split("").reverse().join("")

31.随机布尔值

此方法返回一个随机布尔值。使用 Math.random()，你可以得到一个 0-1 的随机数，并将它与 0.5 进行比较，有一半的概率得到一个真值或假值。

const randomBoolean = () => Math.random() >= 0.5;
randomBoolean();

32. 切换变量

可以使用以下形式交换两个变量的值，而无需应用第三个变量。

[foo, bar] = [bar, foo];

33. 获取变量的类型

该方法用于获取变量的类型。

const trueTypeOf = (obj) => Object.prototype.toString.call(obj).slice(8, -1).toLowerCase();
trueTypeOf(‘’); // string
trueTypeOf(0); // number
trueTypeOf(); // undefined
trueTypeOf(null); // null
trueTypeOf({}); // object
trueTypeOf([]); // array
trueTypeOf(0); // number
trueTypeOf(() => {}); // function

34.华氏到摄氏温度转换

此方法用于在摄氏度和华氏度之间进行转换。

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

35.检测对象是否为空

该方法用于检测 JavaScript 对象是否为空。

const isEmpty = obj => Reflect.ownKeys(obj).length === 0 && obj.constructor === Object;

36.打乱数组，返回一个数组可以使用数学模块的随机方法对数组进行洗牌。

const shuffle = array => array.sort(() => 0.5-Math.random());
//output
shuffle([1,5,2,45])  
[5,2,1,25]

Math.random() 返回一个介于 0 和 1 之间的随机数。因此，如果它恰好给你一个小于 0.5 的数字，那么，你会得到一个负数，如果超过了，那么你会得到一个正数。

在此比较函数中选择 0.5 的原因是，如果从 0 和 1 的每个端点中减去 0.5，则会得到 -0.5 和 +0.5 的新范围，但不包括 +0.5，因为不包括原始 1 在 Math.random() 函数的结果中。

因此，当从这个范围返回一个随机数时，它是正数或负数的可能性几乎相等，有时它也会为零。

37.检测暗模式

在某些情况下，我们可能希望在激活暗模式时做一些额外的事情，使用这段代码来检查暗模式是打开还是关闭。

const isDark = window.matchMedia && window.matchMedia(`(prefers-color-scheme:dark)`).match

38.交换两个变量

下面的代码是在不使用第三个变量且仅使用一行代码的情况下交换两个变量的更简单方法之一。

[var1, var2] = [var2, var1];

关于JavaScript的单行代码技巧，我们在前面也分享过一些，但是，没有今天齐全，今天分享的这些代码，基本都是我们日常开发中会使用到的一些单行代码。

希望你能从今天的内容中，学习到一些新的内容，帮助你提升开发效率。

链接: https://www.fly63.com/article/detial/12081