首页 > web前端 > js教程 > 正文

JavaScript 中的空合并运算符`??`

DDD
发布: 2024-09-19 16:27:02
转载
748人浏览过

javascript 中的空合并运算符`??`

在本博客中,我们将探讨 javascript 中的空合并运算符 ??。我们将它与逻辑 or 运算符 || 进行比较,讨论其优先级,并提供实际示例来帮助您理解其用法。让我们潜入吧!

空值合并运算符??

空值合并运算符 ?? 用于在处理 nullundefined 时提供默认值。当左侧操作数为 nullundefined 时,它返回右侧操作数。否则,它返回左侧操作数。

语法:

result = value1 ?? value2;

登录后复制

示例:

内容管理系统
内容管理系统

SilverStripe CMS是一款功能强大的CMS内容管理系统,适用于一些中小型企业建站使用,具有强大的网站设计功能,直观和友好的用户操作界面,采用MVC框架设计开发并运用了Ajax技术,易于扩展,所有页面都符合XHTML标准并基于模板生成。

内容管理系统 486
查看详情 内容管理系统
let user = null;
let defaultuser = "guest";

let currentuser = user ?? defaultuser;
console.log(currentuser); // output: "guest"

登录后复制

说明:

  • 用户 为
  • ?? 运算符返回 defaultuser,因为 usernull

与 || 比较

逻辑或运算符||返回它遇到的第一个真值。这意味着如果左操作数为假,它将返回右操作数 (false, 0, "", null未定义nan)。

立即学习Java免费学习笔记(深入)”;

示例:

let user = "";
let defaultuser = "guest";

let currentuser = user || defaultuser;
console.log(currentuser); // output: "guest"

登录后复制

说明:

  • user 是一个空字符串 ""(假)。
  • || 运算符返回 defaultuser,因为 user 为假。

主要差异

  • ??:仅将 null未定义 视为虚假值。
  • ||:考虑所有虚假值 (false0""null未定义nan)。

示例:

let user = 0;
let defaultuser = "guest";

let currentuser1 = user ?? defaultuser;
let currentuser2 = user || defaultuser;

console.log(currentuser1); // output: 0
console.log(currentuser2); // output: "guest"

登录后复制

说明:

  • 用户0(对于 || 为假,但对于 ?? 则不然)。
  • ?? 运算符返回 0,因为 user 不为 null 或 未定义
  • || 运算符返回“guest”,因为用户是假的。

优先级

空合并运算符 ?? 的优先级低于大多数其他运算符,包括逻辑 or 运算符 ||。这意味着涉及 ?? 的表达式在涉及 ||.

的表达式之后求值

示例:

let a = null;
let b = false;
let c = "hello";

let result1 = a ?? b || c;
let result2 = a || b ?? c;

console.log(result1); // output: "hello"
console.log(result2); // output: "hello"

登录后复制

说明:

  • 一个?? b 返回 false,因为 anull,并且 b 为 false
  • 假|| c 返回 “hello”,因为 false 为假,而 c 为真。
  • 一个|| b 返回 false,因为 anull,并且 b 为 false
  • 假的?? c 返回“hello”,因为false 不是null未定义

实际例子

让我们用一些实际例子将所有内容放在一起:

使用?? 对于默认值

function getusername(user) {
  return user.name ?? "guest";
}

let user1 = { name: "alice" };
let user2 = { age: 25 };

console.log(getusername(user1)); // output: "alice"
console.log(getusername(user2)); // output: "guest"

登录后复制

说明:

  • 如果user.name 为null未定义,则??操作符返回“guest” .

使用|| 对于默认值

function getUserName(user) {
  return user.name || "Guest";
}

let user1 = { name: "" };
let user2 = { age: 25 };

console.log(getUserName(user1)); // Output: "Guest"
console.log(getUserName(user2)); // Output: "Guest"

登录后复制

说明:

  • 如果 user.name 为假(例如,""),则 || 运算符返回 “guest”

总结

  • ?? (空合并运算符):如果左侧操作数为 null未定义,则返回右侧操作数。
  • || (逻辑或运算符):返回遇到的第一个真值。
  • 优先级?? 运算符的优先级低于 || 运算符。

结论

空值合并运算符 ?? 是 javascript 中的一个强大工具,用于在处理 nullundefined 时提供默认值。通过了解它与逻辑 or 运算符 || 的区别及其优先级,您将能够编写更健壮且无错误的代码。不断练习和探索,加深对 javascript 中 nullish 合并运算符的理解。

请继续关注有关 javascript 的更多深入博客!快乐编码!

以上就是JavaScript 中的空合并运算符`??`的详细内容,更多请关注php中文网其它相关文章!

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。

下载
来源:dev.to网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门推荐
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号