JavaScript 短路运算原理与实战：从调试缓存问题说起

背景介绍

• 本文的写作初衷如下：
• 最近启动了一个包含子服务的主服务项目，代码基于 base 项目。具体需求是：子服务（端口号 :8599）需要通过主服务（端口号 :8001）进行登录访问。主服务 base 包含一个判断工作空间的配置逻辑，而大多数子服务没有此业务需求，唯独子服务 :8599 存在该配置。通常的做法是判断当前服务的 routeBase，然后合并基础配置（如 setting 设置、lang 语言、message 子服务订阅的主服务消息等）与当前子服务的定制化配置，从而实现不同子服务的差异化配置。
• 然而，我多次尝试启动，最终运行的始终是主服务 base 项目，子服务 :8599 brose 始终无法成功启动。

（先说明一下：最终发现原因仅仅是缓存问题，这让我感到哭笑不得。但在此过程中，我竟然对短路运算符产生了怀疑并尝试修改代码，回想起来真是有些无奈。虽然短路运算常见且简单，却让我在调试中耗费了时间，因此我决定专门写一篇文章来澄清这一点。）

• 最后附上那段让我调试半天的代码。
• 好了，先介绍核心的知识点。

&& 和 || 运算符被称为短路运算符。

• 短路 &&：一旦遇到假值（false），就会发生短路并返回该假值，后续表达式不再执行。
• 短路 ||：一旦遇到真值（true），就会发生短路并返回该真值，后续表达式不再执行。（通常用于设置默认值）。

注意事项

注意：JavaScript 中的假值共有以下 6 个：null、undefined、NaN、false、0、''。

场景代码示例

&&

  console.log('abc' && null);  // null
  console.log(null && 'abc');  // null
  console.log(null && undefined);  // null
  console.log(undefined && null);  // undefined

||

  console.log(true || false);  // true
  console.log(NaN || 1);  // 1
  console.log('abc' || 123);  // ‘abc'
  console.log(0 || '');  // ''
  console.log('' || '_brose_'); //'_brose_' 

真值短路，|| 运算符常用于设置函数参数的默认值。

function add(a, b) {
      // 真值短路
      // 短路或 || 经常用来设置函数参数的默认值
      a = a || 0;
      b = b || 0;
      console.log(a + b);
    }

    add(); // 0
    add(1); // 1
    add(1, 2); // 3
    add(100, 200); // 300

以下是本次记录的项目代码片段。

/*
 * @Descripttion: 头部的功能列表,不同项目根据routeBase，显示顶部设置配置
 * @version: 
 * @Author: Anne WM Zhang
 * @Date: 2022-05-25 12:33:09
 * @LastEditors: Anne WM Zhang
 * @LastEditTime: 2022-06-14 12:03:45
 */

import config  from './config' 

const projectName = config.routeBase || '_brose_'
const common = {
  setting: true,
  lang:true,
  message: true
}

const setting: Record<string, any> = {
  '_brose_': {
    workSpace: true,
    lang: false
  },
  '_pf_': {},
}

export default projectName ? Object.assign(setting[projectName], common) : common

• 关键代码如下：

（由于我是在主服务 base 的本地分支上进行跨域测试，因此在 config.routeBase 后面添加了一个短路运算 || '_brose_'，以便本地跨域进入开发环境的 _brose_ 子服务（即本案例中的子服务端口号 :8599）。注意，|| '_brose_' 的逻辑不会影响到生产环境。）

const projectName = config.routeBase || '_brose_'

这段代码在本地跨域进入开发环境的 _brose_ 子项目运行时，结果确实如预期所示：

console.log('' || '_brose_'); //'_brose_' 

在我的本地开发分支中，config.routeBase 的值为空字符串，即运算符左侧为空，也就是假值 ''。因此，|| 运算符会取右侧表达式的值 '_brose_'，这段代码逻辑毫无疑问是正确的。但我当时却怀疑为什么没有启动 'brose'，误以为是这段代码未生效。最终发现，竟然是上一次的浏览器缓存仍停留在 base 项目，未清除缓存。因此，在来回切换环境时，务必清除缓存。有空我会研究如何快速正确地清理缓存，目前我使用的是浏览器自带的“清空缓存并硬性重新加载”功能。小伙伴们若有类似的清缓存困扰，欢迎在评论区分享好方法。

总结

到此，关于 JavaScript 短路运算的实现文章就介绍到这里。更多相关 JavaScript 短路运算内容请搜索本站以前的文章或继续浏览下面的相关文章，希望大家以后多多支持本站！