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

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

1. 避免嵌套循环

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

优化前：

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

优化后：

javascript复制代码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这些高阶函数可以使代码更加简洁和易于理解。

优化前：

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

优化后：

1	javascript复制代码let result = array.filter(item => item > 10).map(item => item * 2);

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

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

优化前：

1
2
3

javascript复制代码let firstName = person.firstName;
let lastName = person.lastName;
let age = person.age;

优化后：

1	javascript复制代码let { firstName, lastName, age } = person;

4. 多条件if判断

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

优化前：

1
2
3

javascript复制代码if (a === 'a' || a === 'b' || a === 'c' || a === 'd') {
  // 逻辑处理
}

优化后：

1
2
3

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

5. 使用默认参数值

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

优化前：

javascript复制代码function greet(name) {
  name = name || 'Guest';
  console.log('Hello, ' + name);
}

优化后：

1
2
3

javascript复制代码function greet(name = 'Guest') {
  console.log(`Hello, ${name}`);
}

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

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

优化前：

javascript复制代码if (a > 100) {  
  bool = true;
} else {  
  bool = false;
}

优化后：

1	javascript复制代码bool = a > 10;

7. indexOf的更简单写法

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

优化前：

javascript复制代码if (list.indexOf(item) > -1) {  
  // 存在
}

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

优化后：

javascript复制代码if (~list.indexOf(item)) {  
  // 存在
}

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

8. switch语句简化

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

优化前：

javascript复制代码switch (type) {  
  case 1:    
    run1();    
    break;  
  case 2:    
    run2();    
    break;  
  case 3:    
    run3();    
    break;
}

优化后：

javascript复制代码const data = {  
  1: run1,  
  2: run2,  
  3: run3,
};

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

9. 提前return

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

优化前：

javascript复制代码function check(number) {
  if (number < 0) {
    return "Negative";
  } else if (number === 0) {
    return "Zero";
  } else {
    return "Positive";
  }
}

优化后：

javascript复制代码function check(number) {
  if (number < 0) {
    return "Negative";
  }

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

  return "Positive";
}

10. 可选链运算符?.

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

javascript复制代码const vacationItinerary = {        
    wednesday: {            
        venue: "Louvre Museum",            
        expenses: 150,        
    },    
};

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

优化前：

1	javascript复制代码const result = vacationItinerary && vacationItinerary.wednesday && vacationItinerary.wednesday.expenses;

优化后：

1	javascript复制代码const result = vacationItinerary?.wednesday?.expenses;

11.多条件&&运算符

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

优化前：

javascript复制代码// 传统的条件判断
if (isValid) {  
  initiateProcess();
}

优化后：

1 2	javascript复制代码// 简化后的条件执行 isValid && initiateProcess();

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

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

1
2
3

javascript复制代码const number = 1_000_000_000;

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

13. 字符串转换数字

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

优化前：

1 2	javascript复制代码let total = parseInt("456"); let average = parseFloat("87.5");

优化后：

javascript复制代码let total = +"456";
let average = +"87.5";

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

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

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

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

javascript复制代码const username = "Peter";
console.log({ username });

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

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

15. 数组截断技巧

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

1
2
3

javascript复制代码let numbers = ['1', '2', '3', '4'];
numbers.length = 2;
console.log(numbers); // 输出：['1', '2']

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

总结

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

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

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

专注前端开发，分享前端相关技术干货，公众号：南城大前端（ID: nanchengfe）

本文转载自: 掘金

开发者博客 – 和开发相关的这里全都有