判断符号??,?. ,! ,!! ,|| ,,?: 意思以及举例
-
??(逻辑空合并运算符)
- 含义:如果左边的值是
null
或undefined
,则返回右边的值,否则返回左边的值。 - 示例:
let a = null; console.log(a ?? 10); // 输出:10 let b = 5; console.log(b ?? 10); // 输出:5
- 含义:如果左边的值是
-
?.(可选链运算符)
- 含义:用于安全地访问对象深层次的属性,避免出现
Cannot read property 'xxx' of undefined
的错误。 - 示例:
const obj = { a: { b: 1 } }; console.log(obj?.a?.b); // 输出:1 console.log(obj?.c?.d); // 输出:undefined
- 含义:用于安全地访问对象深层次的属性,避免出现
-
!(逻辑非)
- 含义:将值转换为布尔值的反面。非布尔值会被强制转换为布尔值。
- 示例:
console.log(!true); // 输出:false console.log(!"hello"); // 输出:false console.log(!0); // 输出:true
-
!!(双重非)
- 含义:将任意类型的值强制转换为布尔值。
- 示例:
console.log(!!""); // 输出:false console.log(!!"hello"); // 输出:true console.log(!!0); // 输出:false console.log(!!1); // 输出:true
-
||(逻辑或)
- 含义:如果左边的值是真值,则返回左边的值;否则返回右边的值。
- 示例:
console.log(true || false); // 输出:true console.log(false || 10); // 输出:10 console.log("" || "hello");// 输出:"hello"
-
&&(逻辑与)
- 含义:如果左边的值是真值,则返回右边的值;否则返回左边的值。
- 示例:
console.log(true && false); // 输出:false console.log(true && 10); // 输出:10 console.log("" && "hello"); // 输出:""
-
?:(三元条件运算符)
- 含义:根据条件判断返回不同的值,属于一种简洁的
if-else
表达方式。 - 示例:
const num = 5; const isEven = num % 2 === 0 ? "偶数" : "奇数"; console.log(isEven); // 输出:"奇数"
- 含义:根据条件判断返回不同的值,属于一种简洁的
这些运算符在前端开发中非常常用,能够让代码更加简洁和高效。