快捷導(dǎo)航

JavaScript 短路運(yùn)算的實(shí)現(xiàn)

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

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

由來(lái)

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

（先說(shuō)一下：最后解決竟是因?yàn)榫彺娴脑?，可把本猿搞得哭笑不得。但是這期間我竟對(duì)短路運(yùn)算符起了疑心并做了修改的嘗試，我也真是醉了，服了自己。那好吧，想著雖然短路運(yùn)算那么常見(jiàn)，簡(jiǎn)單，卻害的本猿調(diào)試懷疑了一會(huì)，這不行，我必須寫(xiě)一下）

最后在后面附上導(dǎo)致本猿調(diào)試半天的代碼
好了，先講一下干干的知識(shí)點(diǎn)

&& 和 || 也叫短路

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

注意

注意：假值有以下6個(gè)： null undefined NaN false 0 ''

場(chǎng)景代碼

&&

  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);  // ‘a(chǎn)bc'
  console.log(0 || '');  // ''
  console.log('' || '_brose_'); //'_brose_'

真值短路，短路或 || 經(jīng)常用來(lái)設(shè)置函數(shù)參數(shù)的默認(rèn)值

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

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

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

/*
 * @Descripttion: 頭部的功能列表,不同項(xiàng)目根據(jù)routeBase，顯示頂部設(shè)置配置
 * @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

就是這句話，這么肯定的一句話：

（由于我是在主服務(wù)base上自己的分支本地開(kāi)發(fā)跨域測(cè)試，所以在config.routeBase 的后面加了一個(gè)短路運(yùn)算 || 'brose'，為了本地跨域進(jìn)入開(kāi)發(fā)環(huán)境的_brose_：即本案例的子服務(wù)-端口號(hào):8599， || 'brose'并不會(huì)發(fā)到生產(chǎn)）

const projectName = config.routeBase || '_brose_'

這段代碼應(yīng)該，而且在我本地跨域進(jìn)入開(kāi)發(fā)環(huán)境的_brose_子項(xiàng)目運(yùn)行結(jié)果實(shí)際也是：

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

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