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