面试题：JavaScript 中如何优化逻辑操作符提升代码性能

Question

请举例说明在 JavaScript 中，怎样合理使用逻辑与（&&）和逻辑或（||）操作符来优化代码逻辑，提升性能。例如在条件判断和变量赋值场景下应该如何运用？

Answer 1

条件判断场景

1. 简化多条件判断：
   • 假设我们有一个函数，只有当用户已登录且有足够权限时才执行某个操作。

   function performAction(user) {
       if (user.isLoggedIn && user.hasPermission) {
           console.log('执行操作');
       }
   }
   const user = {
       isLoggedIn: true,
       hasPermission: true
   };
   performAction(user);
   

   • 使用逻辑与（&&）可以简化为：

   function performAction(user) {
       user.isLoggedIn && user.hasPermission && console.log('执行操作');
   }
   const user = {
       isLoggedIn: true,
       hasPermission: true
   };
   performAction(user);
   

   • 这里逻辑与操作符会从左到右依次计算操作数，一旦某个操作数为假（false），整个表达式就为假，后续操作数不会再计算，从而提升性能。
2. 替代if - else简单判断：
   • 例如根据某个条件决定是否显示一条消息。

   let condition = true;
   let message;
   if (condition) {
       message = '条件为真';
   } else {
       message = '条件为假';
   }
   console.log(message);
   

   • 使用逻辑或（||）可以优化为：

   let condition = true;
   let message = condition? '条件为真' : '条件为假';
   console.log(message);
   // 或者更简洁地利用逻辑或（||）
   let condition = true;
   let message = condition && '条件为真' || '条件为假';
   console.log(message);
   

   • 逻辑或操作符同样从左到右计算，只要有一个操作数为真（true），整个表达式就为真，其值为第一个真值操作数。

变量赋值场景

1. 为变量设置默认值：
   • 假设我们有一个函数接收一个参数，如果参数未传入则使用默认值。

   function greet(name) {
       if (!name) {
           name = 'Guest';
       }
       console.log(`Hello, ${name}!`);
   }
   greet();
   

   • 使用逻辑或（||）可以优化为：

   function greet(name) {
       name = name || 'Guest';
       console.log(`Hello, ${name}!`);
   }
   greet();
   

   • 这样如果name为假值（如null、undefined、''、0、false等），就会使用'Guest'作为默认值。
2. 链式变量赋值：
   • 假设有多个可能为真的值，我们想获取第一个真值。

   let value1;
   let value2 = '实际值';
   let value3;
   let result;
   if (value1) {
       result = value1;
   } else if (value2) {
       result = value2;
   } else if (value3) {
       result = value3;
   }
   console.log(result);
   

   • 使用逻辑或（||）可以优化为：

   let value1;
   let value2 = '实际值';
   let value3;
   let result = value1 || value2 || value3;
   console.log(result);
   

   • 逻辑或操作符会返回第一个真值，从而简化了这种链式判断赋值。