/ JavaScript

【 JavaScript 】Optional chaining ?

內容

  • 學習目標
  • 前置準備作業
  • 取得 Object 中存在的數值
  • 取得 Object 中不存在的數值
  • 透過 Optional chaining 取得 Object 中不存在的數值

學習目標

  • 透過 Optional chaining 方式來避免 undefined 造成程式錯誤

前置準備作業


取得 Object 中存在的數值

  • Javascript Object

  • 取得 weather Object 中的 data 的 temperature 的 current 數值

    • 程式

    • 執行結果

      current-temperature: 26
      

取得 Object 中不存在的數值

  • Javascript Object

  • 如果要取得 weather Object 中的 data 的 humidity 的 current 數值

    • 程式

    • 執行結果

      • 因為 weather Object 不存在 humidity 的 current 數值
      let currentHumidity = weather.data.humidity.current
                                              ^
      
      TypeError: Cannot read property 'current' of undefined
      at Object.<anonymous> (/Users/archer/Desktop/javascript/optionalChaining/index.js:12:45)
      at Module._compile (internal/modules/cjs/loader.js:776:30)
      at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
      at Module.load (internal/modules/cjs/loader.js:653:32)
      at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
      at Function.Module._load (internal/modules/cjs/loader.js:585:3)
      at Function.Module.runMain (internal/modules/cjs/loader.js:829:12)
      at startup (internal/bootstrap/node.js:283:19)
      at bootstrapNodeJSCore (internal/bootstrap/node.js:622:3)
      

透過 Optional chaining 取得 Object 中不存在的數值

  • Javascript Object

  • 如果要取得 weather Object 中的 data 的 humidity 的 current 數值

    • 程式

      • 第 1 行中於 humidity 後方加上 ?
    • 執行結果 - 使用 Babel 來執行 (安裝與使用方式請參考下方 安裝與設定 Babel 章節)

      current-humidity: undefined
      

安裝與設定 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 檔
    ---2020-04-06---4.13.42

  • 新增後的 package.json 檔 (第 8 行)
    ---2020-04-06---4.14.01


Step 3. 設定 .babelrc

  • 於專案的根目錄新增 .babelrc 檔案並新增下方資訊
    {
        "presets": [
          "@babel/preset-env"
        ]
    }
    

Step 4. 執行程式

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

Reference
GitHub
List of blogs
Archer

Archer

Having being a software engineer. Experience with Python, JavaScript, Node.js, Objective-C, Micro:bit, Raspberry Pi, AWS, Azure, IoT. ❆ [email protected] https://oranwind.org/author/archer/

Read More