提升JavaScript代码质量的最佳实践

更新日期: 2024-04-02阅读: 151标签: 代码

在JavaScript编程中,代码质量优化是一项重要的技能。它可以帮助我们提高代码的可读性、可维护性和性能。本文将通过一些实际优化过程中的案例,展示如何通过一些技巧和最佳实践,使我们的代码更加优雅。

1. 避免嵌套循环

嵌套循环会增加代码的复杂度,使其难以阅读和维护。我们可以通过将内部循环提取为一个单独的函数来优化代码。

优化前:

for (let i = 0; i < array1.length; i++) {
  for (let j = 0; j < array2.length; j++) {
    // 一些复杂的逻辑
  }
}

优化后:

function processInnerLoop(item) {
  for (let j = 0; j < array2.length; j++) {
    // 一些复杂的逻辑
  }
}

for (let i = 0; i < array1.length; i++) {
  processInnerLoop(array1[i]);
}

2. 使用map、filter和reduce替代for循环

在处理数组时,我们经常使用for循环来迭代数组并进行一些操作。然而,使用map、filter和reduce这些高阶函数可以使代码更加简洁和易于理解。

优化前:

let result = [];
for (let i = 0; i < array.length; i++) {
  if (array[i] > 10) {
    result.push(array[i] * 2);
  }
}

优化后:

let result = array.filter(item => item > 10).map(item => item * 2);

3. 使用解构赋值简化代码

解构赋值是ES6中引入的一个新特性,它允许我们用更简洁的语法从数组或对象中提取数据

优化前:

let firstName = person.firstName;
let lastName = person.lastName;
let age = person.age;

优化后:

let { firstName, lastName, age } = person;

4. 多条件if判断

避免重复性的判断某一个变量,可将多个值放在一个数组中,然后调用数组的include方法。

优化前:

if (a === 'a' || a === 'b' || a === 'c' || a === 'd') {
  // 逻辑处理
}

优化后:

if (['a', 'b', 'c', 'd'].includes(a)) { 
  // 逻辑处理
}

5. 使用默认参数值

在函数中,我们经常需要处理未传递的参数。使用默认参数值可以简化这个过程。

优化前:

function greet(name) {
  name = name || 'Guest';
  console.log('Hello, ' + name);
}

优化后:

function greet(name = 'Guest') {
  console.log(`Hello, ${name}`);
}

6. 简化 if true else 条件表达式

逻辑只是true/false的赋值时,简化不必要的if语句。

优化前:

if (a > 100) {  
  bool = true;
} else {  
  bool = false;
}

优化后:

bool = a > 10;

7. indexOf的更简单写法

在数组中查找某个值是否存在可以使用indexOf方法,下面这种写法更简单。

优化前:

if (list.indexOf(item) > -1) {  
  // 存在
}

if (list.indexOf(item) === -1) {  
  // 不存在
}

优化后:

if (~list.indexOf(item)) {  
  // 存在
}

if (!~list.indexOf(item)) {  
  // 不存在
}

8. switch语句简化

将需要执行的条件存储在键值对象中,最后根据条件调用存储的方法。

优化前:

switch (type) {  
  case 1:    
    run1();    
    break;  
  case 2:    
    run2();    
    break;  
  case 3:    
    run3();    
    break;
}

优化后:

const data = {  
  1: run1,  
  2: run2,  
  3: run3,
};

data[type] && data[type]();

9. 提前return

快速return(也称为提前return或守卫子句)是一种编程模式,特别是在处理多个条件判断时,它可以提高函数的可读性和性能。这种模式通过在函数的开始处检查条件,并在条件满足时立即返回,从而避免执行后续的不必要代码。

优化前:

function check(number) {
  if (number < 0) {
    return "Negative";
  } else if (number === 0) {
    return "Zero";
  } else {
    return "Positive";
  }
}

优化后:

function check(number) {
  if (number < 0) {
    return "Negative";
  }

  if (number === 0) {
    return "Zero";
  }

  return "Positive";
}

10. 可选链运算符?.

可选链运算符?.提供了一种简洁的方式来安全地访问对象中深层嵌套的属性。它允许开发者在不进行每一步引用校验的情况下读取属性值,如果链中的任何引用是null或undefined,表达式将返回undefined。

const vacationItinerary = {        
    wednesday: {            
        venue: "Louvre Museum",            
        expenses: 150,        
    },    
};

使用传统方法来安全地访问一个可能不存在的属性会涉及多个逻辑与操作:

优化前:

const result = vacationItinerary && vacationItinerary.wednesday && vacationItinerary.wednesday.expenses;    

优化后:

const result = vacationItinerary?.wednesday?.expenses;   

11.多条件&&运算符

当你需要在变量为真时才执行某个函数,可以使用逻辑与&&运算符来简化代码。

优化前:

// 传统的条件判断
if (isValid) {  
  initiateProcess();
}

优化后:

// 简化后的条件执行
isValid && initiateProcess();

12. 使用数字分隔符增强可读性

为了提升大数字的可读性,可以使用下划线_作为数值分隔符,它允许将数字分隔成更易于阅读的形式。

const number = 1_000_000_000;

