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

  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);       // 输出:"奇数"

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

相关推荐
程序员JerrySUN32 分钟前
驱动开发硬核特训 · Day 22(下篇): # 深入理解 Power-domain 框架:概念、功能与完整代码剖析
linux·开发语言·驱动开发·嵌入式硬件
萌萌哒草头将军1 小时前
⚡⚡⚡尤雨溪宣布开发 Vite Devtools,这两个很哇塞 🚀 Vite 的插件,你一定要知道!
前端·vue.js·vite
游离状态的猫11 小时前
JavaScript性能优化实战:从瓶颈定位到极致提速
开发语言·javascript·性能优化
GeekABC1 小时前
FastAPI系列06:FastAPI响应(Response)
开发语言·python·fastapi·web
小彭努力中1 小时前
7.Three.js 中 CubeCamera详解与实战示例
开发语言·前端·javascript·vue.js·ecmascript
why1512 小时前
腾讯(QQ浏览器)后端开发
开发语言·后端·golang
charade3122 小时前
【C语言】内存分配的理解
c语言·开发语言·c++
浪裡遊2 小时前
跨域问题(Cross-Origin Problem)
linux·前端·vue.js·后端·https·sprint
滿2 小时前
Vue3 Element Plus el-tabs数据刷新方法
javascript·vue.js·elementui