![封面.jpeg](http://112.124.1.74/static/img/4770dc47b668bf9a979fee82f6e2db90.%E5%B0%81%E9%9D%A2.jpeg)
## 前言

在[Github Actions实现仓库自动同步Gitee并更新文档 - 掘金 (juejin.cn)](https://juejin.cn/post/7049317964281020446)文章前言中描述了笔者开源一个工具库。在持续更新库的时候，发现每一次更新[medash - npm (npmjs.com)](https://www.npmjs.com/package/medash)版本时，存在需要手动Git Push、执行rollup打包命令以及更新package.json文件中version字段值等操作。为解放双手，写了50+行代码。



## 实现终端交互选择版本号

版本号修改只考虑四种情况:

1. 更新主版本号, 如1.0.0修改成2.0.0
2. 更新子版本号，如1.0.0修改成1.1.0
3. 阶段版本号，如1.0.0修改成1.0.1
4. Beta版本，如1.0.0修改成1.0.0-beta.1

版本号的命名规则是由`.` 进行拼接，所以可以使用正则将版本信息获取出来。

首先，版本号信息存储在**package.json**`version` 字段值中，代码是使用了[TypeScript中文网 · TypeScript——JavaScript的超集 (tslang.cn)](https://www.tslang.cn/)。Ts执行时，**es6**模块化会被编译成node环境中支持的**CommonJS**模块化。即`import pkg from "../package.json";` 会被转化成`const pkg = require("../package.json")` 。 CommonJS标准规定，导入Json文件时，将会有把Json反序列化的操作，所以读取的json 已经被反序列化，不需要再`JSON.parse` 操作。

```TypeScript
import pkg from "../package.json";
const version = pkg.version;
const reg = /([1-9])\.([0-9])\.([0-9])(?:(\-\w*)\.([1-9]+))?/g;
const execs = reg.exec(version) as Array<any>;
```


然后，`npm install inquirer` 安装[inquirer ,](https://www.npmjs.com/package/inquirer)它是一个提供**终端交互**的工具包。

按照上述版本修改的四种情况，程序提供的版本号选择列表选择可以分成两种情况：

1. 版本号含有beta；
2. 版本号没有含有beta。

是否含有beta，通过对`execs[4]` 是否存在来判断。

```TypeScript
//...
const onSelectVersion = async () => {
    const beta = execs[4];
    //处理版本含有beta的情况
    const lists = beta ? getBetaVersionLists(beta) : getVersionlists();
    inquirer.prompt([{
        name: 'list',
        type: 'list',
        message: '请选择发布的版本:',
        choices: lists,
        default: [lists[0]]
    }])
    //...
}
```


处理含有beta的情况

```TypeScript
const getBetaVersionLists = (beta) => ([
    getVersion([execs[1], execs[2], execs[3]]),
    getVersion([execs[1], execs[2], execs[3]]) + `${beta}.${addOne(execs[5])}`
])
```


处理没有beta的情况

```TypeScript
const getVersionlists = () => ([
    getVersion([addOne(execs[1]), execs[2], execs[3]]),
    getVersion([execs[1], addOne(execs[2]), execs[3]]),
    getVersion([execs[1], execs[2], addOne(execs[3])])
])
```


其中`getVersion` 和`addOne` 方法分别用于拼接完整的版本号和数字+1

```TypeScript
const addOne = (num) => Number(num) + 1;
const getVersion = ([major, minor, patch]) => `v${major}.${minor}.${patch}`
```


不存在beta的效果：

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/82eeabdeec1e41598697bbc8350ba163~tplv-k3u1fbpfcp-zoom-1.image "")

存在beta的效果: 

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f67654744b4544289657cbdf15196bee~tplv-k3u1fbpfcp-zoom-1.image "")

> **注意点：**代码语言是使用**TypeScript**，所以执行时需要[ts-node - npm (npmjs.com)](https://www.npmjs.com/package/ts-node)工具帮我们编译下。


`npm run release` 是自定义命令，在文件package.json的scripts下配置即可。

```JSON
//...
    "scripts": {
        //..
        "release": "ts-node scripts/release.ts"
    },
//...
```


![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ae2fc7681f2b46ccbb59e494f4e35c07~tplv-k3u1fbpfcp-zoom-1.image "")

最后，导入node文件模块，将选择确定后的版本号重新赋值给version，再写入package.json

```TypeScript
//...
import path from "path";
import fs from "fs";
//...
const onSelectVersion = async () => {
    const beta = execs[4];
    //处理版本含有beta的情况
    const lists = beta ? getBetaVersionLists(beta) : getVersionlists();
    inquirer.prompt([{
        name: 'list',
        type: 'list',
        message: '请选择发布的版本:',
        choices: lists,
        default: [lists[0]]
    }]).then(async ({ list }) => {
        pkg.version = list
        //...
        fs.writeFile(path.join(__dirname, '../package.json'), String(JSON.stringify(pkg)), 'utf8', async (error) => {
            if (error) {
                return;
            }
            //...
        });
    })
}

```


好了，一个版本选择的功能就完成了。

## 跟Shell语言说再见

版本选择完成，接下来需要处理Git一系列命令提交代码、Git自动打Tag以及向Npm更新等操作。

需要处理命令有：

```Bash
git add .
git commit -m xx
git tag **
git push origin ** //向远程仓库提交tag
git push origin branch

npm run build //rullop打包
npm publish //npm 发版

```


其中`npm run build` 将执行[rullop](https://www.rollupjs.com/)打包

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/41c0a32e224a4270b6aa922fdc9c2499~tplv-k3u1fbpfcp-zoom-1.image "")

在终端中自动化执行一些命令，这个时候就需要[Shell](https://www.runoob.com/linux/linux-shell.html)，创建Shell文件去完成对应的逻辑。作为前端工程师就需要去学习下Shell，有学习成本。

秉承能用Js实现的最终用Js实现的想法，node [child_process 子进程](http://nodejs.cn/api/child_process.html)模块中提供了可执行Shell命令的API。

当然还有更便捷的工具[zx](https://www.npmjs.com/package/zx),由google开源。

`npm i zx`安装zx，导入zx，`#!/usr/bin/env zx` 是zx要求的。

```TypeScript
#!/usr/bin/env zx
/...
import { $ } from 'zx';

```


正则匹配获取当前Git 分支：

```TypeScript
const onSelectVersion = async () => {
    const beta = execs[4];
    //处理版本含有beta的情况
    const lists = beta ? getBetaVersionLists(beta) : getVersionlists();
    inquirer.prompt([{
   //...
    }]).then(async ({ list }) => {
        pkg.version = list
        let branch = await $`git branch`;
        const { stdout } = branch;
        const reg = /\*\D(.+)\D/g;
        branch = (reg.exec(stdout) as any[])[1];
        fs.writeFile(path.join(__dirname, '../package.json'), String(JSON.stringify(pkg)), 'utf8', async (error) => {
            if (error) {
                return;
            }
            //...
        });
    })
}
```


按顺序执行命令

```TypeScript
const onSelectVersion = async () => {
     //..
    inquirer.prompt([{
     //...
    }]).then(async ({ list }) => {
      //...
        fs.writeFile(path.join(__dirname, '../package.json'), String(JSON.stringify(pkg)), 'utf8', async (error) => {
            if (error) {
                return;
            }
            await $`git add .`;
            await $`git commit -m ${list}`;
            await $`git tag ${list}`;
            await $`git push origin ${list}`;
            await $`git push origin ${branch}`;
            await $`npm run build&&npm publish`;
        });
    })
}
```


[zx](https://www.npmjs.com/package/zx)方法`$` 原理是使用了 [child_process 子进程](http://nodejs.cn/api/child_process.html)模块中`spawn` 方法

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6ed08b73a84d42f8aee288cdbaba8a18~tplv-k3u1fbpfcp-zoom-1.image "")

![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7c5e2164bcd94e9389bfb85c1575b7dd~tplv-k3u1fbpfcp-zoom-1.image "")

到此，一个简简单单的脚本就完成了，算上空行一共就50+行。

## 最后

实现逻辑非常简单，没有什么难点。工作中肯定也会有一些需要反复做的事件，我们需要多去思考能否将其简化，学会做一个"会偷懒"的工具人。

感谢阅读，文章涉及的代码已开源，欢迎下载尝试[**release.ts**](https://github.com/CatsAndMice/medash/blob/dev/scripts/release.ts)。

50+行代码搞定一行命令更新Npm包

![](https://i.bmp.ovh/imgs/2021/11/f954aa01aa7d87d8.gif)




## 前言

打工人的无奈，公司要求每个人都要进行培训。为了完成它，上网找出好几个demo，都没有勾起我动手实现一波的欲望。日常浏览掘金时，偶然看到一篇[【中秋】纯CSS实现日地月的公转](https://juejin.cn/post/7006507905050492935?share_token=f590fc56-341d-48e7-bdd4-69c57fe98419)，决定就是它了。

实现效果: [日地月公转 (codepen.io)](https://codepen.io/lihai-boop/pen/RwZzawj)

## 实现日地月公转

### HTML5布局

布局方面非常简单，使用三个`div` 分别表示日，地，月，另外再加`div.contian` 进行包裹

```html
<div class="contian">
    <div class="sun"></div>
    <div class="earth">
        <div class="moon"></div>
    </div>
</div>
```

### 设置全局背景

`body` 天生自带`margin:8px;` 影响布局，去除即可

`html，body` 均为块级元素，独占一行，但高度不会占满窗口高度。我们需要让其撑满整个窗口，设置它们的高度为`height:100vh;`

```css
html,
body {
    margin: 0;
    padding: 0;
    background-color: #2f3141;
    height: 100vh;
}
```

### 定位居中

我们需要将所有内容都相对浏览器窗口居中展示，居中方式有：`flex,grid` 布局，定位以及设置`margin` 等。

这里绘图说明下如何`margin`居中:

给内容具体的宽高并设置`margin-left:aute;margin-right:aute;` 另外通过`calc((100vh - 内容高度) / 2)`

得到`margin-top` 的值。
![image.png](http://112.124.1.74/static/img/b25372865c1bce01b6be3704a870c7ac.image.png)
当然使用`margin`居中麻烦，这里我只提供一个思路。

日地月居中，我选择使用定位完成

`body` 是占满窗口的，我们以`body` 进行绝对定位。定位前需要给`body`设置相对定位属性`position: relative;` 然后给`div.contian` 添加绝对定位属性`position: absolute;`

```css
html,
body {
    margin: 0;
    padding: 0;
    background-color: #2f3141;
    position: relative;
    height: 100vh;
}

.contian {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 500px;
    height: 500px;
    border: 1px solid #ccc;
    transform: translate(-50%, -50%);
}
```

绝对定位时，`top,left` 值是以`div.contian` 左上角为准，所以当`left:50%;right:50%` `div.contian` 并没有达到居中的效果，`left,right` 值页面需要减`div.contian`自身宽高的值。

为了达到效果，我使用了 `transform: translate(-50%, -50%);` 让其以自身的宽高为准向X轴，Y轴，各移动`-50%` 。

设置`transform` 可以理解为创建了一个三维坐标如下图，不同的是Z轴是正对屏幕，面对屏幕前的您。这里对`transform` 不做过多文字描述
![image.png](http://112.124.1.74/static/img/0c1a97d1e254a027f892f35a97da6cc2.image.png)
为了更直观的看到效果，我给`div.contian`加了一个`border`边框
![image.png](http://112.124.1.74/static/img/cc25b1a86c2a5d07897435f9e8a4871c.image.png)
### 模拟实现太阳

同理，使`div.sun` 相对`div.contian` 绝对定位居中。设置`border-radius:50%`绘制成圆形,`backgroud`使用线性渐变` linear-gradient`填充；为了效果更佳，给`div.sun` 一定的外阴影

给`div.sun`元素设置宽高，给外阴影  `box-shadow: 0 0 8px 8px rgba(242, 120, 75, 0.2);`

```css
.sun {
    position: absolute;
    border-radius: 50%;
    height: 200px;
    width: 200px;
    left: 50%;
    top: 50%;
    background: linear-gradient(#fcd670, #f2784b);
    transform: translate(-50%, -50%);
    box-shadow: 0 0 8px 8px rgba(242, 120, 75, 0.2);
}
```

太阳效果如图：
![image.png](http://112.124.1.74/static/img/bc1daf33e432fc5063c2e0247967e773.image.png)
### 模拟实现地球

#### 地球公转轨道

地球会绕太阳进行运动，运动的轨道是一个圆形的，我们可以给`div.earth` 宽高设置与最外层`div.contian` 一致

为直观我也给`div.earth`添加了一个`border` 属性

```css
.earth {
    width: 500px;
    height: 500px;
    border-radius: 50%;
    border:1px solid #f2784b;
}
```

这个圆边框将用于地球公转运动轨道

#### 伪元素`::before`实现行星

行星都用一个圆进行模拟，同理使用 `border-radius: 50%;` 给背景渐变色。将地球定位至地球公转轨道正上文 也就是`div.earth` 的正上方

```css
.earth {
  //...
  position: relative;
}
.earth::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: linear-gradient(#19b5fe, #7befb2);
    border-radius: 50%;
}
```

地球效果如图：
![image.png](http://112.124.1.74/static/img/d47a58cdabec6d91b1b0691cde23e0a8.image.png)
#### 伪元素`::after`实现行星尾巴

行星尾巴使用`border` 模拟，设置`::after`伪元素`width:100%;heigth:100%;`,占满`div.earth`

给`::after`伪元素`border-top:px solid silver;border-left:22px solid transparent;`

将`div.earth`的`border`去除，这个时候我们可以清楚的看到行星尾巴已经出来了
![image.png](http://112.124.1.74/static/img/c0a98bb635ad3fc388ac10164e39c829.image.png)
但行星尾巴并没有与地球交接在一起，这里可以通过设置`transform`中的`rotateZ`,让其绕Z轴逆时针旋转一定角度
![image.png](http://112.124.1.74/static/img/e59943bb834af655162fa7d97821bb0d.image.png)
此时，地球完成了，只差让其绕太阳旋转

给`div.earth`元素添加`animation`属性，定义动画关键帧`keyframes` ,让`div.earth` 一直Z轴是顺时针旋转

```css
.earth {
    width: 500px;
    height: 500px;
    border-radius: 50%;
    position: relative;
    animation: rotate 20s linear infinite;
}

@keyframes rotate {
    0% {
        transform: rotateZ(0deg);
    }

    100% {
        transform: rotateZ(360deg);
    }

}

.earth::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: linear-gradient(#19b5fe, #7befb2);
    border-radius: 50%;
}
 .earth::after {
      position: absolute;
      content: "";
      width: 100%;
      height: 100%;
      border-top: 2px solid silver;
      border-right: 2px solid transparent;
      border-radius: 50%;
      transform: rotateZ(-52deg);
  }
```

添加动画属性后效果：


![image.png](http://112.124.1.74/static/img/147574d00fac81af05e4ad978a83d72c.image.png)
### 模拟实现月亮

```html
<div class="earth">
    <div class="moon"></div>
</div>
```

html布局上，`div.moon`被`div.earth`包裹，所以我们依然通过定位，将`div.moon` 固定至地球公转轨道正上文 也就是`div.earth` 的正上方

月亮公转轨道圆应大于地球

```css
.moon {
    position: absolute;
    left: 50%;
    top: 0;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 1px solid #19b5fe;
    transform: translate(-50%, -50%);
}
```

为直观我给`div.moon` 添加了`border`
![image.png](http://112.124.1.74/static/img/147574d00fac81af05e4ad978a83d72c.image.png)
留下的就是使用`div.moon`的伪元素模拟出月亮与月亮旋转的尾巴,思路与模拟实现地球相同

到此，文章不再添加文字描述思路

最后将不必要的`border`删除，一个有手就会的日地月公转就完成了

完整代码不贴出来了，想要源码移步[日地月公转 (codepen.io)](https://codepen.io/lihai-boop/pen/RwZzawj)

当然，还可以扩展实现3D效果的公转自转，有兴趣的小家伙可以实现下
![image.png](http://112.124.1.74/static/img/e361013156bc3cd0880e65b81046b32d.image.png)
[实现行星公转自转 (codepen.io)](https://codepen.io/lihai-boop/pen/porMoMW)
## 总结

文章使用定位，`transform`,`animation` 等css3属性，从0到1实现了日地月公转

有手就会系列——实现日地月公转

五年后的自己，你好！你是否已经达成自己的职业目标？五年前的你，凭一腔热血选择互联网行业，并立志做出自己的成绩。

​		不管五年后的你如何，希望今天我写给你的话，可以让你想起当年下定决心。激励你继续努力下去,切勿懒散！

​		一, 我知道生活，工作压力大，但不要将全部压力自己担着。三十岁前拿命挣钱，三十岁后拿钱换命。每天再累也不要忘记锻炼身体，身体健康才是资本，不要懒。因为你没有经济资本生病，这是最重要的一点！

​      二,学习学习还是学习。2020年春节发生的一场疫情，全国人民被迫按下的暂停键，全民宅家。在这段时间里，我阅读专业，理财类书籍逐渐养成读书的习惯。希望五年后的你还保持着，我向往与b站知识区的up主们一样才华横溢。理性的眼光看待生活中的事情 。

​		三,成为高级前端工程师，现在的我面临的是就业压力。我相信凭现在我的能力在小公司找一份工作很容易了，但这不是我想要的，我想要的是进入大厂工作学习。为此我每天都在学习，写代码，无论当前目标能不能实现。希望五年后的你没有放弃提高专业能力的想法，珍惜一切机会提升自己，早日成为高级前端工程师，始终向进入一线大厂奋斗。

​		四，学习理财知识，培养财商。职业是不能帮你实现财富自由的。五年后的你，工作稳定，有一定的抗风险能力，也多多少少有一些存款，希望你尝试定投基金或股票。

​		五, 工作再忙也不要忘记陪陪父母。父母思想老旧，相处起来伤脑筋，希望你可以收敛自己的浮躁，多一点耐心对待父母,找时间带父母一起去旅游。她们真的劳累大半辈子了。

​	   一共五点要求，希望五年后的你能看到我今天写的话。反省自己做到了多少，写这么多的目的还是希望你不忘初心，不要浪费青春。不要重走父母的道路，一辈子都在底层混日子，看不到出头之日。  

**文章发布时间为：2020-10-05**

写给五年后的自己

标题没毛病，叫我靓仔🤵‍♂️就好了！！！

![image_aW2MlUTedo.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a2199655ba63461a8b5c24b8193c149f~tplv-k3u1fbpfcp-watermark.image?)



## 回顾上半年

*   吃饭的工具升级，手机、电脑💻全部换成了苹果设备；

    设备升级，给我的收益🉐是️工作效率提升。

    对我最有用的功能是捆绑应用——提醒事项，它能每天提醒我需要去完成的事项。
    
    ![image_duzBiNBLZ2.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ec6abeca73c94c308e0ece649e859f1a~tplv-k3u1fbpfcp-watermark.image?)

    合理安排时间，五月初至现在已经坚持有两个月啦。

    不追求事事都完成✅，每天心里有点小目标，不摆烂！！！

*   坚持运动；  

    ![image_MwgRt0s-Uu.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0e72d01f247e470db9789149bcb9190f~tplv-k3u1fbpfcp-watermark.image?)
    ![image_NPqQyfhJDs.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3149605598604495aff32a2faf636aeb~tplv-k3u1fbpfcp-watermark.image?)
    
    ![image_xjSh67JoEn.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/87a9c8cd12354637b3876c9bfcf3bbf3~tplv-k3u1fbpfcp-watermark.image?)
    
    ![image_C1y4COA-GT.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8571d04e57274f618a34c32f24be4c79~tplv-k3u1fbpfcp-watermark.image?)


    每天工作时长8小时，坐的时间占5-6小时，导致有段时间腰酸背痛。意识到这样早晚要嗝屁💀了，从三月份开始逐渐去养成运动的习惯。室外行走散步，室内练某几项动作。

    身体是革命的本钱嘛！

*   坚持阅读专业文章、输出文章；

    上半年输出原创文章6篇，掘金平台共输出原创文章数13篇

    **推荐一读**：

    [定义一个常量，它真的不变吗？](https://juejin.cn/post/7113830483837845518 "定义一个常量，它真的不变吗？ - 掘金 (juejin.cn)")

    [仿Mac程序坞放大动画](https://juejin.cn/post/7098327859122405383 "仿Mac程序坞放大动画 - 掘金 (juejin.cn)")

    [玩转nodeJs文件模块](https://juejin.cn/post/7072972877628178440 "玩转nodeJs文件模块 - 掘金 (juejin.cn)")

    [50+行代码搞定一行命令更新Npm包](https://juejin.cn/post/7068969844607189029 "50+行代码搞定一行命令更新Npm包 - 掘金 (juejin.cn)")

    [Github Actions实现仓库自动同步Gitee并更新文档](https://juejin.cn/post/7049317964281020446 "Github Actions实现仓库自动同步Gitee并更新文档 - 掘金 (juejin.cn)")

    [有手就会系列——实现日地月公转](https://juejin.cn/post/7035597833864478733 "有手就会系列——实现日地月公转 - 掘金 (juejin.cn)")

    [ffmpeg视频压缩踩坑总结](https://juejin.cn/post/7025189268733558791 "ffmpeg视频压缩踩坑总结 - 掘金 (juejin.cn)")

    [实现懒加载的四种方式](https://juejin.cn/post/7004460061984555021 "实现懒加载的四种方式 - 掘金 (juejin.cn)")

    [深入剖析This机制](https://juejin.cn/post/6979944155610873887 "深入剖析This机制 - 掘金 (juejin.cn)")

    曾信誓旦旦在朋友圈立下冲掘金Lv4，但现在才渣渣Lv2🤕 ，离Lv4还差个十万八千里，有点小尴尬。这方面还要多勤快点，量变引起质变。

    时光不负，创作不停！

*   活跃Github社区；

    开源一个工具库:&#x20;

    [CatsAndMice/medash: 前端JavaScipt业务代码工具库🚀 🚀 (github.com)](https://github.com/CatsAndMice/medash "CatsAndMice/medash: 前端JavaScipt业务代码工具库🚀 🚀 (github.com)")

    **推荐一读**中有两篇是介绍开发工具库中实现自动化的实践。最近把工具库自动化完善了下，并且增加自动生成文档的功能，后续我会针对该功能再输出一篇实现自动化生成文档的文章。

    开源一个Git小脚本:&#x20;

    [CatsAndMice/coco-git: 一个自动创建、推送git tag脚本 (github.com)](https://github.com/CatsAndMice/coco-git "CatsAndMice/coco-git: 一个自动创建、推送git tag脚本 (github.com)")

    欢迎Star😁。

    2021下半年至2022年上半年Github commit量:
  ![image_LyW9D4dCLA.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/51a3534052ce425da26e2bb0d9e2c03f~tplv-k3u1fbpfcp-watermark.image?)

*   学习

    大二开始敲代码，到今天已经有2.5年。在校喜欢看视频，也像大部分人一样全网收集学习资料，然后就没有然后了，我百度网盘一堆资料，收藏等于学会。

    工作后，基本不看视频，也不喜欢电子书，更不会去收集大把资料，偏向于买有点深度的实体书。

    Vue.js 官方团队成员霍春阳今年出了本新书《Vue.js设计与实现》，所以上半年一直在啃它，并且在Github创建了一个仓库，用于跟着作者思路自己也敲一遍，抄也要抄一遍，完成阅读进度70%。

    [CatsAndMice/vue3\_source\_code\_learn: Learn Vue3 (github.com)](https://github.com/CatsAndMice/vue3_source_code_learn "CatsAndMice/vue3_source_code_learn: Learn Vue3 (github.com)")

    硬骨头🦴，为了以后面试吹牛逼，必须敲碎咽下去。

    重温了一遍《JavaScript设计模式与开发实践》，设计模式编程内功，永远不过时。每隔一段时间再看都能有不一样的认知。
   
    ![image_7-RnAJDvJV.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6cbb4b093cfb4ed08f798804f12085dd~tplv-k3u1fbpfcp-watermark.image?)

    专业/理财类书籍是我比较喜欢看的种类，跟money挂钩嘛🪝。

*   今年上半年最最最高兴的一件事——升职加薪。

    敏感话题，一笔带过。
    
    ![image_RRHKNQORI6.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/58cf26f077254b55aa755caec5dd43bc~tplv-k3u1fbpfcp-watermark.image?)

回顾完。

## 下半年展望

*   [ ] 坚持运动；

*   [ ] 坚持使用提醒事项应用；

     > 养成不易，不能轻易废了！！！

*   [ ] 坚持输出原创文章，冲掘金Lv4；

    > 撸起裤腿冲就完事。

*   [ ] 学做饭,这项我一直有在行动，奈何手艺不佳；

    > 会做饭的靓仔肯定少💪。

*   [ ] 《Vue.js设计与实现》未读章节收尾；

*   [ ] 读完《数据结构与算法JavaScript描述》，创建仓库同步练习；

    > 这本书是我大学买的，一直放着都积灰了。

嗯，够了，工作、生活琐事它们占我大部分时间。Flag立太多，完不成没有意义。

靓仔的年中总结

![image.png](http://112.124.1.74/static/img/d58668947fe99e6e69234b045464b5c4.image.png)
1. **ES2019-2022新特性均再nodeJs，浏览器版本支持环境下演示；如实际操作中报错，请考虑兼容性**，推荐使用bebal
2. 文章列举的特性并不是ES2019-2022全部特性，只摘录其中个人认为较实用的




### ES2019

#### `try...catch(e)...`简化  

`try...catch(e)...`其中`e`变成可选，不需要再额外处理

```js
try {
    throw new Error(1);
} catch {
    console.log('报错了!');
}
```



#### `Symbol([description])` 可获取描述 

增加获取`descruption`描述的属性`descruption`

```js
let sb = Symbol('symbol');
console.log(sb.description);//symbol
```



#### `Object.fromEntries(iterable)`

`Object.fromEntries(iterable)`将键值对列表转换成一个对象，`iterable`可为`Array,Map`以及其它**可迭代对象**

```js
const myMap = new Map([['key1', 'value1'], ['key2', 'value2']]);
console.log(Object.fromEntries(myMap));//{ key1: 'value1', key2: 'value2' }
```



```js
let oneArr = [['key1', 'value1'], ['key2', 'value2']];
console.log(Object.fromEntries(oneArr));//{ key1: 'value1', key2: 'value2' }
```

`Object.entries()`与`object.fromEntries()`相反

```js
let obj = { key1: 'value1', key2: 'value2' }
console.log(Object.entries(obj));//[[ 'key1', 'value1' ], [ 'key2', 'value2' ]]
```



#### `Array.flat(num)` 

`Array.flat(num)`多维数组拍平，`num`表示拍平几维数组，传入`infinity`无论多少维都会被拍平,`num`默认为1

```js
let arr = [['key1', 'value1'], ['key2', 'value2']];
console.log(arr.flat(),arr);//[ 'key1', 'value1', 'key2', 'value2' ] [[ 'key1', 'value1' ], [ 'key2', 'value2' ]]
```



```js
let arr = [['key1', 'value1'], ['key2', 'value2', ['key3', 'value3']]];
console.log(arr.flat());[ 'key1', 'value1', 'key2', 'value2', [ 'key3', 'value3' ] ]
console.log(arr.flat(2));//[ 'key1', 'value1', 'key2', 'value2', 'key3', 'value3' ]
```



```js
let arr = [['key1', 'value1'], ['key2', 'value2', ['key3', 'value3']]];
console.log(arr.flat(Infinity));//[ 'key1', 'value1', 'key2', 'value2', 'key3', 'value3' ]
```



#### `Array.flatMap()`  

`Array.flatMap()` 等价于`Array.map(val=>[val*2]).flat()`

```js
let arr = [1,2,3];
console.log(arr.flatMap(val => val * 2));//[ 2, 4, 6 ]
//当数组结构层次为1时，flatMap与map方法一致
console.log(arr.map(val=>val*2));//[ 2, 4, 6 ]
```



```js
let arr = [1,2,3];
let arr = [1, 2, 3];
console.log(arr.map(val => [val * 2]));//[ [ 2 ], [ 4 ], [ 6 ] ]
//flatMap 
console.log(arr.flatMap(val => [val * 2]));//[ 2, 4, 6 ]
```



#### `String.trimStart()`与`String.trimEnd()` 

`trimLeft，trimRight`分别是`trimStart,trimEnd`的别名，作用为删除字符串开头或结尾的空格

```js
let str1 = ' 2',
    str2 = '2 '
console.log(str1.trimStart());//"2"
console.log(str1.trimLeft());//"2"

console.log(str2.trimEnd());//"2"
console.log(str2.trimRight());//"2"

```





### ES2020

#### 统一全局环境命名`globalThis`

浏览器全局环境是`window`,nodeJs全局环境是`global`; ES2020增加`globalThis`,统一nodeJS与浏览器全局对象

浏览器环境

```js
window === globalThis;//true
```

nodeJs环境

```js
global === globalThis;//true
```



#### 可选链操作符`?.`

> 我愿称之为最强

```js
globalThis.a ? globalThis.a() : null;
```

   判断`a`函数是否存在，存在则执行；

不了解决`?.`前,实际开发用三元运算，知道后`?.`一把梭

```js
globalThis.a?.();
```



```js
let obj = {
    name:'js',
    age:25,
    sex:'male'
}
let sex = obj?.sex;//相当于 let sex = obj?obj.sex:undefined;
```



#### 动态`import`引入

该特性出来前,使用`import`加载文件，必须声明在文件最上层；对执行过程中无法通过判断来是否加载`import`引入的模块，做不到按需加载。

```js
//报错!
if(a){
 import './...';  
}
```



动态引入 ,动态引入会返回一个`promise`

```js
if(a){
    import('./..').then(res=>{
        //...
    })
}
```

当然可能使用`await`,**新特性中`await`**可以在单独使用，不一定要嵌套在`async`下

```js
if(a){
   await import('./..');
}
```





#### `BigInt`允许超出安全数字范围`Math.pow(2,53) - 1`

```js
const previousMaxSafe = BigInt(Number.MAX_SAFE_INTEGER);//9007199254740991n
const maxPlusOne = previousMaxSafe + 1n;//9007199254740992n
```



#### 空值合并运算符`??`

当左侧为`null`或`undefined`时，返回右侧值

```js
let value = globalThis.value ?? 1;
console.log(value);//1
```



```js
let value = 0 ?? 1;
console.log(value);//0
```





### ES2021

#### 数字支持`_`分隔

```js
let value = 1_000_000;
console.log(value);//1000000
```



#### 逻辑空赋值`??=,||=,&&=`

当左侧为`null或undefined`时对其赋值，`||=,&&=`同理

```js
let a;
a??=1; // 当a为null或undefined时，a被赋值为1
console.log(a);//1
```



#### `String.prototype.replaceAll()`替换全部

```js
'1 2 3 1'.replace('1','2');//"2 2 3 1"
'1 2 3 1'.replaceAll('1','2')//"2 2 3 2"
```



#### `Promise.any()`

`Promise.any()`浏览器暂未全部支持，已列案([TC39 第四阶段草案](https://github.com/tc39/proposal-promise-any))

`Promise.any()`接收一个[`Promise`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise)可迭代对象，只要其中的一个 `promise` 成功，就返回那个已经成功的 `promise`

```js
const promise1 = new Promise((resolve,reject)=>{
    reject(1);
})
const promise2 = new Promise((resolve,reject)=>{
    reject(2);
})
const promise3 = new Promise((resolve,reject)=>{
    reject(3);
})

Promise.any([promise1,promise2,promise3]).then(res=>{
    console.log('有promise已成功!');
})
```





### ES2022(待扩展补充)

#### `class`增加定义私有类字段

定义私有方法,私有字段，使用`#`作为前缀

```js
class Person{
    //私有方法
    #getAge(){
     return this.age;
	}
}
```



### 最后

期待各位同学指点补充！

觉得文章有用的同学点赞一波!



### 参考

[解读ES2020（ES11）新特性 - 简书 (jianshu.com)](https://www.jianshu.com/p/3e59df36342a)

[类元素 - JavaScript | MDN (mozilla.org)](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Classes/Public_class_fields)

[[译\]ECMAScript 2021: 最终功能集确定｜技术点评 (juejin.cn)](https://juejin.cn/post/6939061526154182686)

ES2019-2022实用新特性