vue2項目中支持可選鏈 (?.)、雙問號 (??)

ES2020

Optional Chaining Operator（?.） ：直接在鏈式調用的時候判斷，左側的對象是否為null或undefined。如果是的，就不再往下運算，而是返回undefined。

---

// 安裝依賴  npm install  @babel/plugin-proposal-optional-chaining -S
// @babel/plugin-proposal-nullish-coalescing-operator -S
// 在babel.config.js中  的 plugins中添加 "@babel/plugin-proposal-optional-chaining"

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

溫馨提示：<template>中暫時還不支持可選鏈語法

---

 

全局函數 兼容 template 使用
----------------------
// util.js
export default function useOptionChain(target) {
    return new Proxy(target, {
        get:  (target, propKey)=> {
            const proKeyArr = propKey.split('?.')
            return  proKeyArr.reduce((a,b)=>a?.[b],target)
        }
    })
}
----------------------
// *.vue   引入方法
data() {
    return {
        obj: { arr: [ {a:11}, {b:22} ] }
    }
}
methods: {
    useOptionChain,
},

// 模板使用
<div v-if="useOptionChain(obj)['arr?.0?.a']">對象數組</div>
<div v-if="useOptionChain(obj)['arr?.0?.a']">對象數組</div>