写JS代码有哪些技巧，怎样写干净-群英

上一篇：JQuery省市联动的实现是怎样，用到哪些知识下一篇：用JavaScript如何判定和求100内的素数

在这篇文章中，我们来学习一下“写JS代码有哪些技巧，怎样写干净”的相关知识，下文有详细的讲解，易于大家学习和理解，有需要的朋友可以借鉴参考，下面就请大家跟着小编的思路一起来学习一下吧。

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代码有哪些技巧，怎样写干净”的文章就介绍到这了,更多相关内容请搜索群英网络以前的文章或继续浏览下面的相关文章，希望大家以后多多支持群英网络！

标签：写JS代码

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

上一篇：JQuery省市联动的实现是怎样，用到哪些知识下一篇：用JavaScript如何判定和求100内的素数