整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
、生成随机字符串
我们可以使用 Math.random 生成一个随机字符串，当我们需要一个唯一的 ID 时非常方便。
const randomString=()=> Math.random().toString(36).slice(2)
randomString() // gi1qtdego0b
randomString() // f3qixv40mot
randomString() // eeelv1pm3ja2、转义HTML特殊字符
如果您了解 XSS，其中一种解决方案是转义 HTML 字符串。
const escape=(str)=> str.replace(/[&<>"']/g, (m)=> ({ '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' }[m]))
escape('<div class="medium">Hi Medium.</div>')
// <div class="medium">Hi Medium.</div>3、将字符串中每个单词的第一个字符大写
此方法用于将字符串中每个单词的第一个字符大写。
const uppercaseWords=(str)=> str.replace(/^(.)|\s+(.)/g, (c)=> c.toUpperCase())
uppercaseWords('hello world'); // 'Hello World'另外，在这里，我要谢谢克里斯托弗·斯特罗利亚-戴维斯，他还跟我分享了他的更加简单的方法，代码如下：
const uppercaseWords=(str)=> str.replace(/^(.)|\s+(.)/g, (c)=> c.toUpperCase())4、将字符串转换为camelCase
const toCamelCase=(str)=> str.trim().replace(/[-_\s]+(.)?/g, (_, c)=> (c ? c.toUpperCase() : ''));
toCamelCase('background-color'); // backgroundColor
toCamelCase('-webkit-scrollbar-thumb'); // WebkitScrollbarThumb
toCamelCase('_hello_world'); // HelloWorld
toCamelCase('hello_world'); // helloWorld5、删除数组中的重复值
删除数组的重复项是非常有必要的，使用“Set”会变得非常简单。
const removeDuplicates=(arr)=> [...new Set(arr)]
console.log(removeDuplicates([1, 2, 2, 3, 3, 4, 4, 5, 5, 6]))
// [1, 2, 3, 4, 5, 6]6、 展平一个数组
我们经常在面试中受到考验，这可以通过两种方式来实现。
const flat=(arr)=>
[].concat.apply(
[],
arr.map((a)=> (Array.isArray(a) ? flat(a) : a))
)
// Or
const flat=(arr)=> arr.reduce((a, b)=> (Array.isArray(b) ? [...a, ...flat(b)] : [...a, b]), [])
flat(['cat', ['lion', 'tiger']]) // ['cat', 'lion', 'tiger']7、从数组中删除虚假值
使用此方法，您将能够过滤掉数组中的所有虚假值。
const removeFalsy=(arr)=> arr.filter(Boolean)
removeFalsy([0, 'a string', '', NaN, true, 5, undefined, 'another string', false])
// ['a string', true, 5, 'another string']8、检查一个数字是偶数还是奇数
超级简单的任务，可以通过使用模运算符 (%) 来解决。
const isEven=num=> num % 2===0
isEven(2) // true
isEven(1) // false9、获取两个数字之间的随机整数
此方法用于获取两个数字之间的随机整数。
const random=(min, max)=> Math.floor(Math.random() * (max - min + 1) + min)
random(1, 50) // 25
random(1, 50) // 3410、获取参数的平均值
我们可以使用 reduce 方法来获取我们在此函数中提供的参数的平均值。
const average=(...args)=> args.reduce((a, b)=> a + b) / args.length;
average(1, 2, 3, 4, 5); // 311、将数字截断为固定小数点
使用 Math.pow() 方法，可以将一个数字截断为我们在函数中提供的某个小数点。
const round=(n, d)=> Number(Math.round(n + "e" + d) + "e-" + d)
round(1.005, 2) //1.01
round(1.555, 2) //1.5612、计算两个日期相差天数
有时候我们需要计算两个日期之间的天数，一行代码就可以搞定。
const diffDays=(date, otherDate)=> Math.ceil(Math.abs(date - otherDate) / (1000 * 60 * 60 * 24));
diffDays(new Date("2021-11-3"), new Date("2022-2-1")) // 9013、从日期中获取一年中的哪一天
如果我们想知道某个日期是一年中的哪一天，我们只需要一行代码即可实现。
const dayOfYear=(date)=> Math.floor((date - new Date(date.getFullYear(), 0, 0)) / (1000 * 60 * 60 * 24))
dayOfYear(new Date()) // 7414、生成一个随机的十六进制颜色
如果你需要一个随机的颜色值，这个函数就可以了。
const randomColor=()=> `#${Math.random().toString(16).slice(2, 8).padEnd(6, '0')}`
randomColor() // #9dae4f
randomColor() // #6ef10e15、将RGB颜色转换为十六进制
const rgbToHex=(r, g, b)=> "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)
rgbToHex(255, 255, 255) // '#ffffff'16、清除所有cookies
const clearCookies=()=> document.cookie.split(';').forEach((c)=> (document.cookie=c.replace(/^ +/, '').replace(/=.*/, `=;expires=${new Date().toUTCString()};path=/`)))17、检测暗模式
const isDarkMode=window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches18、交换两个变量
[foo, bar]=[bar, foo]19、暂停一会
码必须尽可能的清晰和易读。
这实际上是一种编程艺术 —— 以一种正确并且人们易读的方式编码来完成一个复杂的任务。一个良好的代码风格大大有助于实现这一点。
下面是一个备忘单，其中列出了一些建议的规则（详情请参阅下文）：
现在，让我们详细讨论一下这些规则和它们的原因吧。
没有什么规则是“必须”的
没有什么规则是“刻在石头上”的。这些是风格偏好，而不是宗教教条。
在大多数的 JavaScript 项目中，花括号以 “Egyptian” 风格（译注：“egyptian” 风格又称 K&R 风格 — 代码段的开括号位于一行的末尾，而不是另起一行的风格）书写，左花括号与相应的关键词在同一行上 — 而不是新起一行。左括号前还应该有一个空格，如下所示：
if (condition) {
// do this
// ...and that
// ...and that
}单行构造（如 if (condition) doSomething()）也是一个重要的用例。我们是否应该使用花括号？如果是，那么在哪里？
下面是这几种情况的注释，你可以自己判断一下它们的可读性：
对于很短的代码，写成一行是可以接受的：例如 if (cond) return null。但是代码块（最后一个示例）通常更具可读性。
没有人喜欢读一长串代码，最好将代码分割一下。
例如：
// 回勾引号 ` 允许将字符串拆分为多行
let str=`
ECMA International's TC39 is a group of JavaScript developers,
implementers, academics, and more, collaborating with the community
to maintain and evolve the definition of JavaScript.
`;对于 if 语句：
if (
id===123 &&
moonPhase==='Waning Gibbous' &&
zodiacSign==='Libra'
) {
letTheSorceryBegin();
}一行代码的最大长度应该在团队层面上达成一致。通常是 80 或 120 个字符。
有两种类型的缩进：
show(parameters,
aligned, // 5 spaces padding at the left
one,
after,
another
) {
// ...
}function pow(x, n) {
let result=1;
// <--
for (let i=0; i < n; i++) {
result *=x;
}
// <--
return result;
}
插入一个额外的空行有助于使代码更具可读性。写代码时，不应该出现连续超过 9 行都没有被垂直分割的代码。
每一个语句后面都应该有一个分号。即使它可以被跳过。
有一些编程语言的分号确实是可选的，那些语言中也很少使用分号。但是在 JavaScript 中，极少数情况下，换行符有时不会被解释为分号，这时代码就容易出错。更多内容请参阅 代码结构 一章的内容。
如果你是一个有经验的 JavaScript 程序员，你可以选择像 StandardJS 这样的无分号的代码风格。否则，最好使用分号以避免可能出现的陷阱。大多数开发人员都应该使用分号。
尽量避免代码嵌套层级过深。
例如，在循环中，有时候使用 continue 指令以避免额外的嵌套是一个好主意。
例如，不应该像下面这样添加嵌套的 if 条件：
for (let i=0; i < 10; i++) {
if (cond) {
... // <- 又一层嵌套
}
}我们可以这样写：
for (let i=0; i < 10; i++) {
if (!cond) continue;
... // <- 没有额外的嵌套
} //多用这种风格。使用 if/else 和 return 也可以做类似的事情。
例如，下面的两个结构是相同的。
第一个：
function pow(x, n) {
if (n < 0) {
alert("Negative 'n' not supported");
} else {
let result=1;
for (let i=0; i < n; i++) {
result *=x;
}
return result;
}
}第二个：
function pow(x, n) {
if (n < 0) {
alert("Negative 'n' not supported");
return;
}
let result=1;
for (let i=0; i < n; i++) {
result *=x;
}
return result;
}但是第二个更具可读性，因为 n < 0 这个“特殊情况”在一开始就被处理了。一旦条件通过检查，代码执行就可以进入到“主”代码流，而不需要额外的嵌套。
如果你正在写几个“辅助”函数和一些使用它们的代码，那么有三种方式来组织这些函数。
// function declarations
function createElement() {
...
}
function setHandler(elem) {
...
}
function walkAround() {
...
}
// the code which uses them
let elem=createElement();
setHandler(elem);
walkAround();// the code which uses the functions
let elem=createElement();
setHandler(elem);
walkAround();
// --- helper functions ---
function createElement() {
...
}
function setHandler(elem) {
...
}
function walkAround() {
...
}大多数情况下，第二种方式更好。
这是因为阅读代码时，我们首先想要知道的是“它做了什么”。如果代码先行，那么在整个程序的最开始就展示出了这些信息。之后，可能我们就不需要阅读这些函数了，尤其是它们的名字清晰地展示出了它们的功能的时候。
风格指南包含了“如果编写”代码的通用规则，例如：使用哪个引号、用多少空格来缩进、一行代码最大长度等非常多的细节。
当团队中的所有成员都使用相同的风格指南时，代码看起来将是统一的。无论是团队中谁写的，都是一样的风格。
当然，一个团队可以制定他们自己的风格指南，但是没必要这样做。现在已经有了很多制定好的代码风格指南可供选择。
一些受欢迎的选择：
如果你是一个初学者，你可以从本章中上面的内容开始。然后你可以浏览其他风格指南，并选择一个你最喜欢的。
检查器（Linters）是可以自动检查代码样式，并提出改进建议的工具。
它们的妙处在于进行代码风格检查时，还可以发现一些代码错误，例如变量或函数名中的错别字。因此，即使你不想坚持某一种特定的代码风格，我也建议你安装一个检查器。
下面是一些最出名的代码检查工具：
它们都能够做好代码检查。我使用的是 ESLint。
大多数检查器都可以与编辑器集成在一起：只需在编辑器中启用插件并配置代码风格即可。
例如，要使用 ESLint 你应该这样做：
下面是一个 .eslintrc 文件的例子：
{
"extends": "eslint:recommended",
"env": {
"browser": true,
"node": true,
"es6": true
},
"rules": {
"no-console": 0,
"indent": 2
}
}这里的 "extends" 指令表示我们是基于 “eslint:recommended” 的设置项而进行设置的。之后，我们制定我们自己的规则。
你也可以从网上下载风格规则集并进行扩展。有关安装的更多详细信息
此外，某些 IDE 有内置的检查器，这非常方便，但是不像 ESLint 那样可自定义。
本文描述的（和提到的代码风格指南中的）所有语法规则，都旨在帮助你提高代码可读性。它们都是值得商榷的。
当我们思考如何写“更好”的代码的时候，我们应该问自己的问题是：“什么可以让代码可读性更高，更容易被理解？”和“什么可以帮助我们避免错误？”这些是我们讨论和选择代码风格时要牢记的主要原则。
阅读流行的代码风格指南，可以帮助你了解有关代码风格的变化趋势和最佳实践的最新想法。
、垂直对齐
如果你用CSS，则你会有困惑：我该怎么垂直对齐容器中的元素？现在，利用CSS3的Transform，可以很优雅的解决这个困惑：
.verticalcenter{
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}2、伸展一个元素到窗口高度
在具体场景中，你可能想要将一个元素伸展到窗口高度，基本元素的调整只能调整容器的大小,因此要使一个元素伸展到窗口高度，我们需要伸展顶层元素：html和body:
html,
body {
height: 100%;
}然后将100%应用到任何元素的高：
div { height: 100%;}3、基于文件格式使用不同的样式
为了更容易知道链接的目标，有时你想让一些链接看起来和其它的不同。下面的片段在文本链接前添加一个图标，对不同的资源使用不同的图标或图片：
a[href^="http://"]{
padding-right: 20px;
background: url(external.gif) no-repeat center right;
}
/* emails */
a[href^="mailto:"]{
padding-right: 20px;
background: url(email.png) no-repeat center right;
}
/* pdfs */
a[href$=".pdf"]{
padding-right: 20px;
background: url(pdf.png) no-repeat center right;
}4、创建跨浏览器的图像灰度
灰度有时看起来简约和优雅，能为网站呈现更深层次的色调。在示例中，我们将对一个SVG图像添加灰度过滤：
<svg xmlns="http://www.w3.org/2000/svg"> <filter id="grayscale"> <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/> </filter></svg>
为了跨浏览器，会用到filter属性：
img { filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */}5、背景渐变动画
CSS中最具诱惑的一个功能是能添加动画效果，除了渐变，你可以给背景色、透明度、元素大小添加动画。目前，你不能为渐变添加动画，但下面的代码可能有帮助。它通过改变背景位置，让它看起来有动画效果。
button {
background-image: linear-gradient(#5187c4, #1c2f45);
background-size: auto 200%;
background-position: 0 100%;
transition: background-position 0.5s;
}
button:hover {
background-position: 0 0;
}6、CSS：表格列宽自适用
对于表格，当谈到调整列宽时，是比较痛苦的。然后，这里有一个可以使用的技巧：给td元素添加 white-space: nowrap;能让文本正确的换行
td { white-space: nowrap;}213126486编号：悟空
7、只在一边或两边显示盒子阴影
如果你要一个盒阴影，试试这个技巧，能为任一边添加阴影。为了实现这个，首先定义一个有具体宽高的盒子，然后正确定位:after伪类。实现底边阴影的代码如下：
.box-shadow {
background-color: #FF8020;
width: 160px;
height: 90px;
margin-top: -45px;
margin-left: -80px;
position: absolute;
top: 50%;
left: 50%;
}
.box-shadow:after {
content: "";
width: 150px;
height: 1px;
margin-top: 88px;
margin-left: -75px;
display: block;
position: absolute;
left: 50%;
z-index: -1;
-webkit-box-shadow: 0px 0px 8px 2px #000000;
-moz-box-shadow: 0px 0px 8px 2px #000000;
box-shadow: 0px 0px 8px 2px #000000;
}8、包裹长文本
如果你碰到一个比自身容器长的文本，这个技巧对你很有用。在这个示例中，默认时，不管容器的宽度，文本都将水平填充。
简单的CSS代码就能在容器中调整文本：
pre { white-space: pre-line; word-wrap: break-word;}9、制造模糊文本
想要让文本模糊？可以使用color透明和text-shadow实现。
.blurry-text { color: transparent; text-shadow: 0 0 5px rgba(0,0,0,0.5);}10、用CSS动画实现省略号动画
这个片段将帮助你制造一个ellipsis的动画，对于简单的加载状态是很有用的，而不用去使用gif图像。
.loading:after {
overflow: hidden;
display: inline-block;
vertical-align: bottom;
animation: ellipsis 2s infinite;
content: "\2026"; /* ascii code for the ellipsis character */
}
@keyframes ellipsis {
from {
width: 2px;
}
to {
width: 15px;
}
}11、样式重置
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
outline: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html { height: 101%; }
body { font-size: 62.5%; line-height: 1; font-family: Arial, Tahoma, sans-serif; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
strong { font-weight: bold; }
table { border-collapse: collapse; border-spacing: 0; }
img { border: 0; max-width: 100%; }
p { font-size: 1.2em; line-height: 1.0em; color: #333; }12、典型的CSS清除浮动
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }13、新版清除浮动（2011）
.clearfix:before, .container:after { content: ""; display: table; }
.clearfix:after { clear: both; }
/* IE 6/7 */
.clearfix { zoom: 1; }14、跨浏览器的透明
.transparent { filter: alpha(opacity=50); /* internet explorer */
-khtml-opacity: 0.5; /* khtml, old safari */
-moz-opacity: 0.5; /* mozilla, netscape */
opacity: 0.5; /* fx, safari, opera */}15、CSS引用模板
blockquote {
background: #f9f9f9;
border-left: 10px solid #ccc;
margin: 1.5em 10px;
padding: .5em 10px;
quotes: "\201C""\201D""\2018""\2019";
}
blockquote:before {
color: #ccc;
content: open-quote;
font-size: 4em;
line-height: .1em;
margin-right: .25em;
vertical-align: -.4em;
}
blockquote p {
display: inline;
}16、个性圆角
#container {
-webkit-border-radius: 4px 3px 6px 10px;
-moz-border-radius: 4px 3px 6px 10px;
-o-border-radius: 4px 3px 6px 10px;
border-radius: 4px 3px 6px 10px;
}
/* alternative syntax broken into each line */
#container {
-webkit-border-top-left-radius: 4px;
-webkit-border-top-right-radius: 3px;
-webkit-border-bottom-right-radius: 6px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-topleft: 4px;
-moz-border-radius-topright: 3px;
-moz-border-radius-bottomright: 6px;
-moz-border-radius-bottomleft: 10px;
}17、自定义文本选择
::selection { background: #e2eae2; }
::-moz-selection { background: #e2eae2; }
::-webkit-selection { background: #e2eae2; }18、为logo隐藏H1
h1 {
text-indent: -9999px;
margin: 0 auto;
width: 320px;
height: 85px;
background: transparent url("images/logo.png") no-repeat scroll;
}19、图片边框偏光
img.polaroid {
background:#000; /*Change this to a background image or remove*/
border:solid #fff;
border-width:6px 6px 20px 6px;
box-shadow:1px 1px 5px #333; /* Standard blur at 5px. Increase for more depth */
-webkit-box-shadow:1px 1px 5px #333;
-moz-box-shadow:1px 1px 5px #333;
height:200px; /*Set to height of your image or desired div*/
width:200px; /*Set to width of your image or desired div*/
}20、锚链接伪类
*请认真填写需求信息，我们会在24小时内与您取得联系。
