＜一起JS(基础篇)＞5.一元运算符、逻辑运算符、赋值运算符、关系运算符、相等运算符、条件运算符、运算符的优先级、非波尔值的与或运算

最新推荐文章于 2024-08-11 18:40:36 发布

Kylin Yang

最新推荐文章于 2024-08-11 18:40:36 发布

阅读量242

点赞数

分类专栏： JS 文章标签： javascript js

本文链接：https://blog.csdn.net/ammmmaa/article/details/113627541

版权

JS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<一起JS(基础篇)>5.一元运算符、逻辑运算符、赋值运算符、关系运算符、相等运算符、条件运算符、运算符的优先级、非波尔值的与或运算

一、一元运算符

代码示例如下:

<!DOCTYPE html>
<!--
 * @Author: KylinYang
 * @Description: 一元运算符
 * @Date: 2021-02-02 14:54:10
 * @LastEditTime: 2021-02-02 15:04:31
 * @FilePath: \undefinedd:\VSCode\JS\15js一元运算符.html
-->
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript">
        /*
         *一元运算符  只需要一个操作数
         *   +正号
         *       -正好不会对数字产生影响
         *   -负号
         *       -可以对数字进行符号取反
         *       -对于非Number类型的值，它会将先转换成Number，然后再运算
         *   可以对一个其他的数据类型使用+，来将其转化为Number，他的原理和Number()函数一样
         */

        var a = 123;
        a = +a;
        a = -a;
        console.log("a=" + a);

        var c = "123";
        c = +c;
        console.log(typeof c);
        console.log(c);

        var d = 1 + +"2" + 3; //6
        console.log(d);
    </script>
</head>
<body>
</body>
</html>

二、逻辑运算符

代码示例如下：

<!DOCTYPE html>
<!--
 * @Author: KylinYang
 * @Description: 逻辑运算符
 * @Date: 2021-02-03 10:29:35
 * @LastEditTime: 2021-02-04 10:39:37
 * @FilePath: \undefinedd:\VSCode\JS\17js逻辑运算符.html
-->
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript">
        /*
         *JS为我们提供了三种逻辑运算符
         * 
         * ! 非
         *       -可以对一个值进行非运算
         *           就是对一个boolean值进行取反操作（false<-->true）
         *       -如果对非波尔值进行取反，则会将其转换为波尔值，然后再取反
         *           所以我们可以利用该特点，来将一个其他数据类型转换为波尔值
         *               即为任意数取两次反，来将其转换为波尔值，原理和Boolean()函数一样
         */
        var b = 10;
        b = !b;
        console.log("b=" + b);
        console.log(typeof b);


        /*
         * && 与
         *     -如果两个值都是true则返回true
         *      -只要有一个false，就返回false
         *      -JS中的“与”是短路与
         *              -的第一个值为true，会检查第二个
         *              -第一个值为false，就不会检查第二个
         */
        true && alert("0.0");



        /* 
         *|| 或
         *      -两个都是false则返回false
         *      -只要有一个true，就返回true
         *      -JS中的“或”属于短路或：第一个值为true不会检查第二个
         * 
         */

        false || alert("0.0");
    </script>
</head>
<body>
</body>
</html>

三、赋值运算符

代码示例如下：

<!DOCTYPE html>
<!--
 * @Author: KylinYang
 * @Description: 赋值运算符
 * @Date: 2021-02-03 11:03:44
 * @LastEditTime: 2021-02-04 10:41:37
 * @FilePath: \undefinedd:\VSCode\JS\19js赋值运算符.html
-->
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript">
        /*
         * = 可以将符号右侧的值赋值给符号左侧的变量
         */

        var a = 123;
        console.log(a);

        /*
         *+=  a+=5  ==> a=a+5
         *
         */

        /*
         *-=  a-=5  ==> a=a-5
         */

        /*
         **=  a*=5  ==> a=a*5
         */

        /*
         * /=  a/=5  ==> a=a/5
         */

        /*
         * %=  a%=5  ==> a=a%5
         */
    </script>
