在日常开发中，有很多值的我们注意的编码细节。这些细节可能看起来都很简单容易，不太能引起我们的注意，但是其实如果我们能把它们掌握并养成习惯，会给我们带来很多看不见的益处。

本文重点整理了4个简单又不被熟知的良好编码细节。结合实际业务场景代码，为大家详细分析每一个好的细节习惯能带来哪些好处和具体原因解释。希望能给广大初中级开发者在日常工作中带来一点点实在的帮助。

console.log({name})取代console.log(‘name’, name)

当我们有一个变量名需要在控制台打印的时候，很多人都习惯于这样写：

console.log('name', name)

这种写法本身没有问题，但是会有一些小问题：

  1. 代码长度较长，字符串无法自动补全需要复制粘贴，变量名较长的情况更为明显。
  2. 表现不直观，如果name是一个对象，展开的时候占位太高我们会经常找不到开头的name在哪。

有了ES6，我们其实完全可以这样写：

console.log({name})

这种写法在结果上，可以和上面的写法达到一样的目的。但是不管是代码简洁程度、还是可读性上，都可以得到更友好的提升。尤其是name是一个对象的时候，效果更为明显。

虽然是很简单的一行代码，但是效果还是比较实用的。

return取代if…else

假如我们有以下代码：

if (condition1) {
  // do condition1 
} else if (condition2) {
  // do condition2
} else if(condition3) {
  // do condition3
}

这个写法逻辑上没有问题，但是当日后if条件增加的时候，越来越多的if else 阅读起来费劲不说，更难受的是，当我们需要删除一个条件的时候，我们需要很小心的找到每一个if else对应的{}，更没办法直接选中代码直接删除。其实我们完全可以改成return形式让代码变得更简洁、更易读，且更容易编辑。

if (condition1) {
  // do condition1 
  return;
}

if (condition2) {
  // do condition2
  return;
}

if (condition3) {
  // do condition3  
  return;
}

可能你会说，这么简单的东西，还要写出来，谁不会呢？

但是看起来是很简单，大家都一眼就能看懂的改动，其实根据笔者的经验，很多有经验的老手，都会时常忘记这个小细节。

配置表取代硬编码

日常开发的类型判断是再常见不过的场景，比如我们有如下场景：

管理员的角色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作为全局配置项供所有模块消费。

巧用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 + ''; //新方式

总结

除此之外，还有很多平时常见书写好习惯，比如：三元表达式、默认初始值、解构赋值巧取key等，这里就不一一介绍了。我们此次介绍的4个特性，希望可以引起大家的注意，让我们的代码变得更加美好~

这些好的习惯，有些可能当时不会给我们带来立竿见影的效果，但是随着时间慢慢迭代，总有一天我们能享受到这些好的习惯带来的长久益处。这些益处主要体现在代码日后的可读性、可维护性和可扩展性上。

作者：掘金干货君
链接：https://juejin.cn/post/7119382416602431501