JavaScript条件返回精简技巧

亲爱的编程学习爱好者，如果你点开了这篇文章，说明你对《JavaScript条件返回优化技巧》很感兴趣。本篇文章就来给大家详细解析一下，主要介绍一下，希望所有认真读完的童鞋们，都有实质性的提高。

本文探讨了在JavaScript中处理函数条件返回时避免重复调用函数的几种优雅方法。针对传统`if`语句中可能出现的冗余调用问题，文章介绍了两种主要解决方案：一是利用`if`语句内部赋值来复用函数返回值，二是巧妙运用逻辑或(`||`)运算符的短路特性实现简洁高效的条件返回，并扩展至多函数链式调用场景，旨在提升代码可读性和执行效率。

问题背景：条件返回中的函数重复调用

在JavaScript开发中，我们经常会遇到这样的场景：一个函数（例如falseOrNumber()）可能会返回一个布尔假值（如false、0、null、undefined）或一个布尔真值（如非零数字、对象等）。我们希望根据这个返回值来决定是否立即返回该值。直观的实现方式往往会导致函数被重复调用，示例如下：

function falseOrNumber() {
    // 假设此函数有时返回false，有时返回一个数字
    // 模拟一个耗时操作或副作用
    console.log("falseOrNumber() 被调用了！");
    const rand = Math.random();
    if (rand < 0.5) {
        return false;
    }
    return Math.floor(rand * 100) + 1; // 返回一个1到100的数字
}

function otherFunction() {
    console.log("--- otherFunction 开始 ---");
    // 传统且重复调用的方式
    if (falseOrNumber()) {
        return falseOrNumber(); // 这里的 falseOrNumber() 被调用了两次
    }
    console.log("--- otherFunction 结束 ---");
    return "默认值";
}

// 示例调用
console.log("结果1:", otherFunction());
console.log("结果2:", otherFunction());

在上述otherFunction中，falseOrNumber()函数在if条件判断中被调用一次，如果返回真值，则在return语句中又被调用一次。这不仅降低了代码效率（特别是当falseOrNumber()执行耗时或有副作用时），也使得代码显得不够简洁。

解决方案一：在if语句内部赋值

一种简洁且常用的优化方式是，在if语句的条件表达式中将函数的返回值赋给一个变量，然后直接使用这个变量进行返回。这样可以确保函数只被调用一次。

function falseOrNumber() {
    console.log("falseOrNumber() 被调用了！");
    const rand = Math.random();
    if (rand < 0.5) {
        return false;
    }
    return Math.floor(rand * 100) + 1;
}

function otherFunctionOptimized1() {
    console.log("--- otherFunctionOptimized1 开始 ---");
    let result;
    // 在if条件中赋值，并判断其布尔真假
    if (result = falseOrNumber()) {
        return result; // 直接返回已赋值的result
    }
    console.log("--- otherFunctionOptimized1 结束 ---");
    return "默认值";
}

// 示例调用
console.log("结果1:", otherFunctionOptimized1());
console.log("结果2:", otherFunctionOptimized1());

解析： 当if (result = falseOrNumber())执行时：

1. falseOrNumber()被调用，其返回值被赋给result变量。
2. if语句会评估result的布尔真假。
3. 如果result为真，条件成立，执行return result;。
4. 如果result为假，条件不成立，if块被跳过，函数继续执行后续逻辑。

这种方法简洁高效，避免了重复调用，并且将变量的声明和赋值与条件判断紧密结合，提高了代码的局部性。

解决方案二：利用逻辑或(||)运算符的短路特性

JavaScript的逻辑或运算符(||)具有短路特性：如果左侧操作数评估为真值，则不会评估右侧操作数，直接返回左侧操作数的值；否则，评估并返回右侧操作数的值。这个特性可以巧妙地用于实现单行条件返回。

function falseOrNumber() {
    console.log("falseOrNumber() 被调用了！");
    const rand = Math.random();
    if (rand < 0.5) {
        return false;
    }
    return Math.floor(rand * 100) + 1;
}

function otherFunctionOptimized2() {
    console.log("--- otherFunctionOptimized2 开始 ---");
    // 如果 falseOrNumber() 返回真值，则返回该真值
    // 否则（返回假值），返回 "默认值"
    const finalResult = falseOrNumber() || "默认值";
    console.log("--- otherFunctionOptimized2 结束 ---");
    return finalResult;
}

// 更简洁的直接返回形式
function otherFunctionOptimized2_short() {
    console.log("--- otherFunctionOptimized2_short 开始 ---");
    return falseOrNumber() || "默认值";
}

// 示例调用
console.log("结果1:", otherFunctionOptimized2_short());
console.log("结果2:", otherFunctionOptimized2_short());

解析： 当falseOrNumber() || "默认值"执行时：

1. falseOrNumber()被调用。
2. 如果falseOrNumber()返回一个真值（例如一个数字），那么整个表达式的结果就是这个真值，并且"默认值"不会被评估（短路）。
3. 如果falseOrNumber()返回一个假值（例如false），那么表达式会继续评估右侧的"默认值"，并将其作为整个表达式的结果。

这种方法极大地简化了代码，实现了单行条件返回，尤其适用于当“其他代码”是一个简单的默认值或另一个函数调用时。

扩展：多函数链式调用

如果存在多个类似的函数，你希望依次尝试它们，并返回第一个返回真值的函数结果，||运算符的短路特性同样适用。

function funcA() {
    console.log("funcA() 被调用了！");
    return false;
}

function funcB() {
    console.log("funcB() 被调用了！");
    return 42; // 返回一个真值
}

function funcC() {
    console.log("funcC() 被调用了！");
    return "Hello";
}

function chainOfFunctions() {
    console.log("--- chainOfFunctions 开始 ---");
    // 依次尝试 funcA, funcB, funcC，返回第一个真值
    // 如果 funcA 返回假值，则调用 funcB
    // 如果 funcB 返回真值，则返回 funcB 的结果，funcC 不会被调用
    return funcA() || funcB() || funcC() || "最终默认值";
}

// 示例调用
console.log("链式结果:", chainOfFunctions());
// 预期输出：
// funcA() 被调用了！
// funcB() 被调用了！
// 链式结果: 42

在这个例子中，funcA()返回false，所以funcB()被调用。funcB()返回42（真值），因此整个表达式的结果就是42，funcC()不会被调用。

注意事项与总结

1. 可读性与简洁性： 两种优化方案都提高了代码的简洁性。if语句内部赋值可能对于初学者来说稍显不常见，但却是JavaScript中合法的语法。||运算符的短路特性则非常优雅，尤其适合简单的默认值或链式调用场景。
2. 副作用： 当函数存在副作用时（例如修改全局变量、发起网络请求等），请谨慎使用这些优化技巧。确保你理解函数何时会被调用、何时会被跳过，以避免意外的行为。例如，在funcA() || funcB()中，如果funcA()有副作用但返回false，funcB()仍会被调用，其副作用也会发生。
3. 类型强制转换： ||运算符依赖于JavaScript的真值/假值判断。false、0、""、null、undefined和NaN都被认为是假值。确保你的函数返回类型与预期行为一致。
4. 选择合适的方案：
   • 当需要在一个变量中存储返回值，并在后续逻辑中多次使用时，if语句内部赋值是更明确的选择。
   • 当目标是返回第一个非假值，或者提供一个简单的默认值时，||运算符提供了一种非常简洁的单行解决方案。

通过采纳这些技巧，我们可以在JavaScript中编写出更高效、更简洁的条件返回逻辑，提升代码质量。

今天关于《JavaScript条件返回精简技巧》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！