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

程序员明明技术 2022年11月17日

0 收藏 864 点赞 4,973 浏览 729 个字

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' // ''