分享20个JavaScript 单行代码-前端开发

分享20个JavaScript 单行代码目录 1.获取浏览器Cookie的值 2.将RGB转换为十六进制 3.复制到剪贴板 4.检查日期是否有效 5.查找一年中的某一天 6.大写字符串 7.查找两个日期之间的天数 8.清除所有Cookie 9.生成随机十六进制 10.从数组中删除重复项 11.从U

1.获取浏览器Cookie的值
2.将RGB转换为十六进制
3.复制到剪贴板
4.检查日期是否有效
5.查找一年中的某一天
6.大写字符串
7.查找两个日期之间的天数
8.清除所有Cookie
9.生成随机十六进制
10.从数组中删除重复项
11.从URL获取查询参数
12.从日期输出时间
13.检查数字是偶数还是奇数
14.求数字的平均值
15.滚动到顶部
16.反转字符串
17.检查数组是否为空
18.获取选定的文本
19.打乱数组
20.检测暗模式

1.获取浏览器Cookie的值

通过使用document.cookie访问来检索cookie的值。


const cookie = name => `; ${document.cookie}`.split(`; ${name}=`).pop().split(';').shift();

cookie('_ga');
// Result: "GA1.2.1929736587.1601974046"

2.将RGB转换为十六进制


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

rgbToHex(0, 51, 255);
// Result: #0033ff

3.复制到剪贴板

使用navigator.clipboard.writeText可以轻松将文本复制到剪贴板。


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

copyToClipboard("Hello World");

4.检查日期是否有效

使用以下代码段检查给定日期是否有效。


const isDateValid = (...val) => !Number.isNaN(new Date(...val).valueOf());

isDateValid("December 17, 1995 03:24:00");
// Result: true

5.查找一年中的某一天

查找给定日期。


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

dayOfYear(new Date());
// Result: 272

6.大写字符串

Javascript没有内置的大写函数，但是我们可以使用以下代码实现大写。


const capitalize = str => str.charAt(0).toUpperCase() + str.slice(1)

capitalize("follow for more")
// Result: Follow for more

7.查找两个日期之间的天数

使用以下代码段查找给定两个日期之间的天数。


const dayDif = (date1, date2) => Math.ceil(Math.abs(date1.getTime() - date2.getTime()) / 86400000)

dayDif(new Date("2020-10-21"), new Date("2021-10-22"))
// Result: 366

8.清除所有Cookie

你可以通过使用document.cookie访问cookie并清除它，从而轻松地清除存储在网页中的所有cookie。


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

9.生成随机十六进制

你可以使用Math.random和padEnd属性生成随机的十六进制颜色。


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

console.log(randomHex());
// Result: #92b008

10.从数组中删除重复项

你可以使用JavaScript中的Set轻松删除重复项。这是救命稻草。


const removeDuplicates = (arr) => [...new Set(arr)];

console.log(removeDuplicates([1, 2, 3, 3, 4, 4, 5, 5, 6]));
// Result: [ 1, 2, 3, 4, 5, 6 ]

11.从URL获取查询参数

你可以通过传递window.location或原始URLgoole.com?search=easy&page=3从url轻松检索查询参数。


const getParameters = (URL) => {
  URL = JSON.parse('{"' + decodeURI(URL.split("?")[1]).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g, '":"') +'"}');
  return JSON.stringify(URL);
};

12.从日期输出时间

我们可以从给定日期以hour::minutes::seconds的格式输出时间。


const timeFromDate = date => date.toTimeString().slice(0, 8);

console.log(timeFromDate(new Date(2021, 0, 10, 17, 30, 0)));
// Result: "17:30:00"

13.检查数字是偶数还是奇数


const isEven = num => num % 2 === 0;

console.log(isEven(2));
// Result: True

14.求数字的平均值

使用reduce方法查找多个数字的平均值。


const average = (...args) => args.reduce((a, b) => a + b) / args.length;

average(1, 2, 3, 4);
// Result: 2.5

15.滚动到顶部

我们可以使用window.scrollTo(0, 0)方法自动滚动到顶部。将x和y都设置为0。


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

goToTop();

16.反转字符串

你可以使用split、reverse和join方法轻松反转字符串。


const reverse = str => str.split('').reverse().join('');

reverse('hello world');
// Result: 'dlrow olleh'

17.检查数组是否为空

只要简简单单的一行代码就可以检查数组是否为空，返回true或false。


const isNotEmpty = arr => Array.isArray(arr) && arr.length > 0;

isNotEmpty([1, 2, 3]);
// Result: true

18.获取选定的文本

使用内置的getSelection属性获取用户选择的文本。


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

getSelectedText();

19.打乱数组

使用sort和random方法打乱数组非常容易。


const shuffleArray = (arr) => arr.sort(() => 0.5 - Math.random());

console.log(shuffleArray([1, 2, 3, 4]));
// Result: [ 1, 4, 3, 2 ]

20.检测暗模式

使用以下代码可以检查用户的设备是否处于暗模式。


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

console.log(isDarkMode) // Result: True or False

总结：

到此这篇关于分析20个JavaScript 单行代码的文章就介绍到这了,更多相关JavaScript 单行代码内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

目录