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

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

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

相关推荐
January12078 分钟前
VBen Admin Select 选择框选中后仍然显示校验错误提示的解决方案
前端·vben
. . . . .15 分钟前
前端测试框架:Vitest
前端
xiaotao13127 分钟前
什么是 Tailwind CSS
前端·css·css3
炸膛坦客28 分钟前
单片机/C/C++八股:(二十)指针常量和常量指针
c语言·开发语言·c++
兑生1 小时前
【灵神题单·贪心】1481. 不同整数的最少数目 | 频率排序贪心 | Java
java·开发语言
颜酱1 小时前
DFS 岛屿系列题全解析
javascript·后端·算法
战南诚1 小时前
VUE中,keep-alive组件与钩子函数的生命周期
前端·vue.js
发现一只大呆瓜1 小时前
React-彻底搞懂 Redux:从单向数据流到 useReducer 的终极抉择
前端·react.js·面试
霍理迪2 小时前
Vue的响应式和生命周期
前端·javascript·vue.js