JavaScript 短路运算

JavaScript 短路运算

由来

  • 讲一下本篇的由来:
  • 刚刚启一个带有子服务的主服务: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

复制代码

发生这次记录的项目代码

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

image.png

结尾

好吧,写完了

  • 最后
  • Happy Coding!

猜你喜欢

转载自juejin.im/post/7108973468305063972