可選鏈運算符、空值合並運算符 --應用到vue項目

1、npm安裝

npm install  @babel/plugin-proposal-optional-chaining // 可選鏈運算符 ?.
npm install  @babel/plugin-proposal-nullish-coalescing-operator // 空值合並運算符 ??

2、配置babel.config.js

module.exports = {
  plugins: [
    '@babel/plugin-proposal-optional-chaining',  // 可選鏈運算符 ?.
    '@babel/plugin-proposal-nullish-coalescing-operator'  // 空值合並運算符 ??
  ]
}

 

 3、應用

　　3.1  可選鏈  ?.

// 讀取連接對象鏈的深處的屬性值。

// 函數引用
let res = parent ?. myFn ?. ()    // parent若存在myFn方法則調用     

// 表達式
let res = parent ?. [`item-${index}`]

// 訪問數組項
let res = parent ?. list ?. [2]    // 訪問parent屬性list中的下標為2的值

// 設置默認值
let res = parent ?. sex ?? '男' // 取parent的sex屬性值，若不存在（undefined）則默認值為'男'

 

　　3.2  空值合並  ??

// 左側為 null / undefined 返回右側值；否則返回左側值。

const v1 = null ?? 'name'    // 'name'
const v2 = 0 ?? 12    // 0
const v3 = undefined ?? 0    // 0
const v4 = undefined ?? null    // null
const v5 = 10 ?? null    // 10
const v6 = '' ? 'HAHA' // ''