JavaScript 短路運算的實現(xiàn)

更新時間：2022年06月15日 09:15:47 作者：櫻小桃0827

本文主要介紹了JavaScript 短路運算的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

由來

講一下本篇的由來：
剛剛啟一個帶有子服務的主服務：base項目上的代碼，訴求是這樣子的：子服務-端口號:8599需要從主服務-端口號:8001登錄進入。主服務base有一個判斷工作空間的配置，其他子服務無工作空間的業(yè)務，只有子服務-:8599有。正常情況下判斷一下當前服務的routeBase，再合并一下基礎配置：比如setting設置,lang語言,message子服務訂閱的主服務的消息等等，和當前子服務的定制化設置，就實現(xiàn)了不同子服務的不同服務設置。
但是我啟動了好多次，啟起來的總是主服務的base項目，啟動不起來子服務-:8599brose

（先說一下：最后解決竟是因為緩存的原因，可把本猿搞得哭笑不得。但是這期間我竟對短路運算符起了疑心并做了修改的嘗試，我也真是醉了，服了自己。那好吧，想著雖然短路運算那么常見，簡單，卻害的本猿調試懷疑了一會，這不行，我必須寫一下）

最后在后面附上導致本猿調試半天的代碼
好了，先講一下干干的知識點

&& 和 || 也叫短路

短路&&：只要碰到了假值(false)，就會短路，并返回該假值，只要短路，不會繼續(xù)執(zhí)行后面的表達式。
短路||：只要碰到了真值(true)，就會短路，并返回該真值，只要短路，不會繼續(xù)執(zhí)行后面的表達式。(一般用作默認值)

注意

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

真值短路，短路或 || 經常用來設置函數(shù)參數(shù)的默認值

function add(a, b) {
      // 真值短路
      // 短路或 || 經常用來設置函數(shù)參數(shù)的默認值
      a = a || 0;
      b = b || 0;
      console.log(a + b);
    }

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

發(fā)生這次記錄的項目代碼

/*
 * @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上自己的分支本地開發(fā)跨域測試，所以在config.routeBase 的后面加了一個短路運算 || 'brose'，為了本地跨域進入開發(fā)環(huán)境的_brose_：即本案例的子服務-端口號:8599， || 'brose'并不會發(fā)到生產）

const projectName = config.routeBase || '_brose_'

這段代碼應該，而且在我本地跨域進入開發(fā)環(huán)境的_brose_子項目運行結果實際也是：

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

在我本地開發(fā)分支的情況下，config.routeBase 值為空，也就是運算符的左半邊為空，即假值是空 '' ,那么|| 就會取表達式后面的值即 'brose' 所以，這段代碼毋庸置疑。我卻去懷疑為什么沒有啟動'brose'，是因為這段代碼沒生效。結果竟然卻是我上上次的瀏覽緩存還在base ，沒有清除緩存。所以在來回切換環(huán)境，一定要清除緩存，有空研究一下，怎么能迅速正確的清理完緩存，我目前就是用瀏覽器自帶的：清空緩存并硬性重新加載。小伙伴們也有這種清緩存造成的煩惱，有什么好的方法，可以評論分享給我哇。