位置：首页-资讯-前端开发

JavaScript短路运算的实现

2024-04-02 19:55

短信预约 -IT技能 免费直播动态提醒

由来

讲一下本篇的由来：
刚刚启一个带有子服务的主服务：base项目上的代码，诉求是这样子的：子服务-端口号:8599需要从主服务-端口号:8001登录进入。主服务base有一个判断工作空间的配置，其他子服务无工作空间的业务，只有子服务-:8599有。正常情况下判断一下当前服务的routeBase，再合并一下基础配置：比如setting设置,lang语言,message子服务订阅的主服务的消息等等，和当前子服务的定制化设置，就实现了不同子服务的不同服务设置。
但是我启动了好多次，启起来的总是主服务的base项目，启动不起来子服务-:8599brose

（先说一下：最后解决竟是因为缓存的原因，可把本猿搞得哭笑不得。但是这期间我竟对短路运算符起了疑心并做了修改的尝试，我也真是醉了，服了自己。那好吧，想着虽然短路运算那么常见，简单，却害的本猿调试怀疑了一会，这不行，我必须写一下）

最后在后面附上导致本猿调试半天的代码
好了，先讲一下干干的知识点

&& 和 || 也叫短路

短路&&：只要碰到了假值(false)，就会短路，并返回该假值，只要短路，不会继续执行后面的表达式。
短路||：只要碰到了真值(true)，就会短路，并返回该真值，只要短路，不会继续执行后面的表达式。(一般用作默认值)

注意

注意：假值有以下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

发生这次记录的项目代码



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 ，没有清除缓存。所以在来回切换环境，一定要清除缓存，有空研究一下，怎么能迅速正确的清理完缓存，我目前就是用浏览器自带的：清空缓存并硬性重新加载。小伙伴们也有这种清缓存造成的烦恼，有什么好的方法，可以评论分享给我哇。