本文探讨了在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())执行时：
falseOrNumber()被调用，其返回值被赋给result变量。if语句会评估result的布尔真假。如果result为真，条件成立，执行return result;。如果result为假，条件不成立，if块被跳过，函数继续执行后续逻辑。
这种方法简洁高效，避免了重复调用，并且将变量的声明和赋值与条件判断紧密结合，提高了代码的局部性。
立即学习“Java免费学习笔记（深入）”；
解决方案二：利用逻辑或(||)运算符的短路特性
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() || “默认值”执行时：
falseOrNumber()被调用。如果falseOrNumber()返回一个真值（例如一个数字），那么整个表达式的结果就是这个真值，并且”默认值”不会被评估（短路）。如果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()不会被调用。
注意事项与总结
可读性与简洁性： 两种优化方案都提高了代码的简洁性。if语句内部赋值可能对于初学者来说稍显不常见，但却是JavaScript中合法的语法。||运算符的短路特性则非常优雅，尤其适合简单的默认值或链式调用场景。副作用： 当函数存在副作用时（例如修改全局变量、发起网络请求等），请谨慎使用这些优化技巧。确保你理解函数何时会被调用、何时会被跳过，以避免意外的行为。例如，在funcA() || funcB()中，如果funcA()有副作用但返回false，funcB()仍会被调用，其副作用也会发生。类型强制转换： ||运算符依赖于JavaScript的真值/假值判断。false、0、””、null、undefined和NaN都被认为是假值。确保你的函数返回类型与预期行为一致。选择合适的方案：当需要在一个变量中存储返回值，并在后续逻辑中多次使用时，if语句内部赋值是更明确的选择。当目标是返回第一个非假值，或者提供一个简单的默认值时，||运算符提供了一种非常简洁的单行解决方案。
通过采纳这些技巧，我们可以在JavaScript中编写出更高效、更简洁的条件返回逻辑，提升代码质量。
以上就是JavaScript条件返回优化：避免函数重复调用的技巧的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1531379.html
微信扫一扫 
支付宝扫一扫 