</head>
<body>
</body>
</html>

四、关系运算符

代码示例如下：

<!DOCTYPE html>
<!--
 * @Author: KylinYang
 * @Description: 关系运算符
 * @Date: 2021-02-03 11:10:46
 * @LastEditTime: 2021-02-04 10:43:52
 * @FilePath: \undefinedd:\VSCode\JS\20js关系运算符.html
-->
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript">
        /*
         *通过关系运算符可以比较两个值之间的大小关系
         *   如果关系成立它会返回true，如果关系不成立则会返回false
         * 
         * 对于非数值的情况，对于非数值进行比较时，会将其转换为数字然后进行比较
         * 任何值和NaN做任何比较都是false
         *  
         * 
         */

        /*
         * > 判断符号左侧的值是否大于右侧的值
         *        -关系成立返回true，如果关系不成立则返回false
         *
         *   >=  判断符号左侧的值是否大于或等于右侧的值
         *       - -关系成立返回true，如果关系不成立则返回false
         */

        /*
         * < 和<=  如是说
         */
        var result = 5 > 10; //false
        result = 5 > 1; //true
        console.log(result);

        console.log(10 > "helloworld"); //false


        //如果符号两侧的值都是字符串时，不会将其转换为数字进行比较，而会分别就比较字符串中字符的Unicode编码
        //不建议比较两个字符串型数字，因为结果可能不可预期
        //所以在比较两个字符串型的数字时，一定要转型
        console.log("11" < "5"); //true
        console.log("a" < "b"); //true

        //比较字符编码时是一位一位进行比较
        console.log("abc" < "b"); //true

        //如果两位一样则比较下一位,可借用来进行英文排序
        console.log("bbc" > "b"); //true
        //tips：比较中文没意义，但也有参照表，根据康熙字典排序的
    </script>
</head>
<body>
</body>
</html>

五、相等运算符

代码示例如下:

<!DOCTYPE html>
<!--
 * @Author: KylinYang
 * @Description: 相等运算符
 * @Date: 2021-02-04 10:56:12
 * @LastEditTime: 2021-02-04 11:57:53
 * @FilePath: \undefinedd:\VSCode\JS\22js相等运算符.html
-->
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script type="text/javascript">
      /*
      *相等运算符用来比较两个值是否相等
      *如果相等会返回true，否则会返回false
      *
      * 用 == 来表示相等运算
      *     -当使用==来比较两个值时，如果值的类型不同，则会自动进行类型转换，将其转换为相同的类型，然后再比较 
      */

      console.log(1 == 1);//true
      
      console.log("1"==1);//true

      console.log(true=="1");//true

      console.log(null==0);//false

      /*
      *undefined  衍生自null(相等但不全等)
      *所以这两个值做相等判断时，会返回true
      */
     console.log(undefined==null);//true

     /*
     *NaN不和任何值相等，包括它本身
     */
    console.log(NaN==NaN);//false
    /*
    *也就是说，无法用==来判断一个数是不是NaN，但是可以通过isNaN()函数来判断一个值是否是NaN
    *如果该值是NaN返回true；不是返回false
    */
   var b=NaN;
   console.log(isNaN(b));


   /*
   *不相等
   *      不相等用来判断两个值是否不相等，不相等返回true，否则返回false
   * ！=
   *    也会进行类型转换，转换后相等也会返回false
   */
  console.log(10 !=5);//true
  console.log("1"!=1);//false

  /*
  * === 全等  用来判断两个值是否全等，他和相等类似，不同的是它不会做自动的类型转换
                如果两个值的类型不同，直接返回false
  */
 console.log("123"===123);//false
 console.log(undefined===null);//false

 /*
 *!==  不全等   用来判断两个值是否不全等，和不等类似，不同的是他不会做自动的类型转换
*               如果两个值的类型不同直接返回true
 */
console.log(1!=="1");//true
    </script>
</head>
<body>
</body>
</html>

六、条件运算符

代码示例如下:

