本文探讨在javascript中，当函数可能返回`false`或一个真值时，如何优雅地处理条件返回，避免重复调用同一函数。通过介绍在`if`语句中赋值、利用逻辑或(`||`)运算符以及处理多重条件返回的技巧，旨在提高代码的简洁性、可读性和效率，为开发者提供更专业的解决方案。
在JavaScript开发中，我们经常会遇到这样的场景：一个函数（例如falseOrNumber()）可能返回布尔值false，或者一个非零的数字（或其他真值）。在另一个函数中，我们可能需要根据falseOrNumber()的返回值来决定是否立即返回该值。直观的写法往往会导致对同一函数的重复调用，影响代码效率和简洁性。
常见的重复调用问题
考虑以下函数结构：
function falseOrNumber() {
// 假设此函数可能返回 false 或一个数字
const random = Math.random();
if (random < 0.5) {
return false;
} else {
return Math.floor(random * 100) + 1; // 返回 1-100 之间的数字
}
}
function otherFunction() {
// ... 其他逻辑
if (falseOrNumber()) {
return falseOrNumber(); // 这里的 falseOrNumber() 被调用了两次
}
// ... 后续逻辑
return 'default';
}
console.log(otherFunction());在这种情况下，falseOrNumber()函数在条件判断和返回语句中被调用了两次。如果falseOrNumber()是一个计算成本较高的函数，这种重复调用会造成不必要的性能开销。
优化方案一：在条件语句中赋值
避免重复调用的一个直接且有效的方法是在if语句的条件部分进行赋值操作。JavaScript中的赋值表达式会返回被赋的值，因此这个值可以同时用于条件判断和后续的返回操作。
立即学习“Java免费学习笔记（深入）”；
function falseOrNumber() {
const random = Math.random();
if (random < 0.5) {
return false;
} else {
return Math.floor(random * 100) + 1;
}
}
function otherFunctionOptimized() {
// ... 其他逻辑
let result;
if ((result = falseOrNumber())) { // 赋值操作返回 result 的值，并用于条件判断
return result;
}
// ... 后续逻辑
return 'default';
}
console.log(otherFunctionOptimized());这种方法将falseOrNumber()的调用次数减少到一次，并将结果存储在result变量中，提高了效率。
优化方案二：利用逻辑或(||)运算符
当函数的返回值特性（false或真值）与JavaScript的逻辑或(||)运算符的行为完美契合时，我们可以使用||运算符实现更加简洁的单行返回。||运算符的特性是：它会返回第一个“真值”操作数。如果所有操作数都是“假值”，则返回最后一个操作数。
function falseOrNumber() {
const random = Math.random();
if (random < 0.5) {
return false;
} else {
return Math.floor(random * 100) + 1;
}
}
function otherFunctionElegant() {
// 如果 falseOrNumber() 返回真值，则直接返回该真值；
// 否则（如果返回 false），则执行 || 后面的表达式（例如返回 'default'）
return falseOrNumber() || 'default';
}
console.log(otherFunctionElegant());在这个例子中，如果falseOrNumber()返回一个数字（真值），那么整个表达式就会返回这个数字。如果falseOrNumber()返回false（假值），那么||运算符会继续评估其右侧的'default'，并返回它。这种方式尤其适合于需要一个默认值或执行其他备用逻辑的场景。
结合其他表达式
||运算符也可以与其他表达式结合，例如使用逗号表达式来执行多个语句（虽然在实际开发中，为了可读性，通常不推荐过度使用逗号表达式进行复杂逻辑）：
function otherFunctionWithComma() {
// 这里的 (other, code, here) 只是一个示例，表示可以放置其他表达式
// 但通常会直接放一个备用值或函数调用
return falseOrNumber() || (console.log('falseOrNumber returned false'), 'fallbackValue');
}
console.log(otherFunctionWithComma());更常见的用法是链式调用其他函数：
优化方案三：处理多重条件返回
如果存在多个类似的函数，它们都可能返回false或一个真值，并且你需要按优先级检查它们，直到找到第一个真值，||运算符的链式调用就显得非常强大和简洁。
function falseOrNumber1() {
return Math.random() < 0.3 ? false : 10;
}
function falseOrNumber2() {
return Math.random() < 0.5 ? false : 20;
}
function falseOrNumber3() {
return Math.random() < 0.7 ? false : 30;
}
function otherFunctionMultiple() {
// 依次检查 falseOrNumber1()，如果为真则返回；
// 否则检查 falseOrNumber2()，如果为真则返回；
// 否则检查 falseOrNumber3()，如果为真则返回；
// 如果所有都为假，则返回 'defaultFallback'。
return falseOrNumber1() || falseOrNumber2() || falseOrNumber3() || 'defaultFallback';
}
console.log(otherFunctionMultiple());这种模式创建了一个清晰的优先级链，并且所有函数都只被调用一次（如果它们是第一个返回真值的，后面的就不会被调用）。
注意事项与最佳实践
- 真值与假值（Truthy & Falsy）：在使用||运算符时，请务必理解JavaScript中的真值和假值概念。除了false，0、null、undefined、NaN和空字符串""也都是假值。如果你的函数可能返回这些假值，而你希望它们被视为有效结果，那么||运算符可能不适用，此时应考虑使用严格相等比较（===）或优化方案一。
- 可读性：虽然||运算符可以写出非常简洁的代码，但过度复杂的链式调用可能会降低代码的可读性。在追求简洁的同时，也要权衡团队的编码规范和项目的可维护性。
- 性能：避免重复调用函数通常是一个好的实践，特别是当函数执行开销较大时。上述优化方案都能有效减少不必要的函数执行。
总结
在JavaScript中处理条件返回并避免重复函数调用是提高代码质量的关键一步。通过在if语句中巧妙地结合赋值操作，或者更优雅地利用逻辑或(||)运算符，我们能够编写出更简洁、高效且易于维护的代码。特别是在处理多个优先级条件时，||运算符的链式调用能提供一种非常强大的解决方案。选择哪种方法取决于具体的业务逻辑、函数返回值的特性以及对代码可读性的要求。
