一、初衷
不知道你们有没有这种情况 遇到一个棘手的问题或者技术难点 ，我们会去网上查询、去请教大佬、去百度、CSDN、博客、掘金等等 经常开一大堆网页 最终解决了这个问题。
在这个过程中，会看到各种大佬写的代码，会有些代码看不懂，然后去查这些代码的作用及效果，后果就是又开了一大堆网页...
那我不禁会想了，
正如标题所言，大家都会掉头发，为啥不让自己的代码也变高级,此文分为几个部分用来记录平常遇到的、搜到的、看到的各种高级代码及代码讲解。
二、分类
1.HTML相关
-
tabindex
我们在工作或生活中经常会使用tab切换到下一个输入框或者选择选择上，比如简简单单的登录时输完账号tab一下到密码输入框上，输完密码回车直接登录，有的网站需要再tab一下到登录按钮再回车。 你当然可以用鼠标来协助完成这些操作
但是
作为一个程序员，能用键盘的谁会用鼠标呢，那逼格不够啊。那么问题来了，tab键是如何实现这功能的呢，那就要提到tabindex了
HTML
tabindex属性是一个“全局属性”，所谓“全局属性”，可以理解为“公共汽车属性”，也就是所有HTML标签都可以用的属性，比方说id，class属性等。当一个元素设置
tabindex属性值为-1的时候，元素会变得focusable。focusable指的是元素可以被鼠标 或者 JSfocus，在 chrome 浏览器下表现为会有outline发光效果，IE浏览器下是虚框，同时能够响应focus事件。tabindex 其实可以看成是一个单词组合，就是
tab + index，tab指的就是键盘上的Tab键，现在请低头看一下键盘上的tab键可以发现Tab键上除了有字母Tab还有左右箭头指向图形，其实已经隐隐透露出了这个键的作用，对focusable元素进行索引切换。你可以复制下面代码实际tab体验一下,至于实际作用及业务场景就根据业务仁者见仁了。
<input type="text" >默认</input> <input type="text" tabindex="-1">-1</input> <input type="text" tabindex="0">0</input> <input type="text" tabindex="1">1</input> <div >默认</div> <div tabindex="-1">-1</div> <div tabindex="0">0</div> <div tabindex="1">1</div>
2.CSS相关
-
垂直居中
垂直居中的方法简直太多了，但我相信我们最常用的垂直居中方法就是flex大法=。=
display: flex; align-items: center; justify-content: center;一个偶然我发现了另一种写法
display: grid; place-items: center;不仅代码量变少了，是不是看着也高级了。不用忙着去网上查，其实很简单。
place-items属性是以下属性的简写：align-items、justify-items。 -
:empty::before多用于暂无数据场景中
.area:empty::before { content: '暂无数据'; color: gray; }当
div元素没有内容时，.area:empty样式会生效，同时为了显示一段提示内容，使用了伪元素::before，在content写入提示内容。 -
一行css实现全站中文简繁转换
body {
font-variant-east-asian: traditional;
}
这种效果需要字体本身包含繁体变体。
而在Windows系统中的几个默认字体都没有包含繁体变体，而OS X，也就是iMac或者 Mac Pro，以及iOS系统，也就是苹果手机，iPad等设备的默认中文字体是包含繁体变体的。
因此，目前，在没有任何外界干预的情况下，一行CSS让网站转变成繁体，只在OS X和iOS系统中有效。字体包本身都包含繁体的话大小会有影响，不过现在的网速下，几十M的字体包似乎也无伤大雅，有需要的伙伴可以试试。
3.JS相关
new BarcodeDetector解析二维码
```js
// 创建检测器
const barcodeDetector = new BarcodeDetector({
formats: ['qr_code']
})
barcodeDetector.detect(eleImg)
.then(barcodes => {
console.log('barcodes', barcodes)
barcodes.forEach(barcode => {
result.innerHTML = <span class="success">解析成功，结果是：</span>${barcode.rawValue}
})
})
.catch(err => {
result.innerHTML = <span class="error">解析出错：${err}</span>
})
```
浏览器提供了原生的API来解析二维码和条形码，即 Barcode Detection API。
formats表示要解析那种码，如下图所示：
字符串补全方法
在日常工作中，我们会经常用到字符串补全，比如后端返回的时间戳，需要转换成常用的4-2-2的时间格式 例如：2023-10-16
但是在月份和日不足两位时，我们一般会将它补全，比如：2024-2-9(除夕！！！)，我们想把2月补全成02，常用做法是
if (month < 10) {
month = '0' + month;
}
今天我发现了一种新的方法 又简单又好用又高级！！！
那就是ES2017中引入的padStart()和padEnd()（别问我为什么现在才知道=。=）
语法如下
str.padStart(targetLength [, padString])
其中targetLength 指目标字符串的长度，padString指用来补全的字符串。 那么日期中的补全月份就可以简化成
var month = String(new Date().getMonth() + 1).padStart(2, '0'); // 结果是'02'
是不是简单好用又高级！padEnd与padStart同理，就不占用我摸鱼时间了=。=
数组的copyWithin（）方法
语法
Array.prototype.copyWithin(index, start, end)
表示复制start-end的内容，并从index开始替换。
使用示意：
[].copyWithin()
[].copyWithin(index)
[].copyWithin(index, start)
[].copyWithin(index, start, end)
参数
-
index
复制的数组项开始替换的起始索引值。
-
start
复制的数组项的起始位置（包含）。
-
end
复制的数组项的结束位置（不包含）。
history.scrollRestoration()
作用是实现页面刷新后不定位到之前的滚动位置。
一般在浏览器体验中，按F5或浏览器刷新，页面重新载入完毕后大概率会调到之前访问的位置。大多数时候，这种体验对用户是友好的。
但是，实际开发中，我们总会存在不希望用户刷新记住之前滚动位置的情况。
只需在页面中添加以下代码
```js
if (history.scrollRestoration) {
history.scrollRestoration = 'manual';
}
```
`history.scrollRestoration` 支持下面两个属性值：
- **auto**
默认值，表示滚动位置会被存储。
- **manual**
单词的意思就是手动。表示，滚动的位置不会被存储。
如果遇到这种需求，不再需要距离计算或者写返回顶部悬浮按钮，只需自信的写下这两行代码，简直高级还优雅！！！！
flat 扁平化数组
通常在扁平化数组的时候都要使用递归函数，flat方法避免了页面中写递归函数造成大量的代码冗余，flat本身也是使用递归方法来达到数组扁平化的，接收一个number类型的参数，参数是几就可以扁平几层，在不确定有几维数组的情况下，参数为Infinity（无限大），可以扁平任意层次的数组
const arr = [[[[["张张"]]]], [[["不秃头"]]], [[6]], "A", ["a"]];
//扁平参数对等的层数
const newArr = arr.flat(2);
console.log(newArr);//[ [ [ '张张' ] ], [ '不秃头' ], 6, 'A', 'a' ]
//使用Infinity关键字 可以扁平化任意层数数组
const newArr = arr.flat(Infinity);
console.log(newArr);//[ '张张', '不秃头', 6, 'A', 'a' ]
JSON.stringify()的第二三个参数
第二个参数replacer 参数有两种形式，可以是一个函数或者一个数组。作为函数时，它有两个参数，键（key）和值（value），函数类似就是数组方法 map、filter 等方法的回调函数，对每一个属性值都会执行一次该函数。如果 replacer 是一个数组，数组的值代表将被序列化成 JSON 字符串的属性名。
传入 replacer 函数的第一个参数
这里要说明的是，当你打印replacer作为函数的值时会发现第一个值居然不是第一项，反而是整个对象的键值对，如下
const showData = {
aaa: 2,
bbb: 3,
ccc: 4,
ddd: 5
};
JSON.stringify(showData, (key, value) => {
console.log(value);
return value;
})
// {aaa: 2, bbb: 3, ccc: 4, ddd: 5}
// 2
// 3
// 4
// 5
replacer 作为数组时，结果非常简单，数组的值就代表了将被序列化成 JSON 字符串的属性名。
复制代码
const jsonObj = {
name: "张张要努力",
dream: "茂盛的头发"
};
// 只保留 dream 属性的值
JSON.stringify(jsonObj, ["dream"]);
// "{"dream":"茂盛的头发"}"
很少用到的第三个参数space
space 顾名思义，直接上代码：
复制代码
const showData = {
aaa: 2,
bbb: 3,
ccc: 4,
ddd: 5
};
JSON.stringify(showData, null, "❤️");
// 接下来是输出结果
// "{
// ❤️aaa: 2,
// ❤️bbb: 3,
// ❤️ccc: 4,
// ❤️ddd: 5,
// }"
