• 【JavaScript运算符与表达式】


    一、表达式

    1.原始表达式:2.14,“test”,true/false,null……复合表达式:10*20……

    2.数组、对象的初始化表达式:new Array(1,2),[1,undefined,4],{x:1,y:2}=>var o = new Object();o.x=1;o.y=2;……

    3.函数表达式:var fe = function(){}; (function(){console.log('hello');})()……

    4.属性访问表达式:var o = {x:1}; o.x; o['x'];……

    5.调用表达式:func()……

    6.对象创建表达式:new Func(1,2); new Object()……

    二、运算符

    1、算术运算符

      运算符 = 用于给 JavaScript 变量赋值。

      算术运算符 + 用于把值加起来。

    运算符 + - * / % ++ --
    描述 加法 减法 乘法 除法 取模(余数) 自增 自减

    例子:

     1 <!DOCTYPE html>
     2 <html>
     3     <head>
     4         <meta charset="UTF-8">
     5         <title></title>
     6         
     7         <script type="text/javascript">
     8         //算术运算符
     9         var a=2,b=5;
    10         document.write(a+b+"=7"+"<br />");
    11         document.write(a-b+"=-3"+"<br />");
    12         document.write(a*b+"=10"+"<br />");
    13         document.write(a/b+"=0.4"+"<br />");
    14         document.write(a%b+"=2"+"<br />");
    15         document.write(a%-b+"=2"+"<br />");
    16         document.write(-a%-b+"=-2"+"<br />");
    17         document.write(-b%-a+"=-1"+"<br />");
    18         //+还有连接的意思
    19         document.write(a+'2b'+"=22b"+"<br />");
    20         document.write(a+b+'2b'+"=72b"+"<br />");
    21         document.write('3'+'8'+"=38"+"<br />");
    22         document.write(a+b*'2sb'+"=NaN"+"<br />");//只有加号可以连接
    23         //自增自减运算符(整型,浮点型,null支持、字符串不支持)
    24         var z=2;
    25         //alert(h++);   //2
    26         //alert(h);     //3
    27         //alert(++h);   //4
    28         //alert(--h);   //3
    29         x=3.123;
    30         //alert(--x);  //2.123
    31         //alert(++x);  //3.123
    32         n=null;
    33         //alert(++n);   //1
    34         //alert(--n);   //0
    35         s=undefined;
    36         //alert(++s);    //NaN
    37         m='3b';
    38         //alert(++m);  //NaN
    39         alert(--m);    //NaN  
    40         </script>
    41     </head>
    42     <body>
    43     </body>
    44 </html>

    2、逻辑运算符

    运算符 && || !
    描述 逻辑与(and) 逻辑或(or) 逻辑非,取逻辑的反面

    注意:这里会出现短路问题

    表达式a && 表达式b :  计算表达式a(也可以是函数)的运算结果,

                                             如果为 True, 执行表达式b(或函数),并返回b的结果;

                                             如果为 False,返回a的结果;

     简单的说就是 逻辑与运算符属于短路操作,如果有第一个操作数返回的是false,第二个不管是true还是false都返回false。

    表达式a || 表达式b :   计算表达式a(也可以是函数)的运算结果,

                                             如果为 Fasle, 执行表达式b(或函数),并返回b的结果;

                                             如果为 True,返回a的结果;

    简单的说就是 逻辑或运算符也属于短路操作,如果有第一个操作数返回的是true,第二个不管是true还是false都返回true。

     1 <!DOCTYPE html>
     2 <html>
     3     <head>
     4         <meta charset="utf-8">
     5         <title></title>
     6     </head>
     7     <body>
     8         <script type="text/javascript">
     9             //逻辑运算符的例子
    10             //要求两个表达式为true,结果才是true
    11 //            alert(true && true);
    12 //            alert(true && false);
    13 //            alert(false && true);
    14 //            alert(false && false);
    15             //如果第一个表达式为false,整个结果为false,就把第二个表达式短路了
    16             var i=0,j=1;
    17             if(i-- && j++){                        //0->false && 
    18                 document.write('hello');
    19             }else{
    20                 document.write('world');
    21             }
    22             //alert(i);  //-1
    23             //alert(j);    //1
    24             //逻辑或|| 
    25             //两个表达中有一个为true,整个结果为true
    26 //            alert(true || true);
    27 //            alert(true || false);
    28 //            alert(false || true);
    29 //            alert(false || false);
    30             //如果第一个表达式为true,整个结果为true,把第二个表达式短路了
    31             i=1;
    32             j=0;
    33             if(i-- || ++j){
    34                 document.write('aa');
    35             }else{
    36                 document.write('bb');
    37             }
    38 //            alert(i);        //0
    39 
    40 //            alert(j);        //0
    41         //逻辑非 !,取反的作用
    42 //        alert(!true);
    43 //        alert(!false);
    44         </script>
    45     </body>
    46 </html>

    3、三元运算符

    (expr1) ? (expr2) : (expr3)

    语法解释:在 expr1 求值为 TRUE 时整个表达式的值为 expr2,否则为 expr3。

     1 <!DOCTYPE html>
     2 <html>
     3     <head>
     4         <meta charset="utf-8">
     5         <title></title>
     6     </head>
     7     <body>
     8         <script type="text/javascript">
     9             /*
    10              三元运算符的例子
    11              if(exp){
    12                  exp为true的代码段;
    13              }else{
    14                  exp为false的代码段;
    15              }
    16              exp1?exp2:exp3;
    17              */
    18             if(3>1){
    19                 document.write('aa');
    20             }else{
    21                 document.write('bb');
    22             }
    23             document.write('<br/>');
    24             var res=3>1?'aa':'bb';
    25             document.write(res);
    26             document.write('<br/>');
    27             var x=0/0;
    28             var x=123;
    29             res=isNaN(x)?0:x;
    30             alert(res);
    31         </script>
    32         
    33     </body>
    34 </html>

    4、比较运算符

    运算符 描述 例子 运算结果
    == 等于 2 == 3 FALSE
    === 恒等于(值和类型都要做比较) 2 === 2
    2 === "2"
    TRUE
    FALSE
    != 不等于,也可写作<> 2 == 3 TRUE
    > 大于 2 > 3 FALSE
    < 小于 2 < 3 TRUE
    >= 大于等于 2 >=3 FALSE
    <= 小于等于 2 <= 3 TRUE

     

     

     

     

     

     

     

     

     

    //            比较运算符的例子
    //            alert(3>1);
    //            alert(3>=1);
    //            alert(3<=12);
    //            alert(3<2);
                  var res=1==true;
                  res=1=='1';
                  res=3=='3king';
                  res=0==null;//false 
                  res=0!=null;
                  res=1===true;
                  res=1===true;  //true //false
    //            alert(res);
    //            alert(NaN==NaN);//false
                  alert(undefined==undefined);    

    4、连接符

    连接运算符 + 主要用于连接两个字符串或字符串变量。因此,在对字符串或字符串变量使用该运算符时,并不是对它们做加法计算。

    1             //字符串连接符+
    2             document.write('hello'+' yimentu '+'<br/>');
    3             document.write(1+'king'+'<br/>');
    4             var i=1,j=2,z=3;
    5             document.write(''+i+j+z);
    6             document.write('<br/>');
    7             

    5、赋值运算符

    赋值运算符 = 用于赋值运算,赋值运算符的作用在于把右边的值赋值给左边变量。

     1             //赋值运算符的例子
     2             var username='king';
     3             document.write('用户名为:'+username+'<br/>');
     4             //+= -= *= /= %= .=
     5             var a=1;
     6             a+=3;//a=a+3;
     7                        //alert(a);
     8             a-=6;//-2
     9             a*=8;//-16
    10             (a/=4);  //-4
    11             a%=9;//a=a%9
    12             //document.write(a);
    13             document.write('<br/>');
    14             var str1=' hello ',str2=' world ';
    15             str2+=str1;//str2=str2+str1;
    16             //document.write(str2);
  • 相关阅读:
    C++11新特性
    Qt操作xml
    指针和引用的区别
    QT软件主题切换
    常见的临时变量的生成场景
    QQuickWidget+QML设置背景透明
    idea maven Could not transfer artifact
    Java项目启动时执行指定方法的几种方式
    解决bootstrap-table在切换分页后再次查询报错404问题
    bootstrap:表单必填项*标识,及提交前校验
  • 原文地址:https://www.cnblogs.com/zxnn/p/8215592.html
Copyright © 2020-2023  润新知