console.log(number); // 输出:1000000000

13. 字符串转换数字

虽然可以使用parseInt和parseFloat等内置方法将字符串转换为数字,但还有一种更简洁的方式:在字符串前使用一元加号+运算符。

优化前:

let total = parseInt("456");
let average = parseFloat("87.5");

优化后:

let total = +"456";
let average = +"87.5";

if (+currentState === 0) {
  // 执行相关操作
}

使用一元加号+进行转换是一种简单且有效的方法,尤其适合在需要轻量级转换的场景中。

14. 提升控制台输出的清晰度

当你需要在控制台中打印变量的值时,将其包裹在对象字面量中可以同时显示变量名和值,从而提高输出的清晰度。

const username = "Peter";
console.log({ username });

// 控制台输出将会是:
{
   "username": "Peter"
}

这种方法不仅让你一目了然地看到变量的名称和对应的值,而且在调试多个变量时尤其有用。它避免了在控制台中查找与变量值对应的变量名的麻烦,使得调试过程更加高效。

15. 数组截断技巧

要快速截断数组至指定长度,只需修改数组的length属性即可。

let numbers = ['1', '2', '3', '4'];
numbers.length = 2;
console.log(numbers); // 输出:['1', '2']

这个方法简单而直接,能够有效地减少数组的长度,而无需使用额外的函数或方法,尤其在你确切知道需要的数组长度时。

总结

通过以上案例,我们可以看到通过一些简单的技巧和最佳实践,我们可以大大简化我们的JavaScript代码,使其更加优雅。这只是冰山一角,还有许多其他的技巧和最佳实践可以帮助我们优化代码的复杂度。如果你有其他的优化写法欢迎留言交流~

希望本文能够为你的JavaScript编程提供一些启发。


看完本文如果觉得有用,记得点个赞支持,收藏起来说不定哪天就用上啦~

专注前端开发,分享前端相关技术干货,公众号:南城大前端(ID: nanchengfe)

来自:https://mp.weixin.qq.com/s/aRvwXMINOD7siYI6jbQz5g

链接: https://www.fly63.com/article/detial/12702

不要浪费时间写完美代码

一个系统可以维持5年,10年,甚至20年以上,但是代码和设计模式的生命周期非常短,当对一个解决方案使用不同的方法进行迭代的时候,通常只能维持数月,数日,甚至几分钟的时间

Google内部在代码质量上的实践

良好的编程习惯涉及到很多方面,但在软件行业内,大多数的公司或组织都不会把良好的编程习惯列为主要关注点。 例如,具有可读性和可维护性的代码比编写好的测试代码或使用正确的工具更有意义,前者的意义在于可以让代码更易于理解和修改。

减少嵌套,降低代码复杂度

减少嵌套会让代码可读性更好,同时也能更容易的找出bug,开发人员可以更快的迭代,程序也会越来越稳定。简化代码,让编程更轻松!

关于 Google 发布的 JS 代码规范

Google为了那些还不熟悉代码规范的人发布了一个JS代码规范。其中列出了编写简洁易懂的代码所应该做的最佳实践。代码规范并不是一种编写正确JavaScript代码的规则,而是为了保持源代码编写模式一致的一种选择。

你解决的问题比你编写的代码更重要!

程序员似乎忘记了软件的真正目的,那就是解决现实问题。您编写的代码的目的是为了创造价值并使现有世界变得更美好,而不是满足您对自我世界应该是什么的以自我为中心的观点。有人说:如果你拥有的只是一把锤子,那么一切看起来都像钉子一样

tinymce与prism代码高亮实现及汉化的配置

TinyMCE是一个轻量级的基于浏览器的所见即所得编辑器,由JavaScript写成。它对IE6+和Firefox1.5+都有着非常良好的支持。功能方强大,并且功能配置灵活简单。另一特点是加载速度非常快的。

js函数式编程与代码执行效率

函数式编程对应的是命令式编程, 函数式编程的核心当然是对函数的运用. 而高阶函数(Higher-order)是实现函数式编程的基本要素。高阶函数可以将其他函数作为参数或者返回结果。所以JS天生就支持函数式编程

接手代码太烂,要不要辞职?

朋友发表了一条说说:入职新公司,从重构代码到放弃”,我就问他怎么了?他说,刚进一家新公司,接手代码太烂,领导让我先熟悉业务逻辑,然后去修复之前项目中遗留的bug,实在不行就重构

js高亮显示关键词_页面、搜索关键词高亮显示

页面实现关键词高亮显示:在项目期间遇到一个需求,就是搜索关键词时需要高亮显示,主要通过正则匹配来实现页面关键词高亮显示。在搜索结果中高亮显示关键词:有一组关键词数组,在数组中筛选出符合关键字的内容并将关键字高亮

写优雅的代码,做优雅的程序员

软件工程学什么? 学计算机,写程序,做软件,当程序员。听说学计算机很辛苦? 是的,IT行业加班现象严重。在计算机世界里,技术日新月异,自学能力是程序员最重要的能力之一。选了这个专业,就要时刻保持好奇心和技术嗅觉,不能只满足于完成课内作业。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!