es6 基础学习之?. ??之类的相关

ES6 和后续版本中的可选链(Optional Chaining)和空值合并(Nullish Coalescing)

可选链(Optional Chaining)?.

可选链运算符(?.)允许你在尝试访问对象的某个属性时不必明确验证该对象是否存在。如果该对象不存在,表达式会短路,返回 undefined

基本用法:

javascript 复制代码
const user = {
  name: 'John',
  address: {
    street: '123 Main St',
  },
};

// 普通方式
const street = user && user.address && user.address.street;

// 使用可选链
const streetWithOptionalChaining = user?.address?.street;

console.log(street); // 输出 "123 Main St"
console.log(streetWithOptionalChaining); // 输出 "123 Main St"

可选链也可以用于函数调用:

javascript 复制代码
const result = someObject?.someMethod?.();

如果 someMethod 存在并且是一个函数,那么它会被调用;否则,result 会被赋值为 undefined

空值合并(Nullish Coalescing)??

空值合并运算符(??)用于为变量设置默认值。当你希望仅在变量为 nullundefined 时使用默认值,而不是依赖于变量的所有假值(如 0''false 等),这个运算符会非常有用。

基本用法:

javascript 复制代码
const value = null;
const defaultValue = 'Default Value';

const result = value ?? defaultValue;
console.log(result); // 输出 "Default Value"

结合使用

这两个运算符经常会被结合使用,以便更简洁地处理嵌套属性和设置默认值。

javascript 复制代码
const user = {
  name: 'John',
  preferences: {
    theme: 'Dark',
  },
};

const theme = user?.preferences?.theme ?? 'Light';

console.log(theme); // 输出 "Dark"

在这个例子中,如果 userpreferencesnullundefined,则 theme 将被设置为默认值 'Light'

这些是 ES6 和后续版本中可选链和空值合并的基本用法。这两个运算符都提供了一种更简洁、更安全的方式来处理 nullundefined,从而让代码更加易读和可维护。希望这些信息能帮助你更好地理解和使用这些特性。

相关推荐
bin91535 小时前
DeepSeek 助力 Vue 开发:打造丝滑的复制到剪贴板(Copy to Clipboard)
前端·javascript·vue.js·ecmascript·deepseek
晴空万里藏片云6 小时前
elment Table多级表头固定列后,合计行错位显示问题解决
前端·javascript·vue.js
计算机-秋大田13 小时前
基于Spring Boot的兴顺物流管理系统设计与实现(LW+源码+讲解)
java·vue.js·spring boot·后端·spring·课程设计
禾苗种树13 小时前
在 Vue 3 中使用 ECharts 制作多 Y 轴折线图时,若希望 **Y 轴颜色自动匹配折线颜色**且无需手动干预,可以通过以下步骤实现:
前端·vue.js·echarts
小盼江15 小时前
水果生鲜农产品推荐系统 协同过滤余弦函数推荐水果生鲜农产品 Springboot Vue Element-UI前后端分离 代码+开发文档+视频教程
vue.js·spring boot·ui
初遇你时动了情16 小时前
react module.scss 避免全局冲突类似vue中scoped
vue.js·react.js·scss
烂蜻蜓16 小时前
Uniapp 设计思路全分享
前端·css·vue.js·uni-app·html
bin915317 小时前
DeepSeek 助力 Vue 开发:打造丝滑的二维码生成(QR Code)
前端·javascript·vue.js·ecmascript·deepseek
浪九天21 小时前
Vue 不同大版本与 Node.js 版本匹配的详细参数
前端·vue.js·node.js
尚学教辅学习资料1 天前
基于SpringBoot+vue+uniapp的智慧旅游小程序+LW示例参考
vue.js·spring boot·uni-app·旅游