在 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;}
复制代码
优化后：
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）
评论