可选链运算符、空值合并运算符 --应用到vue项目

时间：2022-04-26 16:17:31
1、npm安装

npm install  @babel/plugin-proposal-optional-chaining // 可选链运算符 ?.

npm install  @babel/plugin-proposal-nullish-coalescing-operator // 空值合并运算符 ??



2、配置label.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' // ''


相关文章