【 JavaScript 】Nullish coalescing operator ??

內容

• 學習目標
• 前置準備作業
• 當 Object 中的 key 為 undefined 或 null 回傳 default value

學習目標

• undefined 或 null 數值判斷

前置準備作業

• 已安裝 Node.js
• 已安裝 IDE
  • 本範例使用 Visual Studio Code

當 Object 中的 key 為 undefined 或 null 回傳 default value

• Javascript Object

• 透過 Nullish coalescing operator 進行 null 判斷

  • 程式

    • 當 ?? 左邊的值為 null 或 undefined，則回傳 ?? 右邊數值，否則回傳 ?? 左邊的數值

  • 執行結果 - 使用 Babel 來執行 (安裝與使用方式請參考下方 安裝與設定 Babel 章節)

    default high value 

• 透過 Nullish coalescing operator 進行 undefined 判斷

  • 程式

    • 當 ?? 左邊的值為 null 或 undefined，則回傳 ?? 右邊數值，否則回傳 ?? 左邊的數值

  • 執行結果 - 使用 Babel 來執行 (安裝與使用方式請參考下方 安裝與設定 Babel 章節)

    default low value 

• 透過 Nullish coalescing operator 進行非 null 或 undefined 判斷

  • 程式

    • 當 ?? 左邊的值為 null 或 undefined，則回傳 ?? 右邊數值，否則回傳 ?? 左邊的數值

  • 執行結果 - 使用 Babel 來執行 (安裝與使用方式請參考下方 安裝與設定 Babel 章節)

    26 

安裝與設定 Babel

Step 1. 安裝

• 請在終端機輸入下方指令

  npm install --save-dev nodemon @babel/core @babel/node @babel/preset-env 

Step 2. 設定 package.json

• 開啟 package.json 新增下方指令到 script 中

  "dev": "nodemon --exec babel-node index.js" 

• 原始的 package.json 檔
  

• 新增後的 package.json 檔 (第 8 行)
  

Step 3. 設定 .babelrc

• 於專案的根目錄新增 .babelrc 檔案並新增下方資訊

  {     "presets": [       "@babel/preset-env"     ] } 

Step 4. 執行程式

• 請在終端機輸入下方指令

  npm run dev 

Reference

• MDN
• Babel

GitHub

• ArcherHuang @ GitHub

List of blogs

• https://oranwind.org/author/archer/
• https://learningsky.io/author/archer/