写出干净的 JavaScript 5 个小技巧

简介: 写出干净的 JavaScript 5 个小技巧

image.png

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


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... 时,多想一步,是否能稍加改造让代码看起来更加“干净”。


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


相关文章
|
21天前
|
前端开发 JavaScript UED
"前端小技巧大揭秘:JS如何将后台时间戳秒变亲切小时前、分钟前,让用户秒懂,提升互动体验!"
【10月更文挑战第23天】在Web开发中,将后台返回的时间戳转换为“小时前”、“分钟前”、“刚刚”等友好的时间描述是常见需求。本文介绍如何用JavaScript实现这一功能,通过计算当前时间和时间戳的差值,返回相应的描述,提升用户体验。
25 1
|
3月前
|
JavaScript 前端开发 Java
|
5月前
|
JSON JavaScript 前端开发
JavaScript 技巧:干净高效的代码写法
JavaScript 技巧:干净高效的代码写法
36 1
|
5月前
|
缓存 JavaScript 前端开发
js开发代码片段与小技巧
js开发代码片段与小技巧
30 2
|
6月前
|
JavaScript 前端开发 算法
< JavaScript小技巧:如何优雅的用【一行代码 】实现Js中的常用功能 >
在开发中,采用简洁的语法和结构,遵循一致的命名规范,具有良好的代码组织和注释,能很好的提高代码的质量。可读性:易于阅读和理解。清晰的命名、简洁的语法和良好的代码结构可以使代码的意图更加明确,降低理解代码的难度,提高代码的可读性。可维护性:易于维护。当代码逻辑清晰、结构简洁时,开发者可以更快速地定位和修复bug,进行功能扩展或修改。同时,可读性高的代码也有助于后续的代码重构和优化。可扩展性:更具有扩展性和灵活性。清晰的代码结构和简洁的代码风格使得添加新功能、修改现有功能或扩展代码更加容易。
< JavaScript小技巧:如何优雅的用【一行代码 】实现Js中的常用功能 >
|
6月前
|
前端开发 JavaScript
实用的JavaScript小技巧
这些JavaScript小技巧可以帮助你更加高效地编写代码,提高代码质量和可读性。
39 1
|
6月前
|
前端开发 JavaScript
写出干净的 JavaScript 5 个小技巧
写出干净的 JavaScript 5 个小技巧
|
6月前
|
存储 JavaScript 前端开发
js的一些小技巧
js的一些小技巧
|
6月前
|
存储 前端开发 JavaScript
几个一看就会的实用JavaScript优雅小技巧
几个一看就会的实用JavaScript优雅小技巧
|
存储 前端开发 JavaScript
5 个 实用的 JavaScript 开发小技巧
5 个 实用的 JavaScript 开发小技巧
222 0