很多人，都觉得自己写的代码没有错，写的很好。
实际上代码写的跟屎一样，完全没有良好的代码习惯
下面给大家提供几个好的代码习惯
1.多去使用卫语句
1.1什么是卫语句
卫语句（guard clauses）是一种改善嵌套代码的优化代码。将经过多级嵌套的代码使用卫语句优化之后，代码嵌套层数可以降低，因此改使用卫语句能降低代码的复杂程度。
卫语句是通过对原条件进行逻辑分析，将某些要害（guard）条件优先作判断，从而简化程序的流程走向，因此称为卫语句。
1.2使用卫语句
当我们试图提升代码健壮性时，为了处理各式各样的非法输入，自然而然地会使用到更多的条件段语句。而很多时候，我们会使用到大量的嵌套语句，比如当我们判断某个数是否是a，b，c的公倍数的时候我们就难免会写成如下的形式：
if (num%a == 0) {
if (num%b == 0) {
if (num%c == 0) {
}
}
return;
} 这样写的话首先是整体代码的结构很臃肿，其次是当我们的嵌套条件的数量一多的时候就很难判断各个条件之间的逻辑关系，不利于我们编写程序。 而当我们使用卫语句来编写时：
if (num%a != 0){
return;
}
if (num%b != 0){
return;
}
if (num%c != 0){
return;
}
return ;可以看到代码整洁了很多，而且各个条件之间相互独立了，这样更加方便我们独立考虑各种情况，从而更好地提升代码的健壮性。
说白了，就是使用return取代if...else
2.配置表取代硬编码
日常开发的类型判断是再常见不过的场景，比如我们有如下场景：
管理员的角色id为1,普通员工的角色id为2,超级管理员的角色id为3,每个角色对应显示页面上不同的按钮。普通员工只能查看列表，不能新增和编辑和删除，管理员和超级管理员都可以进行新增和编辑。只有超级管理员才能进行删除。于是我们有以下代码：
<template>
<div>
<el-button v-if="roleId !== 2" @click="handleClick">新增</el-button>
<el-button v-if="roleId !== 2" @click="handleClick">编辑</el-button>
<el-button v-if="roleId === 3" @click="handleClick">删除</el-button>
</div>
</template>
<script>
export default {
data() {
return {
roleId: null
}
},
created() {
this.roleId = localStorage.getItem('roleId')
if (this.roleId === 2) {
this.getNormalList()
}
if (this.roleId === 3) {
this.getSuperManageList()
}
if (this.roleId === 1) {
this.getManageList()
}
},
methods: {
handleClick() {
// 普通员工
if (this.roleId === 2) {
return
}
},
getManageList() {
},
getNormalList() {
},
getSuperManageList() {
}
}
}
</script>
复制代码可以看到，这一小部分示例代码里有很多写死的1、2、3。刚刚写好的时候不会有任何问题，但是随着我们页面越来越多，甚至项目中全局引入的时候，写死的数字满天飞。
终于有一天，事情发生了变化...
由于需求变更，后端角色字段需要调整。普通员工的字段要从2调整为4。心里暗暗的吐槽一番之后，我们傻眼了。
roleId满天飞，到处都是1、2、3。一处处找数字，一处处改。痛苦不易。
尤其是当满天飞的数字是离职跑路的人留下，而我们又刚接手的时候，这种痛苦只有自己知道...
其实这个就是我们常说的魔术字符串的的概念。魔术字符串就是指在代码之中多次出现、与代码形成强耦合的某一个具体的字符串或者数值。
优秀的代码应该及时发现并消除魔术字符串。我们看下如何优化：
<template>
<div>
<el-button v-if="roleId !== rolesConfig.normalRole" @click="handleClick">新增</el-button>
<el-button v-if="roleId !== rolesConfig.normalRole" @click="handleClick">编辑</el-button>
<el-button v-if="roleId === rolesConfig.superManagerRole" @click="handleClick">删除</el-button>
</div>
</template>
<script>
const rolesConfig = {
normalRole: 2,
managerRole: 1,
superManagerRole: 3
}
export default {
data() {
return {
roleId: null,
rolesConfig
}
},
created() {
this.roleId = localStorage.getItem('roleId')
if (this.roleId === rolesConfig.normalRole) {
this.getNormalList()
}
if (this.roleId === rolesConfig.superManagerRole) {
this.getSuperManageList()
}
if (this.roleId === rolesConfig.managerRole) {
this.getManageList()
}
},
methods: {
handleClick() {
// 普通员工
if (this.roleId === rolesConfig.normalRole) {
return
}
},
getManageList() {
},
getNormalList() {
},
getSuperManageList() {
}
}
}
</script>
复制代码你可能发现了，常用的消除魔术字符串的方法，其实就是把它写成一个变量。这样就可以消除耦合，以后我们只要维护一处代码配置就可以了。当然，你还可以通过import方式将config作为全局配置项供所有模块消费。
3.巧用JS隐式类型转换
JS是一门弱类型语言，不同type的变量可以相互转化。我们可以巧妙的利用这一特性，让我们的代码在做类型转换的时候，变得更简洁，更优雅。直接上代码：
- 快速转换Number类型：
// 字符串转数字代码对比
const price = parseInt('32'); //传统方式
const price = Number('32'); //传统方式
const price = +'32'; //新方式
// 日期转换为时间戳代码对比
const timeStamp = new Date().getTime(); //传统方式
const timeStamp = +new Date(); //新方式
//布尔转数字新方式
console.log(+true); // Return: 1
console.log(+false); // Return: 0
复制代码- 快速转换Boolean类型：
// 各种类型转布尔代码对比
const isTrue = Boolean('') //传统方式
const isTrue = !!'' //新方式
const isTrue = Boolean(0) //传统方式
const isTrue = !!0 //新方式
const isTrue = Boolean(null) //传统方式
const isTrue = !!null //新方式
const isTrue = Boolean(undefined) //传统方式
const isTrue = !!undefined //新方式
复制代码- 快速转换String类型：
// 数字转string代码对比
const num = 1;
const str = num.toString(); //传统方式
const str = num + ''; //新方式
链接：https://juejin.cn/post/7119382416602431501