怎么写出干净的JS代码

本篇内容介绍了“怎么写出干净的JS代码”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

十多年的永修网站建设经验，针对设计、前端、开发、售后、文案、推广等六对一服务，响应快，48小时及时工作处理。全网整合营销推广的优势是能够根据用户设备显示端的尺寸不同，自动调整永修建站的显示方式，使网站能够适用不同显示终端，在浏览器中调整网站的宽度，无论在任何一种浏览器上浏览网站，都能展现优雅布局与设计，从而大程度地提升浏览体验。创新互联从事“永修网站设计”,“永修网站推广”以来，每个客户项目都认真落实执行。

1. 将数字定义为常量

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

const isOldEnough = (person) => {
  return person.getAge() >= 100;
}

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

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

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

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

const AGE_REQUIREMENT = 100;
const isOldEnough = (person) => {
  return person.getAge() >= AGE_REQUIREMENT;
}

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

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

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

const validateCreature = (creature, isHuman) => {
  if (isHuman) {
    // ...
  } else {
    // ...
  }
}

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

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

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

const validatePerson = (person) => {
  // ...
}
const validateCreature = (creature) => {
  // ...
}

3. 将多个条件封装

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

if (
  person.getAge() > 30 &&
  person.getName() === "simon" &&
  person.getOrigin() === "sweden"
) {
  // ...
}

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

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

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)) {
  // ...
}

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

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

4. 避免否定的判断条件

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

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

const isCreatureNotHuman = (creature) => {
  // ...
}

if (!isCreatureNotHuman(creature)) {
  // ...
}

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

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

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

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){
    //...
}

改写成 map 的写法：

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;
}

改写成数组：

const isMammal = (creature) => {
  const mammals = ["human", "dog", "cat", /* ... */];
  return mammals.includes(creature);
}

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

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

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

“怎么写出干净的JS代码”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站，小编将为大家输出更多高质量的实用文章！