JavaScript:问号?的多种用法

本文介绍了JavaScript中的新特性,包括ES2020引入的可选链操作符(?.)用于安全访问可能不存在的对象属性,空值合并操作符(??)提供默认值,以及ES2021的逻辑赋值运算符(??=)。同时概述了正则表达式的量词、非贪婪量词和非捕获组的用法。
摘要由CSDN通过智能技术生成

条件运算符 (三元运算符)

早在ES1(ECMAScript 1st Edition)中就已经存在

let value = a > b ? exprIfTrue : exprIfFalse;
//为真,则返回 exprIfTrue 的值;否则返回 exprIfFalse 的值

可选链操作符 (?.)

ES2020(ECMAScript 2020)

obj?.propName;
//当尝试访问嵌套对象的属性时,如果 obj 是 null 或 undefined,则表达式将立即返回 undefined
//而不会抛出错误。这个操作符用于安全地访问可能不存在的对象属性或方法。

空值合并操作符 (??)

ES2020(ECMAScript 2020)

value ?? defaultValue;
//如果 value 不是 null 或 undefined,则返回 value;否则返回 defaultValue。
//该操作符用于提供一个默认值,当变量可能为空值时。

逻辑赋值运算符(??= )

ES2021(ECMAScript 2021)

??=(空值合并赋值) 这个运算符仅当左侧表达式的值为 null 或 undefined 时才执行右侧的赋值操作

let preference = localStorage.getItem('language');
preference ??= 'en'; 

// 如果从localStorage获取的语言偏好存在且非null/undefined,则使用该偏好;
// 否则将默认语言设置为'en'。

let value;
value ??= "fallbackValue"; // 因为 value 为 undefined,所以将 "fallbackValue" 赋给 value;现在 value = "fallbackValue"

let anotherValue = null;
anotherValue ??= "defaultValue"; // 因为 anotherValue 为 null,所以将 "defaultValue" 赋给 anotherValue;现在 anotherValue = "defaultValue"

补充:(&&=、||=)

&&=(逻辑与赋值) 这个运算符仅当左侧表达式的布尔值为真时才执行右侧的赋值操作。

let count = 0;
count &&= someCondition ? valueIfTrue : 0;
// 如果 someCondition 为真并且有值,则将 valueIfTrue 赋给 count;
// 否则 count 的值不变。

let x = null;
x &&= 5; // 因为 x 为 false,所以不执行赋值,x 保持原值 null

let y = {value: 1};
y.value &&= 3; // 因为 y.value 为 true(即非 null 和 undefined),所以 y.value 被赋值为 3,现在 y = {value: 3}

||=(逻辑或赋值) 这个运算符仅当左侧表达式的布尔值为假时才执行右侧的赋值操作。

let userSetting = localStorage.getItem('theme') || 'default';
userSetting ||= 'dark';

// 如果从localStorage获取到的主题存在且非空字符串,则使用该主题;
// 否则将默认主题设置为'dark'。

let color = "";
color ||= "blue"; // 因为 color 为空字符串(falsy),所以将 "blue" 赋给 color;现在 color = "blue"

let enabled = false;
enabled ||= true; // 因为 enabled 为 false,所以将 true 赋给 enabled;现在 enabled = true

正则表达式中

1、量词:匹配零次或一次 在正则表达式模式中,? 可以放在一个字符、字符集或元字符后面,表示前面的元素可以出现0次或者1次。

let regex = /a?b/;
let str = "ab";
console.log(str.match(regex)); // 输出:["ab"]

str = "b";
console.log(str.match(regex)); // 输出:["b"]

2、非贪婪量词:当 ? 与量词 {n, m} 或 {n,} 结合使用时,它变为非贪婪版本,尽可能少地匹配字符。

et regex = /.*?abc/g;
let str = "Hello abc world abc!";
console.log(str.match(regex)); // 输出:["abc", "abc"]

(.) 表示任何字符,(*?) 表示匹配任意数量的字符但尽可能少匹配,所以每次只匹配到第一个 “abc” 前的最短字符串。

3、非捕获组:当 ? 放在括号 () 开头时,形成 (?:pattern)? 形式的非捕获组,这个组不计入返回结果中,并且不会被捕获供后续引用。

let regex = /(?:ab)?c/;
let str = "ac";
console.log(str.match(regex)); // 输出:["c"]
  • 17
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

待煎的前端

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值