【 JavaScript 】Optional chaining ?

內容

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

學習目標

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

前置準備作業

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

取得 Object 中存在的數值

• Javascript Object

  	let weather = {
  	"data": {
  	"temperature": {
  	"current": 26,
  	}
  	}
  	}

  view raw weather-object.js hosted with ❤ by GitHub

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

  • 程式

    	const currentTemperature = weather.data.temperature.current
    	console.log(`current-temperature: ${currentTemperature}`)

    view raw get-weather-data-temperature-current.js hosted with ❤ by GitHub

  • 執行結果

    current-temperature: 26 

取得 Object 中不存在的數值

• Javascript Object

  	let weather = {
  	"data": {
  	"temperature": {
  	"current": 26,
  	}
  	}
  	}

  view raw weather-object.js hosted with ❤ by GitHub

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

  • 程式

    	let currentHumidity = weather.data.humidity.current
    	console.log(`current-humidity: ${currentHumidity}`)

    view raw get-weather-data-humidity-current.js hosted with ❤ by GitHub

  • 執行結果

    • 因為 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

  	let weather = {
  	"data": {
  	"temperature": {
  	"current": 26,
  	}
  	}
  	}

  view raw weather-object.js hosted with ❤ by GitHub

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

  • 程式

    • 第 1 行中於 humidity 後方加上 ?

    	let currentHumidity = weather.data.humidity?.current
    	console.log(`current-humidity: ${currentHumidity}`)

    view raw optional-chaining-get-weather-data-humidity-current.js hosted with ❤ by GitHub

  • 執行結果 - 使用 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 檔
  

• 新增後的 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/