本文整理了一些实用的 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。
-
const copyToClipboard = (text) => navigator.clipboard.writeText(text);
-
-
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 或原始 URL goole.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
来自：祈澈菇凉
https://wangxiaoting.blog.youkuaiyun.com/article/details/120916063
-
往期干货：
-
26个经典微信小程序+
35套微信小程序源码+微信小程序合集源码下载（免费） 干货~~~
2021最新前端学习视频~~速度领取
-
前端书籍-前端
290本高清pdf电子书打包下载
-
点赞和在看就是最大的支持❤️
欢迎使用Markdown编辑器
你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。
新的改变
我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客：
- 全新的界面设计 ，将会带来全新的写作体验；
- 在创作中心设置你喜爱的代码高亮样式，Markdown 将代码片显示选择的高亮样式 进行展示；
- 增加了 图片拖拽 功能，你可以将本地的图片直接拖拽到编辑区域直接展示；
- 全新的 KaTeX数学公式 语法；
- 增加了支持甘特图的mermaid语法1 功能；
- 增加了 多屏幕编辑 Markdown文章功能；
- 增加了 焦点写作模式、预览模式、简洁写作模式、左右区域同步滚轮设置 等功能，功能按钮位于编辑区域与预览区域中间；
- 增加了 检查列表 功能。
功能快捷键
撤销：Ctrl/Command + Z
重做：Ctrl/Command + Y
加粗：Ctrl/Command + B
斜体：Ctrl/Command + I
标题：Ctrl/Command + Shift + H
无序列表：Ctrl/Command + Shift + U
有序列表：Ctrl/Command + Shift + O
检查列表：Ctrl/Command + Shift + C
插入代码：Ctrl/Command + Shift + K
插入链接：Ctrl/Command + Shift + L
插入图片：Ctrl/Command + Shift + G
查找：Ctrl/Command + F
替换：Ctrl/Command + G
合理的创建标题，有助于目录的生成
直接输入1次#，并按下space后，将生成1级标题。
输入2次#，并按下space后，将生成2级标题。
以此类推，我们支持6级标题。有助于使用TOC语法后生成一个完美的目录。
如何改变文本的样式
强调文本 强调文本
加粗文本 加粗文本
标记文本
删除文本
引用文本
H2O is是液体。
210 运算结果是 1024.
插入链接与图片
链接: link.
图片: 
带尺寸的图片:
居中的图片: 
居中并且带尺寸的图片:
当然，我们为了让用户更加便捷，我们增加了图片拖拽功能。
如何插入一段漂亮的代码片
去博客设置页面，选择一款你喜欢的代码片高亮样式，下面展示同样高亮的 代码片.
// An highlighted block
var foo = 'bar';
生成一个适合你的列表
- 项目
- 项目
- 项目
- 项目
- 项目1
- 项目2
- 项目3
- 计划任务
- 完成任务
创建一个表格
一个简单的表格是这么创建的：
| 项目 | Value |
|---|---|
| 电脑 | $1600 |
| 手机 | $12 |
| 导管 | $1 |
设定内容居中、居左、居右
使用:---------:居中
使用:----------居左
使用----------:居右
| 第一列 | 第二列 | 第三列 |
|---|---|---|
| 第一列文本居中 | 第二列文本居右 | 第三列文本居左 |
SmartyPants
SmartyPants将ASCII标点字符转换为“智能”印刷标点HTML实体。例如：
| TYPE | ASCII | HTML |
|---|---|---|
| Single backticks | 'Isn't this fun?' | ‘Isn’t this fun?’ |
| Quotes | "Isn't this fun?" | “Isn’t this fun?” |
| Dashes | -- is en-dash, --- is em-dash | – is en-dash, — is em-dash |
创建一个自定义列表
-
Markdown
- Text-to- HTML conversion tool Authors
- John
- Luke
如何创建一个注脚
一个具有注脚的文本。2
注释也是必不可少的
Markdown将文本转换为 HTML。
KaTeX数学公式
您可以使用渲染LaTeX数学表达式 KaTeX:
Gamma公式展示 Γ ( n ) = ( n − 1 ) ! ∀ n ∈ N \Gamma(n) = (n-1)!\quad\forall n\in\mathbb N Γ(n)=(n−1)!∀n∈N 是通过欧拉积分
Γ ( z ) = ∫ 0 ∞ t z − 1 e − t d t . \Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,. Γ(z)=∫0∞tz−1e−tdt.
你可以找到更多关于的信息 LaTeX 数学表达式here.
新的甘特图功能，丰富你的文章
- 关于 甘特图 语法，参考 这儿,
UML 图表
可以使用UML图表进行渲染。 Mermaid. 例如下面产生的一个序列图：
这将产生一个流程图。:
- 关于 Mermaid 语法，参考 这儿,
FLowchart流程图
我们依旧会支持flowchart的流程图：
- 关于 Flowchart流程图 语法，参考 这儿.
导出与导入
导出
如果你想尝试使用此编辑器, 你可以在此篇文章任意编辑。当你完成了一篇文章的写作, 在上方工具栏找到 文章导出 ，生成一个.md文件或者.html文件进行本地保存。
导入
如果你想加载一篇你写过的.md文件，在上方工具栏可以选择导入功能进行对应扩展名的文件导入，
继续你的创作。
注脚的解释 ↩︎
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
