20 个实用的 JavaScript 单行代码

推荐大家关注一个公众号

后台回复“大礼包”有惊喜礼包！

每日英文

Tired heart is always hovering between adhering to and giving up, indecisive. Trouble is that memory is good, the mind should not mind will stay in memory.

心累，就是常常徘徊在坚持和放弃之间，举棋不定。烦恼，就是记性太好，该记的，不该记的都会留在记忆里。

每日掏心话

成熟，不是你绷起脸，显得多么老道；不是你知道多少大是大非，懂得多少大道理，而是你能理解身边发生的小事都可能有它的不得已。

责编：乐乐 | 来自：JenK 链接：segmentfault.com/a/1190000040721650

往日回顾：

正文

大家好，我是小乐。

本文整理了一些实用的 JavaScript 单行代码，非常好用~~

获取浏览器Cookie的值

通过document.cookie来查找cookie值

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

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


颜色RGB转十六进制const rgbToHex = (r, g, b) => "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);

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


复制到剪贴板

借助navigator.clipboard.writeText可以很容易的讲文本复制到剪贴板

规范要求在写入剪贴板之前使用 Permissions API 获取“剪贴板写入”权限。但是，不同浏览器的具体要求不同，因为这是一个新的API。有关详细信息，请查看compatibility table and Clipboard availability in Clipboard。

copyToClipboard("Hello World");


检查日期是否合法

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

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

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


查找日期位于一年中的第几天const dayOfYear = (date) =>
Math.floor((date - new Date(date.getFullYear(), 0, 0)) / 1000 / 60 / 60 / 24);

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


英文字符串首字母大写

Javascript没有内置的首字母大写函数，因此我们可以使用以下代码。

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

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


计算2个日期之间相差多少天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


清除全部Cookie

通过使用document.cookie访问cookie并将其清除，可以轻松清除网页中存储的所有cookie。

const clearCookies = document.cookie.split(';').forEach(cookie => document.cookie = cookie.replace(/^ +/, '').replace(/=.*/, `=;expires=${new Date(0).toUTCString()};path=/`));
生成随机十六进制颜色

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

搜索公众号前端技术精选回复“手册”，送你一份惊喜礼包。

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

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


数组去重

可以使用 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 ]


从 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);


getParameters(window.location);
// Result: { search : "easy", page : 3 }


或者更为简单的：

Object.fromEntries(new URLSearchParams(window.location.search))
// Result: { search : "easy", page : 3 }
时间处理

我们可以从给定日期以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"


校验数字是奇数还是偶数const isEven = num => num % 2 === 0;

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


求数字的平均值

使用reduce方法找到多个数字之间的平均值。

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

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


回到顶部

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

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

goToTop();


翻转字符串

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

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

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


校验数组是否为空

一行代码检查数组是否为空,将返回true或false

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

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


获取用户选择的文本

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

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

getSelectedText();


打乱数组

可以使用sort和random方法打乱数组

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

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


检查用户的设备是否处于暗模式

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

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

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


你还有什么想要补充的吗？

PS：欢迎在留言区留下你的观点，一起讨论提高。如果今天的文章让你有新的启发，欢迎转发分享给更多人。

版权申明：内容来源网络，版权归原创者所有。除非无法确认，我们都会标明作者及出处，如有侵权烦请告知，我们会立即删除并表示歉意。谢谢!

欢迎加入后端架构师，在后台回复“”即可。

最近面试BAT，整理一份面试资料《Java面试BAT通关手册》，覆盖了Java核心技术、JVM、Java并发、SSM、微服务、数据库、数据结构等等。在这里，我为大家准备了一份2021年最新最全BAT等大厂Java面试经验总结。

别找了，想获取史上最简单的Java大厂面试题学习资料

扫下方二维码回复「面试」就好了

嘿，你在看吗？