【JavaScript】JavaScript 运算符 ④ ( 逻辑运算符 | 逻辑与运算符 && | 逻辑或运算符 ||

这篇具有很好参考价值的文章主要介绍了【JavaScript】JavaScript 运算符 ④ ( 逻辑运算符 | 逻辑与运算符 && | 逻辑或运算符 || | 逻辑非运算符 ! )。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、JavaScript 逻辑运算符

1、逻辑运算符概念

JavaScript 中的逻辑运算符的作用是对布尔值进行运算 , 运算完成后的返回值也是布尔值 ;

逻辑运算符的使用场景 :

条件控制语句 , 控制程序分支 ;
循环控制语句 , 控制程序循环 ;

逻辑运算符列举 :

&& : 逻辑与运算 ,
- 两个操作数都为 true , 最终结果才为 true ,
- 只要有一个操作数是 false , 结果就是 false ;
|| : 逻辑或运算 ,
- 两个操作数都为 false , 最终结果才为 false ,
- 只要有一个操作数是 true , 结果就是 true ;
! : 逻辑非运算 ;

2、逻辑与运算符 &&

&& 逻辑与运算符 :

两个操作数都为 true , 最终结果才为 true ,
只要有一个操作数是 false , 结果就是 false ;

&& 逻辑与运算符短路效果 :

该操作符的 2 个操作数 , 只要有一个操作数是 false , 结果就是 false ;
如果第一个操作数为 false , 第二个操作数不管是 true 还是 false , 整个逻辑与运算的结果都是 false , 因此第二个操作数不需要再参与运算 , 直接返回 false 结果即可 ;
如果第一个操作数为 true , 那么还需要继续判断第二个操作数的布尔值 ;

自动类型转换 : 如果参与逻辑运算的操作数不是布尔值类型 , 逻辑运算符会将其转换为布尔值 , 然后进行运算 ;

代码示例 :

        // 1. 逻辑与运算符 &&

        // 两个操作数都为 true , 运算结果才为 true
        console.log(true && true);

        // 只要有一个操作数为 false , 结果就是 false
        console.log(true && false);

        // 短路效果
        console.log(false && true);

3、逻辑或运算符 ||

|| 逻辑或运算符 :

两个操作数都为 false , 最终结果才为 false ,
只要有一个操作数是 true , 结果就是 true ;

|| 逻辑或运算符短路效果 :

该操作符的 2 个操作数 , 只要有一个操作数是 true , 结果就是 true ;
如果第一个操作数为 true , 第二个操作数不管是 true 还是 false , 整个逻辑或运算的结果都是 true , 因此第二个操作数不需要再参与运算 , 直接返回 true 结果即可 ;
如果第一个操作数为 false , 那么还需要继续判断第二个操作数的布尔值 ;

自动类型转换 : 如果参与逻辑运算的操作数不是布尔值类型 , 逻辑运算符会将其转换为布尔值 , 然后进行运算 ;

代码示例 :

        // 2. 逻辑或运算符 ||

        // 两个操作数都为 false , 运算结果才为 false
        console.log(false || false);

        // 只要有一个操作数为 true , 结果就是 true
        console.log(false || true);

        // 短路效果
        console.log(true || false);

4、逻辑非运算符 !

逻辑非运算符 ! 用于对操作数的布尔值进行取反 ;

如果操作数为 true , 则返回 false；
如果操作数为 false , 则返回 true ;

自动类型转换 : 如果参与逻辑运算的操作数不是布尔值类型 , 逻辑运算符会将其转换为布尔值 , 然后进行运算 ;

5、完整代码示例

完整代码示例 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 设置 meta 视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript</title>
    <style></style>
    <script>
        // 逻辑运算符

        // 1. 逻辑与运算符 &&

        // 两个操作数都为 true , 运算结果才为 true
        console.log(true && true);

        // 只要有一个操作数为 false , 结果就是 false
        console.log(true && false);

        // 短路效果
        console.log(false && true);

        // 2. 逻辑或运算符 ||

        // 两个操作数都为 false , 运算结果才为 false
        console.log(false || false);

        // 只要有一个操作数为 true , 结果就是 true
        console.log(false || true);

        // 短路效果
        console.log(true || false);


        // 3. 逻辑非运算符 !

        console.log(!false);
        console.log(!true);
    </script>
</head>

<body>
</body>

</html>

展示效果 :

【JavaScript】JavaScript 运算符 ④ ( 逻辑运算符 | 逻辑与运算符 && | 逻辑或运算符 || | 逻辑非运算符 ! ),JavaScript,javascript,开发语言,ecmascript,前端,运算符,逻辑运算符,逻辑与运算文章来源地址https://www.toymoban.com/news/detail-841900.html