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

结尾

到此这篇关于JavaScript 短路运算的实现的文章就介绍到这了,更多相关JavaScript 短路运算内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Javascript优化技巧之短路表达式详细介绍

    什么是短路表达式? 短路表达式:作为"&&"和"||"操作符的操作数表达式,这些表达式在进行求值时,只要最终的结果已经可以确定是真或假,求值过程便告终止,这称之为短路求值.这是这两个操作符的一个重要属性. 一个最简单的例子: 复制代码 代码如下: foo = foo||bar; 这行代码是什么意思?答案: 复制代码 代码如下: //如果foo存在,值不变,否则把bar的值赋给foo if(!foo)     foo = bar; 在javascrip

  • javascript 短路法代码精简

    碰到一段代码如下 if(n>win) { p=dArry.length-win; } else if(n<0){ p=0; } else { p=n; } 类似的代码挺多,继续简化,其实很简单,变成这样 p=((n>win)&&(dArry.length-win))||((n<0)&&0)||n 总结一句话:&&取最后值,||取第一满足的值,高效,但请灵活使用

  • JS短路原理的应用示例 精简代码的途径

    在js逻辑运算中,0."".null.false.undefined.NaN都会判为false,其他都为true. ||先计算第一个运算数,如果可以被转换成true,则返回左边这个表达式的值,否则计算第二个运算数.即使||运算符的运算数不是布尔值,任然可以将它看作布尔OR运算,因为无论它返回的值是什么类型,都可以被转换为布尔值. 利用它对非布尔型的值会将其返回的特性:对非布尔型的运算数使用||,用于选取一组备选值中的第一个定义了的并且非空的值(第一个为非false的值) 例: var

  • JavaScript 短路运算的实现

    目录 由来 && 和 || 也叫短路 注意 场景代码 && || 真值短路,短路或 || 经常用来设置函数参数的默认值 发生这次记录的项目代码 结尾 由来 讲一下本篇的由来: 刚刚启一个带有子服务的主服务:base项目上的代码,诉求是这样子的:子服务-端口号:8599需要从主服务-端口号:8001登录进入.主服务base有一个判断工作空间的配置,其他子服务无工作空间的业务,只有子服务-:8599有.正常情况下判断一下当前服务的routeBase,再合并一下基础配置:比如se

  • JavaScript整除运算函数ceil和floor的区别分析

    本文实例分析了JavaScript整除运算函数ceil和floor的区别.分享给大家供大家参考.具体分析如下: Math.ceil(count / pagesize); //向上整除,如 Math.ceil(4/3)结果为2; Math.floor(count / pagesize); //向下整除,如 Math.floor(4/3)结果为1; 希望本文所述对大家的javascript程序设计有所帮助.

  • JavaScript的==运算详解

    大家知道,JavaScript中的==是一种比较复杂运算,它的运算规则很奇怪,很容易让人犯错,从而成为JavaScript中"最糟糕的特性"之一. 在仔细阅读ECMAScript规范的基础上,我画了一张图,我想等你理解了这张图后,会彻底地弄懂关于==运算的一切.同时,我试图通过此文向大家证明==并不是那么糟糕的东西,它很容易掌握,甚至看起来很合理,并没那么糟糕. 先上图: ==运算规则的精确描述在此:The Abstract Equality Comparison Algorithm.

  • JavaScript 浮点数运算 精度问题

    Js代码 复制代码 代码如下: <script type="text/javascript" language="javascript"> alert(1/3);//弹出: 0.3333333333333333 alert(0.09999999 + 0.00000001);//弹出: 0.09999999999999999 alert(-0.09999999 - 0.00000001);//弹出: -0.09999999999999999 alert(0

  • 详解JavaScript 浮点数运算的精度问题

    问题描述 在 JavaScript 中整数和浮点数都属于 Number 数据类型,所有数字都是以 64 位浮点数形式储存,即便整数也是如此. 所以我们在打印 1.00 这样的浮点数的结果是 1 而非 1.00 .在一些特殊的数值表示中,例如金额,这样看上去有点变扭,但是至少值是正确了.然而要命的是,当浮点数做数学运算的时候,你经常会发现一些问题,举几个例子: // 加法 ===================== // 0.1 + 0.2 = 0.30000000000000004 // 0.7

  • JavaScript 加号(+)运算符号

    一,对于引用类型对象(我指的是String,Date,Object,Array,Function,Boolean)的+运算符运算过程如下! 1,首先调用此对象的valueOf方法,得到返回数值A 2,然后把此数值A转换成数字,得到的是最终数值 我的测试如下: 复制代码 代码如下: function w(s){ document.writeln("<br/>"); document.writeln(s); document.writeln("<br/>-

  • javascript &&和||运算法的另类使用技巧

    &&和||在JQuery源代码内尤为使用广泛,由于本人没有系统的学习js,所以只能粗略的自我理解出来,希望大家指点下. 粗略理解如下: a() && b() :如果执行a()后返回true,则执行b()并返回b的值:如果执行a()后返回false,则整个表达式返回a()的值,b()不执行: a() || b() :如果执行a()后返回true,则整个表达式返回a()的值,b()不执行:如果执行a()后返回false,则执行b()并返回b()的值: && 优先

  • JavaScript基于DOM操作实现简单的数学运算功能示例

    本文实例讲述了JavaScript基于DOM操作实现简单的数学运算功能.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"

  • 弱类型语言javascript中 a,b 的运算实例小结

    本文实例讲述了弱类型语言javascript中 a,b 的运算.分享给大家供大家参考,具体如下: 下面有七个闭包小函数,用来测试 a,b 的 输出结果 测试1:(当a为true,b为false的时候,输出的是false) !function() { var a = true,b = false; console.log((a,b) +' test1'); // false test1 }(); 测试2:(当a为true,b为true的时候,输出的是true) !function() { var

随机推荐