可选链运算符、空值合并运算符 --应用到vue项目
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项目的更多相关文章
- js 可选链 & 空值合并 In Action
js 可选链 & 空值合并 In Action const obj = { props: { name: 'eric', }, // prop, 不存在的属性 ️ }; console.log ...
- ES2020 系列:可选链 "?." 为啥出现,我们能用它来干啥?
可选链 "?." 可选链 ?. 是一种访问嵌套对象属性的安全的方式.即使中间的属性不存在,也不会出现错误. "不存在的属性"的问题 如果你才刚开始读此教程并学习 ...
- ?.可选链操作符( ?. ) 可选链运算符可防止抛出 TypeError: Cannot read property ’xxx' of undefined。
可选链操作符( ?. )允许读取位于连接对象链深处的属性的值,而不必明确验证链中的每个引用是否有效.?. 操作符的功能类似于 . 链式操作符,不同之处在于,在引用为空(nullish ) (null ...
- PHP NULL 合并运算符
HP 7 新增加的 NULL 合并运算符(??)是用于执行isset()检测的三元运算的快捷方式. NULL 合并运算符会判断变量是否存在且值不为NULL,如果是,它就会返回自身的值,否则返回它的第二 ...
- PHP中的null合并运算符
project: blog target: null-coalesce-operator-in-php.md date: 2015-12-30 status: publish tags: - Null ...
- 巧用 .NET 中的「合并运算符」获得 URL 中的参数
获取 URL 中的 GET 参数,无论用什么语言开发网站,几乎是必须会用到的代码.但获取 URL 参数经常需要注意一点就是要先判断是否有这个参数存在,如果存在则取出,如果不存在则用另一个值.这个运算称 ...
- 要注意null合并运算符的优先级比+还要低
博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:要注意null合并运算符的优先级比+还要低.
- PHP——??空合并运算符和?:三元运算符
前言 在上一篇随笔,用三元运算符简单写的一个东西,引发了对他的兴趣,所以打算研究下. PHP7的新特性: https://php.net/manual/zh/migration70.new-featu ...
- C# 空合并运算符 ??
C#语言中,??运算符称为空合并运算符: a??b形式的空合并表达式要求a为可以为null的类型或引用类型.如果a为非null,则a??b的结果为a:否则,结果为b.仅当a为null时,该操作才计算b ...
随机推荐
- Linux进程理解与实践(二)僵尸&孤儿进程 和文件共享
孤儿进程与僵尸进程 孤儿进程: 如果父进程先退出,子进程还没退出那么子进程的父进程将变为init进程.(注:任何一个进程都必须有父进程) [cpp] view plaincopy #include & ...
- Git 使用revert回滚已提交的commit
在git使用中如果提交错误的代码至远程服务器,可以使用git revert 命令回滚单次commit并且不影响其他commit. 回滚最新一次的提交记录: git revert HEAD 回滚前一次的 ...
- rabbitMQ批量删除指定的队列
首先进入到rabbitmq目录下的sbin目录 方法1: ./rabbitmqctl list_queues| grep helloQueue | awk '{print $1}' | xargs - ...
- Windows提权小结
摸鱼的时候,想想内网这部分还有什么地方适合水一下,翻翻往期,开始填坑 总结一下Windows提权的部分,以后有时间再补一下Linux提权 这仍然是一篇思路总结类的随笔,具体细节内容不展开,也展开不了. ...
- noip42
T1 朴素dp很好想,设 \(dp_{u,0/1}\) ,表示以 \(u\) 为根的子树,选/不选 \(u\) 所产生的最大贡献. 转移方程则有, \[dp_{u,0} = \prod_{v\in s ...
- NOIP 模拟 $34\; \rm Equation$
题解 \(by\;zj\varphi\) 发现每个点的权值都可以表示成 \(\rm k\pm x\). 那么对于新增的方程,\(\rm x_u+x_v=k\pm x/0\) 且 \(\rm x_u+x ...
- C# Monitor.Wait() 源码追踪 (转载)
source: 释放对象上的锁并阻止当前线程,直到它重新获取该锁. 如果已用指定的超时时间间隔,则线程进入就绪队列. 可以在等待之前退出同步上下文的同步域,随后重新获取该域. [SecuritySaf ...
- C#多线程---Task实现异步
一.场景 使用Task来进行累加操作. 二.例子-Task使用 1 using System; 2 using System.Collections.Generic; 3 using System.L ...
- QT 中的模态和非模态对话框
void MainWindow::on_pushButton_clicked() { //模态 QDialog dlg(this); dlg.resize(100,100); dlg.exec(); ...
- Linux中增加组和用户
新服务器增加用户: 1.创建一个新的组, groupadd oracle 2.useradd 命令用于建立用户账号(-g 指定用户所属的群组) useradd -g oracle oracle 3.再 ...