判断符号??,?. ,! ,!! ,|| ,&&,?: 意思以及举例

  1. ??(逻辑空合并运算符)

    • 含义 :如果左边的值是 nullundefined,则返回右边的值,否则返回左边的值。

    • 示例

      复制代码
      let a = null;
      console.log(a ?? 10);  // 输出:10
      let b = 5;
      console.log(b ?? 10);  // 输出:5
  2. ?.(可选链运算符)

    • 含义 :用于安全地访问对象深层次的属性,避免出现 Cannot read property 'xxx' of undefined 的错误。

    • 示例

      复制代码
      const obj = { a: { b: 1 } };
      console.log(obj?.a?.b);  // 输出:1
      console.log(obj?.c?.d);   // 输出:undefined
  3. !(逻辑非)

    • 含义:将值转换为布尔值的反面。非布尔值会被强制转换为布尔值。

    • 示例

      复制代码
      console.log(!true);     // 输出:false
      console.log(!"hello");  // 输出:false
      console.log(!0);        // 输出:true
  4. !!(双重非)

    • 含义:将任意类型的值强制转换为布尔值。

    • 示例

      复制代码
      console.log(!!"");       // 输出:false
      console.log(!!"hello"); // 输出:true
      console.log(!!0);       // 输出:false
      console.log(!!1);       // 输出:true
  5. ||(逻辑或)

    • 含义:如果左边的值是真值,则返回左边的值;否则返回右边的值。

    • 示例

      复制代码
      console.log(true || false);  // 输出:true
      console.log(false || 10);   // 输出:10
      console.log("" || "hello");// 输出:"hello"
  6. &&(逻辑与)

    • 含义:如果左边的值是真值,则返回右边的值;否则返回左边的值。

    • 示例

      复制代码
      console.log(true && false); // 输出:false
      console.log(true && 10);   // 输出:10
      console.log("" && "hello"); // 输出:""
  7. ?:(三元条件运算符)

    • 含义 :根据条件判断返回不同的值,属于一种简洁的 if-else 表达方式。

    • 示例

      复制代码
      const num = 5;
      const isEven = num % 2 === 0 ? "偶数" : "奇数";
      console.log(isEven);       // 输出:"奇数"

这些运算符在前端开发中非常常用,能够让代码更加简洁和高效。

相关推荐
晴天1635 分钟前
前端 postMessage 使用场景
前端·javascript·网络
zhanghaha13141 小时前
HTML系列教程:15_标签 全称 + 简写 超详细讲解(新手专用)
前端·html
zhanghaha13142 小时前
HTML系列教程:14_HTML 表单与输入框 <form>、<input> 零基础详解
java·前端·javascript
IMPYLH2 小时前
HTML 的 <samp> 元素
前端·网络·html
IMPYLH2 小时前
HTML 的 <script> 元素
前端·html
weixin_493503676 小时前
Vue3 前端生成 PDF:会员证书与活动签到表的三种打印方案与踩坑记录
前端·pdf·状态模式
傻啦嘿哟7 小时前
某招聘平台爬虫:爬取招聘岗位数据,分析各城市薪资水平
开发语言·爬虫·python
2501_933670797 小时前
2026秋招量化分析岗技能栈:Python、SQL、统计建模、回测项目怎么准备
开发语言·python·sql
李少兄8 小时前
JavaScript 数据类型完全指南
开发语言·javascript·ecmascript
Seoyoneh8 小时前
Agentic Workflow编排架构:云客服从“被动响应”迈向“主动执行”的技术实现
java·开发语言·架构