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

devtools/2024/12/23 8:38:44/

文章目录

        • ??(空值合并运算符)
          • 区别
        • | - 逻辑或(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/devtools/144092.html

相关文章

打通全网SEO优化:提高百度、B站、抖音等平台搜索排名

SEO&#xff08;搜索引擎优化&#xff09;已经不仅仅局限于传统的搜索引擎&#xff0c;它涵盖了多个内容平台、电商平台、社交媒体等。要想在这些平台上获得更多的曝光&#xff0c;提升品牌知名度&#xff0c;获取精准流量&#xff0c;必须采用全网SEO优化策略。如何打通全网SE…

webdriver 反爬虫 (selenium反爬虫) 绕过

1. webdriver 反爬虫原理 爬虫程序可以借助渲染工具从动态网页中获取数据。 在这个过程中&#xff0c;“借助”其实是通过对应的浏览器驱动&#xff08;即WebDriver&#xff09;向浏览器发出指令的行为。因此&#xff0c;开发者可以根据客户端是否包含浏览器驱动这一特征来区分…

GIT命令使用手册(详细实用版)

一、git常用操作参考 第一次提交完整步骤&#xff1a; 1.git init; 2.git add . 3.git commit -m "初始化" 4.git remote add origin https://github.com/githubusername/demo.git 5.git pull origin master 6.git push -u origin master&#xff08;使用-u选项可以将…

【uniapp蓝牙】基于native.js链接ble和非ble蓝牙

【uniapp蓝牙】基于native.js链接ble和非ble蓝牙 uniapp不是仅支持低功耗蓝牙&#xff08;基础蓝牙通讯不支持&#xff09;&#xff0c;有些可能需要基础蓝牙。我现在同步我的手机蓝牙列表低功耗&#xff0c;基础蓝牙都支持 /*** author wzj* 通用蓝牙模块封装* 搜索 ble 和非…

代码随想录-笔记-其七

我们来到了贪心算法的章节。 贪心算法和其他部分不太一样的是&#xff0c;他更多的是突出一种思路&#xff1a;通过求局部最优解来求全局最优解。因为只是一个大的思想逻辑&#xff0c;针对不同题型总是有不同的解决方案&#xff0c;所以贪心算法也不想其他算法那样有一个很经…

初学stm32 --- 定时器中断

目录 时钟选择&#xff1a; 内部时钟选择​编辑 时钟计算方法&#xff1a; 计数器模式 向下计数模式&#xff08;时钟分频因子1&#xff0c;ARR36&#xff09; 向上计数模式&#xff08;时钟分频因子1&#xff0c;ARR36&#xff09; 中央对齐计数模式&#xff08;时钟分频因…

VSCode 配置远程连接免密登录

自我存档 远程连接 在扩展界面搜remote ssh 安装完成后可以在侧边栏找到远程资源管理器 通过来添加或者点击打开ssh配置文件 点击的话以这种方式, 手动添加则按照相同格式输入即可 格式如下所示, Host后添加IP, User是登录ssh的用户, hostname是显示在vscode的别名 ss…

堆排:一种高效的比较排序算法

欢迎来到我的&#xff1a;世界 希望作者的文章对你有所帮助&#xff0c;有不足的地方还请指正&#xff0c;大家一起学习交流 ! 目录 前言内容堆排序的原理堆排的优点动态演示堆排代码实现 总结 前言 在计算机科学中&#xff0c;排序算法是一类非常重要的算法&#xff0c;它们用…