【 JavaScript 】Optional chaining ?
內容
- 學習目標
- 前置準備作業
- 取得 Object 中存在的數值
- 取得 Object 中不存在的數值
- 透過 Optional chaining 取得 Object 中不存在的數值
學習目標
- 透過 Optional chaining 方式來避免
undefined造成程式錯誤
前置準備作業
- 已安裝 Node.js
- 已安裝 IDE
- 本範例使用 Visual Studio Code
取得 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後方加上?
- 第 1 行中於
-
執行結果 - 使用 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