可选链运算符、空值合并运算符 --应用到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' // ''