Vue.js前端框架教程13:Vue空值合并?? 可选链?.和展开运算符...

server/2024/12/21 9:28:06/

文章目录

        • ??(空值合并运算符)
          • 区别
        • | - 逻辑或(Logical OR)
        • || - 空值合并运算符(Nullish Coalescing Operator)
        • ?. - 可选链(Optional Chaining)
        • ... 展开运算符(Spread Operator)

??(空值合并运算符)

??ES2020 新增的空值合并运算符,它只在左侧的操作数为 nullundefined 时才返回右侧操作数的值。如果左侧操作数不是空值,无论其值是 0falseNaN''(空字符串)还是其他假值,都会返回左侧操作数的值。

javascript">const a = null;
const b = 'default';console.log(a ?? b); // 输出 'default'
console.log(0 ?? b); // 输出 0,因为 0 不是 null 或 undefined
console.log(a ?? null ?? b); // 输出 'default',因为第一个操作数是 null,第二个操作数也是 null
console.log('text' ?? b); // 输出 'text',因为 'text' 不是 null 或 undefined
区别
  • || 会在左侧操作数为假值(包括 nullundefined0falseNaN'')时返回右侧操作数的值。
  • ?? 仅在左侧操作数为 nullundefined 时返回右侧操作数的值,对其他假值会返回左侧操作数的值。

因此,|| 更适合用于布尔逻辑和条件运算,而 ?? 更适合用于提供一个默认值,特别是当你想要保留原始值中的假值时。

| - 逻辑或(Logical OR)

JavaScript 中,| 是逻辑或运算符,用于两个布尔值的比较。如果其中一个值为 true,则结果为 true

javascript">true | false // true
false | false // false

Vue 模板中,你可以使用它来实现条件渲染:

<template><div v-if="condition1 | condition2"><!-- 如果 condition1 或 condition2 为 true,这个元素将被渲染 --></div>
</template>
|| - 空值合并运算符(Nullish Coalescing Operator)

||JavaScript 中用于逻辑或,但它的行为与 | 略有不同。如果左侧的表达式为 nullundefined,则 || 会返回右侧的值。

javascript">undefined || 'default' // 'default'
'value' || 'default' // 'value'

Vue 中,这可以用于提供默认值:

<template><div>{{ value || 'default' }}</div>
</template>
?. - 可选链(Optional Chaining)

?.JavaScript 的一个新特性,允许你安全地访问对象的深层属性,即使中间有 nullundefined 的值也不会抛出错误。

javascript">const obj = { a: { b: 'value' } };
const value = obj?.a?.b; // 'value'

Vue 中,这可以用于安全地访问响应式数据:

<template><div>{{ obj?.a?.b }}</div>
</template>
… 展开运算符(Spread Operator)

..JavaScript 的展开运算符,用于将数组或对象中的元素展开。

javascript">const array = [1, 2, 3];
const newArray = [...array, 4, 5]; // [1, 2, 3, 4, 5]

Vue 中,这可以用于 v-bindv-on 指令:

<template><div v-bind="$attrs"></div>
</template>

这些符号和特性在 Vue 中的使用与在纯 JavaScript 中的使用是一致的,它们提供了更灵活和强大的数据处理能力。


http://www.ppmy.cn/server/151911.html

相关文章

Web应用中的XSS防护实践

什么是XSS攻击&#xff1f; XSS(Cross-Site Scripting)跨站脚本攻击是一种常见的网络安全漏洞。攻击者通过在网页中注入恶意脚本代码,当用户浏览这些页面时,恶意代码会在用户的浏览器中执行,从而盗取用户信息、篡改页面内容或进行其他恶意操作。 XSS攻击的主要类型 1. 反射型…

被裁20240927 --- 嵌入式硬件开发 前篇

前篇主要介绍一些相关的概念&#xff0c;用于常识扫盲&#xff0c;后篇开始上干货&#xff01; 他捧着一只碗吃过百家的饭 处理器芯片处理器芯片制造商嵌入式处理器芯片制造商国内制造商国外制造商 与意法半导体对标的国产芯片制造商一、中芯国际二、华为海思三、紫光国微四、北…

uniapp Native.js 调用安卓arr原生service

最近搞了个uni小项目&#xff0c;一个定制的小平板&#xff0c;带一个nfc设备&#xff0c;厂家只给了一套安卓原生demo&#xff0c;头一次玩原生安卓&#xff0c;废了好半天劲打出来arr包&#xff0c;想镶进uniapp里&#xff0c;网上查了好久&#xff0c;都是错的&#xff0c;要…

113.PyQt5_QtPrintSupport_打印操作

课 程 推 荐我 的 个 人 主 页&#xff1a;&#x1f449;&#x1f449; 失心疯的个人主页 &#x1f448;&#x1f448;入 门 教 程 推 荐 &#xff1a;&#x1f449;&#x1f449; Python零基础入门教程合集 &#x1f448;&#x1f448;虚 拟 环 境 搭 建 &#xff1a;&#x1…

关于IP代理API,我应该了解哪些功能特性?以及如何安全有效地使用它来隐藏我的网络位置?

IP代理API是一种服务&#xff0c;允许用户通过访问经过中间服务器的网络连接来改变其公开的互联网协议地址&#xff08;IP&#xff09;&#xff0c;从而达到隐藏真实地理位置的效果。以下是您在选择和使用IP代理API时应关注的一些功能和安全性考虑&#xff1a; 匿名度&#xff…

第3节 测试套件数据驱动

创建Excel、 CSV测试数据 1. 从主菜单中选择 File > New > Test Data。将显示新的测试数据对话框。输入测试数据的名称并选择数据类型作为Excel File/ CSV File 。单击OK。 2. 浏览到要导入Katalon Studio的Excel File, 选择Excel中的sheetName&#xff0c;或者CSV文件…

在 Windows 系统上怎么看sqlserver的驱动版本呢

在 Windows 系统上&#xff0c;可以通过以下几种方法查看已安装的 SQL Server ODBC 驱动版本&#xff1a; 方法 1&#xff1a;通过 ODBC 数据源管理器 打开 ODBC 数据源管理器&#xff1a; 按下 Win S&#xff0c;搜索 ODBC 数据源管理器&#xff08;32位或64位&#xff0c;根…

Json 序列化一 —— 基础篇

1、简介 JSON&#xff08;JavaScript Object Notation&#xff09;是一种轻量级的数据交换格式&#xff0c;它的作用是数据标记&#xff0c;存储&#xff0c;传输&#xff0c;具有读写速度快、解析简单、轻量级、独立于语言和平台、具有自我描述性等特点。 像 gson、fastjson、…