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

2021-06-07 10:35:53 阅读：367 来源： 互联网

标签：vue const parent -- babel 运算符 proposal null

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

标签：vue,const,parent,--,babel,运算符,proposal,null
来源： https://www.cnblogs.com/zhaoxiaoying/p/14857785.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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