<!DOCTYPE html>
<!--
 * @Author: KylinYang
 * @Description: 条件运算符
 * @Date: 2021-02-04 14:57:53
 * @LastEditTime: 2021-02-04 15:15:40
 * @FilePath: \undefinedd:\VSCode\JS\23js条件运算符.html
-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript">
        /*
        *条件运算符也叫三元运算符
        *      语法：条件表达式？语句1：语句2;
        *      执行流程：条件运算符在执行时，首先对条件表达式进行求值，
        *               如果该值为true，则执行语句1，并返回执行结果
        *               如果该值为false，则执行语句2，并返回执行结果
        *       【注】:如果条件的表达式的求值结果是一个非波尔值，
        *                   会将其转换为波尔值然后再运算
        */
       true?alert("语句1"):alert("语句2");

       var a=10;
       var b=20;
       a>b?alert("a大"):alert("b大");

       var x=10;
       var y=20;
       var z=30;
       var max=x>y?x:y;
       max=max>z?max:z; 
                    //var max=a>b?(a>c?a:c):(b>c?b:c)  不推荐这么写，难阅读
       console.log("max="+max);
    </script>
</head>
<body>
    
</body>
</html>

七、运算符的优先级

代码示例如下:

<!DOCTYPE html>
<!--
 * @Author: KylinYang
 * @Description: 运算符的优先级
 * @Date: 2021-02-04 15:16:50
 * @LastEditTime: 2021-02-05 10:11:02
 * @FilePath: \undefinedd:\VSCode\JS\24js运算符的优先级.html
-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript">
        /*
        *  ,运算符  可分割多个语句，一般在声明多个变量时使用
        */
       var a,b,c;

       /*
       *就和数学中一样，在JS中运算符也有优先级
       *    先乘除，后加减
       * 优先级不清楚， 应使用（）括号
       */
    </script>
</head>
<body>
</body>
</html>

在这里插入图片描述

八、非波尔值的与或运算

代码示例如下：

<!DOCTYPE html>
<!--
 * @Author: KylinYang
 * @Description: 非波尔值的与或运算
 * @Date: 2021-02-03 10:48:28
 * @LastEditTime: 2021-02-04 10:45:49
 * @FilePath: \undefinedd:\VSCode\JS\18js非波尔值的与或运算.html
-->
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript">
        /*
         * && ||  非波尔值的情况
         *       -对于非波尔值进行与或运算时，会先将其转换为波尔值，然后再运算,并且返回原值 
         */


        /*
         *   &&与运算：
         *       -如果第一个值为true，则必然返回第二个值
         *       -如果第一个值为false，则直接返回第一个值
         *
         */

        //与运算：如果两个值都是true，则返回后边的值
        var result = 1 && 2; //true && true
        console.log(result); //2

        //与运算：如果两个值中有false，则返回靠前的false
        var a = NaN && 0; //false && false
        a = 0 && NaN;
        console.log(a);

        /*
         * || 或运算
         *       -如果第一个值为true，则直接返回第一个值
         *       -如果第一个值为false，则返回第二个值
         */

        //true || true
        //如果第一个值为true，则直接返回第一个值
        result = 2 || 1;
        result = 2 || 0;
        console.log(result);

        //如果第一个值为false，则直接返回第二个值
        result = NaN || 1;
        console.log(result);
    </script>
</head>
<body>
</body>
</html>

Kylin Yang

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
＜一起JS(基础篇)＞5.一元运算符、逻辑运算符、赋值运算符、关系运算符、相等运算符、条件运算符、运算符的优先级、非波尔值的与或运算

<一起JS(基础篇)>5.一元运算符、逻辑运算符、赋值运算符、关系运算符、非波尔值的与或运算一、一元运算符代码示例如下:<!DOCTYPE html><!-- * @Author: KylinYang * @Description: 一元运算符 * @Date: 2021-02-02 14:54:10 * @LastEditTime: 2021-02-02 15:04:31 * @FilePath: \undefinedd:\VSCode\JS\15js一元
复制链接

扫一扫

专栏目录