前言
在開發(fā)過程中拿到一個(gè)內(nèi)嵌比較深的值需要做很多的判斷创淡，來保證沒有數(shù)據(jù)而報(bào)錯(cuò)壮吩，比如：
const obj = {
a: {
b: {
c:"1"
}
}
}
取c, 正確的做法是： const cValue = (obj && obj.a && obj.a.b && obj.a.b.c) || ''; // 需要判斷4次，每一層是否有值
ES2020
Optional Chaining Operator（?.） ：直接在鏈?zhǔn)秸{(diào)用的時(shí)候判斷始锚，左側(cè)的對(duì)象是否為null或undefined。如果是的，就不再往下運(yùn)算呻逆，而是返回undefined。具體用法可參考ES6( ES6）
取c const cValue = obj?.a?.b?.c //1
如何在項(xiàng)目中支持可選鏈
1. 安裝依賴（Babel）
為了避免出現(xiàn)兼容問題菩帝，裝好對(duì)應(yīng)的轉(zhuǎn)換器
npm install @babel/plugin-proposal-optional-chaining
2.添加至項(xiàng)目.babel.config.js文件中：
{
"plugins": [
"@babel/plugin-proposal-optional-chaining",
]
}
友情提示：<template>中暫時(shí)還不支持可選鏈語法
3.實(shí)際中的示例
全局函數(shù)
export default function useOptionChain(target) {
return new Proxy(target, {
get: (target, propKey)=> {
const proKeyArr = propKey.split('?.')
return proKeyArr.reduce((a,b)=>a?.[b],target)
}
})
}
使用
<template>
<div id="app">
//保留可選鏈的寫法咖城，更直觀的展示，想要拿數(shù)組的元素直接取下標(biāo)的數(shù)字即可呼奢，不需要 []
<h1 v-if="useOptionChain(arr)['0?.obj?.a?.b']">數(shù)組對(duì)象</h1>
<h1 v-if="useOptionChain(obj)['arr?.0?.a']">對(duì)象數(shù)組</h1>
</div>
</template>
<script>
//引入函數(shù)
import useOptionChain from "@/utils";
export default {
name: "App",
components: {},
data() {
return {
arr: [
{
obj: {
a: {
b: "數(shù)組對(duì)象",
},
},
},
],
obj: {
arr: [
{
a: "對(duì)象數(shù)組",
},
],
},
};
},
methods: {
useOptionChain,
},
};
</script>
作者：前端龍躍空
鏈接：http://www.reibang.com/p/d900d1005cfb
來源：簡書
著作權(quán)歸作者所有宜雀。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處握础。
