如何写出干净的JS代码？5个编写小技巧分享

150 阅读 0 评论 99 点赞

我是靠谱客的博主专注犀牛，这篇文章主要介绍如何写出干净的JS代码？5个编写小技巧分享，现在分享给大家，希望可以做个参考。

如何写出干净的JS代码？下面本篇文章就来给大家整理分享5 个写出干净 JavaScript 的小技巧，希望对大家有所帮助！

降低阅读负担，启发创作心智，轻松学习 JavaScript 技巧，日拱一卒，jym，冲~

1. 将数字定义为常量

我们常常会用到数字，比如以下代码：

复制代码const isOldEnough = (person) => {
  return person.getAge() >= 100;
}1
2
3
const isOldEnough = (person) => {
  return person.getAge() >= 100;
}
登录后复制

谁知道这个 100 具体指的是什么？我们通常需要结合函数上下文再推测、判断这个 100 它可能是具体代表一个什么值。

如果这样的数字有多个的话，一定会很容易造成更大的困惑。

写出干净的 JavaScript：将数字定义为常量

即可清晰的解决这个问题：

复制代码const AGE_REQUIREMENT = 100;
const isOldEnough = (person) => {
  return person.getAge() >= AGE_REQUIREMENT;
}1
2
3
4
const AGE_REQUIREMENT = 100;
const isOldEnough = (person) => {
  return person.getAge() >= AGE_REQUIREMENT;
}
登录后复制

现在，我们通过声明常量的名字，即可立马读懂 100 是“年龄要求”的意思。修改时也能迅速定位、一处修改、多处生效。

2. 避免将布尔值作为函数参数

将布尔值作为参数传入函数中是一种常见的容易造成代码混乱的写法。

复制代码const validateCreature = (creature, isHuman) => {
  if (isHuman) {
    // ...
  } else {
    // ...
  }
}1
2
3
4
5
6
7
const validateCreature = (creature, isHuman) => {
  if (isHuman) {
    // ...
  } else {
    // ...
  }
}
登录后复制

布尔值作为参数传入函数不能表示出明确的意义，只能告诉读者，这个函数将会有判断发生，产生两种或多种情况。

然而，我们提倡函数的单一职责原则，所以：

写出干净的 JavaScript：避免将布尔值作为函数参数

复制代码const validatePerson = (person) => {
  // ...
}
const validateCreature = (creature) => {
  // ...
}1
2
3
4
5
6
const validatePerson = (person) => {
  // ...
}
const validateCreature = (creature) => {
  // ...
}
登录后复制

3. 将多个条件封装

我们经常会写出这样的代码：

复制代码if (
  person.getAge() > 30 &&
  person.getName() === "simon" &&
  person.getOrigin() === "sweden"
) {
  // ...
}1
2
3
4
5
6
7
if (
  person.getAge() > 30 &&
  person.getName() === "simon" &&
  person.getOrigin() === "sweden"
) {
  // ...
}
登录后复制

不是不行，只是隔久了会一下子看不懂这些判断到底是要干嘛的，所以建议把这些条件用变量或函数进行封装。

写出干净的 JavaScript：将多个条件封装

复制代码const isSimon =
  person.getAge() > 30 &&
  person.getName() === "simon" &&
  person.getOrigin() === "sweden";
if (isSimon) {
  // ...
}1
2
3
4
5
6
7
const isSimon =
  person.getAge() > 30 &&
  person.getName() === "simon" &&
  person.getOrigin() === "sweden";
if (isSimon) {
  // ...
}
登录后复制

或者

复制代码const isSimon = (person) => {
  return (
    person.getAge() > 30 &&
    person.getName() === "simon" &&
    person.getOrigin() === "sweden"
  );
};
if (isSimon(person)) {
  // ...
}1
2
3
4
5
6
7
8
9
10
const isSimon = (person) => {
  return (
    person.getAge() > 30 &&
    person.getName() === "simon" &&
    person.getOrigin() === "sweden"
  );
};
if (isSimon(person)) {
  // ...
}
登录后复制

噢，原来这些条件是为了判断这个人是不是 Simon ~

这样的代码是声明式风格的代码，更易读。

4. 避免否定的判断条件

条件判断中，使用否定判断，会额外造成一种思考负担。

比如下面的代码，条件 !isCreatureNotHuman(creature) 双重否定，读起来就会觉得有点费劲。

复制代码const isCreatureNotHuman = (creature) => {
  // ...
}

if (!isCreatureNotHuman(creature)) {
  // ...
}1
2
3
4
5
6
7
const isCreatureNotHuman = (creature) => {
  // ...
}

if (!isCreatureNotHuman(creature)) {
  // ...
}
登录后复制

写出干净的 JavaScript：避免否定的判断条件

改写成以下写法则读起来更轻松，虽然这只是一个很小的技巧，但是在大量的代码逻辑中，多处去遵循这个原则，肯定会很有帮助。

很多时候读代码就是读着读着，看到一个“很烂”的写法，就忍不了了，细节会叠加，千里之堤溃于蚁穴。

复制代码const isCreatureHuman = (creature) => {
  // ...
}
if (isCreatureHuman(creature)) {
  // ...
}1
2
3
4
5
6
const isCreatureHuman = (creature) => {
  // ...
}
if (isCreatureHuman(creature)) {
  // ...
}
登录后复制

5. 避免大量 if...else...

这一点，本瓜一直就有强调：

比如以下代码：

复制代码if(x===a){
   res=A
}else if(x===b){
   res=B
}else if(x===c){
   res=C
}else if(x===d){
    //...
}1
2
3
4
5
6
7
8
9
if(x===a){
   res=A
}else if(x===b){
   res=B
}else if(x===c){
   res=C
}else if(x===d){
    //...
}
登录后复制

改写成 map 的写法：

复制代码let mapRes={
    a:A,
    b:B,
    c:C,
    //...
}
res=mapRes[x]1
2
3
4
5
6
7
let mapRes={
    a:A,
    b:B,
    c:C,
    //...
}
res=mapRes[x]
登录后复制

再比如以下代码：

复制代码const isMammal = (creature) => {
  if (creature === "human") {
    return true;
  } else if (creature === "dog") {
    return true;
  } else if (creature === "cat") {
    return true;
  }
  // ...
return false;
}1
2
3
4
5
6
7
8
9
10
11
const isMammal = (creature) => {
  if (creature === "human") {
    return true;
  } else if (creature === "dog") {
    return true;
  } else if (creature === "cat") {
    return true;
  }
  // ...
return false;
}
登录后复制

改写成数组：

复制代码const isMammal = (creature) => {
  const mammals = ["human", "dog", "cat", /* ... */];
  return mammals.includes(creature);
}1
2
3
4
const isMammal = (creature) => {
  const mammals = ["human", "dog", "cat", /* ... */];
  return mammals.includes(creature);
}
登录后复制

写出干净的 JavaScript：避免大量 if...else...

所以，当代码中出现大量 if...else... 时，多想一步，是否能稍加改造让代码看起来更加“干净”。

小结：上述技巧可能在示例中看起来不值一提，但是在实际的项目中，当业务逻辑复杂起来、当代码量变得很大的时候，这些小技巧一定能给出正面的作用、帮助，甚至超乎想象。

【相关推荐：javascript学习教程】

以上就是如何写出干净的JS代码？5个编写小技巧分享的详细内容，更多请关注靠谱客其它相关文章！