JavaScript表达式--掌握最全的表达式，一切尽在掌握中，让表达不再是难事

• 一。JavaScript表达式：

算术表达式；

1. 字符串表达式；
2. 关系（比较）表达式；
3. 逻辑表达式

• 二。JavaScript运算符：

• ●什么是表达式--表达式是产生一个结果值的式子，常量，变量，运算符。

  ●什么是操作数--操作数是指表达式中的常量与变量

  ●什么是运算符--表达式中起运算作用的符号，分多目与单目

1. 根据处理对象的数目：单元运算符；
•                            二元运算符；
•                            三元运算符。
  根据功能：赋值运算符；=　　+=　　-=　　*=　　/=　　%=（取余）
                算术运算符；+　　-　　*　　/　　%（取余）　　++（递增）　　--（递减）　- 
                字符串运算符；+　　+=
                比较运算符；==　　!=　　===（值及类型）　　!==（值及类型） <　　<=　　>　　>=
•               逻辑运算符：&&　　||　　! 
                逐位运算符；
                特殊运算符。1、new运算符：创建对象（实例）格式：对象名称=new 对象类型（参数）
                                 2、this运算符：表示当前对象格式：this[.属性]
                                 3、条件运算符：三元运算符--格式：<条件表达式> ? 第一个值：第二个值
• 三.各种运算符详解
• ●算术运算符简介

    ★加法运算符

  <script language="javascript">

  <!--

         var departmentA = 1000;                       // 部门A 1000人

         var departmentB = 375;                         // 部分B 375人

         var total = departmentA + departmentB;            // 公司总人数

         document.write( "公司总人数：" + total ); // 显示总人数

  -->

  </script>

    ★减法运算符

  <script language="javascript">

  <!--

         var totalGas = "20升";                                               // 汽油总量

         var used = "7.5升";                                             // 开出100公里后消耗

         var overplus = parseFloat( totalGas ) - parseFloat( used );              // 剩余

         document.write( "车子已经开了100公里，还剩汽油" + overplus + "升" );   // 100公里时输出提示

  -->

  </script>

    ★乘法运算符

  <script language="javascript">

  <!--

         var employee = 300;                        // 雇员总数

         var prize = 370;                        // 每人奖金数额

         var total = employee * prize;                  // 预算总额

         alert( "预算：" + total + "元" );             // 输出总额

  -->

  </script>

    ★除法运算符

  <script language="javascript">

  <!--

         var total = 1000;                                    // 1000元

         var thieves = 3;                                // 3个贼

         alert( "每人瓜分所得：" + total/thieves + "元" );      // 输出3人瓜分后所得数额

  -->

  </script>

    ★取模运算符

  <script language="javascript">

  <!--

         for( i = 1; i<1000; i++ )               // 找出0到1000中3的公倍数

         {

             if( i%3 == 0 )                      // 当模3为0时即是3位数

             {

                 document.write( i + " " );      // 输出

             }

         }

  -->

  </script>

    ★负号运算符

  <script language="javascript">

  <!--

         var a = -1;

         var b = -a;

         alert( a + "取反后得：" + b );

  -->

  </script>

    ★正号运算符

  <script language="javascript">

  <!--

         var a = -1;

         // 变量b、c使用正号运算符

         var b = +a;

         var c = +5;

         alert(  "a、b和c的值分别为：" + a + "、" + b + "和" + c );

  -->

  </script>

    ★递增运算符

  <script language="javascript">

  <!--

         var a = 10;

         document.write( "<li>a的初始值为：" + a );

         if( ++a == 11 ) // ++左结合，此时if测试条件成立

         {

             document.write( "<li>左结合，先递增再使用。" );

         }

         if( a++ == 12 ) // ++右结合，此时if测试条件不成立

         {

             document.write( "<li>右结合，先递增再使用。" );

         }

         else

         {

             document.write( "<li>右结合，先使用再递增。" );

         }

  -->

  </script>

    ★递减运算符

  <script language="javascript">

  <!--

      var a = 5;

      document.write( a );  // 输出a原来的值

      document.write( "<br>" );

      a-- ;                     // a自减一（右结合）

      document.write( a );

      document.write( "<br>" );

      --a;               // a自减一（左结合）

      document.write( a );

      document.write( "<br>" );

      if( --a == 2 )              // 测试左、右结合位于表达式中的情况

      {

          document.write( "<li>左结合的情形" );

      }

       if( a-- == 2 )

      {

          document.write( "<li>右结合的情形" );

      }

  -->

  </script>

  ●关系运算符

    ★相等运算符

  <script language="javascript">

  <!--

      var a = "10";

      var b = 10;

      if ( a == b ) // a、b将发生类型转换，转换为同一种类型

      {

          alert( "a等b，“==”使两端的操作数发生了类型转换" );

      }

  -->

  </script>

    ★等同运算符

  <script language="javascript">

  <!--

      var a = "10";

      var b = 10;

      if ( a == b )       // a、b将发生类型转换，转换为同一种类型

      {

          document.write( "<li>在非严格意义上，a等于b" );

      }

      if( a === b )       // 等同运算符判断a、b的相等性，此返回false

      {

           document.write( "<li>a严格等于b" );

      }

      else

      {

          document.write( "<li>在严格意义上，a不等于b" );

      }

  -->

  </script>

    ★不等运算符

  <script language="javascript">

  <!--

         var students = new Array( "杨宗楠", "杨玉婷", "李莉" );

         for( index in students )

         {

             if( students[index] != "杨宗楠" ) //不是“杨宗楠”就输出为黑色字体

             {

                 document.write( "<li>" + students[index] )

             }

             else                                            // 是杨宗楠输出为红色字体

             {

                 document.write( "<li><font color=red>" + students[index] + "</font>" );

             }

         }

  -->

  </script>

    ★不等同运算符

    ★小于运算符

  <html>

  <head>

  <title>范例4-16</title>

  </head>

         <body>

         <!--配置一个文件输入框和一个按钮，与用户交互用-->

         <li>50点点卡单价为4.5元，您确定购买

         <input id="Text1" style="width: 31px; height: 18px" type="text" />张。

         <input id="Button1" type="button" value="确定支付" onClick="return Button1_onclick()" />

         (最多不能超过5张)

         <script language="javascript">

         <!--

         function Button1_onclick()                     // 按钮单击事件处理程序

         {

             if( (Text1.value < 1) || isNaN(Text1.value) )   // 输入小于0或不是数字，则清除文本框内容并要求重输

             {

                 alert( "您的输入不正确，请重新输入" );

                 Text1.value = "";

             }

             else                                      // 输入合法则统计总金额

             {

                 alert( "您的应当支付：" + Text1.value * 4.5 + "元" );

             }

         }

         -->

         </script>

         </body>

   

  </html>

   ★大于运算符

  <script language="javascript">

  <!--

      var actTotal = 109.7;                                       // 账单总额

      var payTotal = 123.45;                                      // 当前应该付的款额

      document.write( "<li>您账上余额：" + actTotal + "元<br>" ); // 输出账面信息

      document.write( "<li>您需要支付：" + payTotal + "元<br>" );

      document.write( "<input id=\"BtnPay\" type=\"button\" value=\"确认支付\" onclick="

                      + "\"return BtnPay_onclick()\" style=\"width: 150px\" /><br>" ); // 生成“确认支付”按钮

      if( payTotal > actTotal )                                   // 如果余额不足，支付按钮设置为失效

      {

          document.write(  "信息：<font color=red>您的余额不足，无法完成支付！</font>" );

          BtnPay.disabled = true;

      }

      else                                                        // 余额够用于支付，则启用按钮

      {

          BtnPay.disabled = false;

      }

      function BtnPay_onclick()                                   // 按钮单击事件处理函数，主要处理表达发送输出结算信息

      {

          // 在此添加发送数据到服务器的操作代码……

          document.write( "<li><font color=red>已经完成支付</font>" );

          document.write( "您账上余额：" + (actTotal-payTotal) + "元<br>" );

      }

  -->

  </script>

    ★小于或者等于运算符

    ★大于或等于运算符

    ★in运算符

  <script language="javascript">

  <!--

     var fruit = new Array( "梨", "3.5", "葡萄", "7", "香蕉", "2",  "苹果", 3, "荔枝", 6 );   // 水果数组

     for ( index in fruit )       // 使用in运算符遍历水果数组

     {

          if( index%2 == 0 )      // 如果索引为偶数即为水果名

          {

              document.write( "<li>" + fruit[index] + "：");

          }

          else                    // 元素索引为奇数则为对应水果的价格

          {

              document.write( fruit[index] + "元\t" );                                        // 输出水果价格

              document.write( "<input id=\"Button"+ index + "\" type=\"button\" value=\"购买\" "      // 生成购买按钮

              +"onclick=\"return Button1_onclick(this.serial-1)\" serial=\""+ index +"\" /><br>" );

          }

     }

  function Button1_onclick( arg ) // 购买按钮的点击事件处理漋数

  {

      alert("您即将购买：" + fruit[arg] );    // 根据按钮序列号判断客户要购买的水果

  }

  -->

  </script>

•  ★instanceof运算符

  ●字符串运算符简介

  ●赋值运算符

  ●逻辑运算符简介 

    ★逻辑与运算符

  <html>

  <head>

  <title></title>

  </head>

  <body>

  <script language="javascript">

  <!--

  function Button1_onclick()

  {

      var isRegistered = true;            // 注册用户

      var level = 3;                      // 级数为3

      var blance = 25;                    // 账户余额

      if( isRegistered && ( level >= 2 ) && ( blance >= 30 ) )  // 必须是注册用户、等级大于等于2、余额大于30

      {

          alert( "您可以下载本资源" );    // 当前用户条件都满足时

      }

      else

      {

          alert( "您不能下载本资源" );    // 至少有一个条件不满足时

      }

  }

  -->

  </script>

      点击下载本影片

      <input id="Button1" type="button" value="下载" onClick="return Button1_onclick()" />

  </body>

  </html>

    ★逻辑或运算符

    ★逻辑非运算符

  ●位运算符

    ★位运算符

  <body>

  <script language="javascript">

  <!--

  function Button1_onclick()

  {

      var currentState = 215;                          // 目前车道开放的状态

      if ( (currentState & 85) == 85 )             // 测试第1、3、5、7位是否为1

      {

          alert( "已经开通1、3、5、7车道" );

      }

      else                                                   // 其中至少有一位不为1

      {

          alert( "1、3、5、7车道目前处于关闭状态" );

      }

  }

  -->

  </script>

      <input id="Button1" type="button" value="查看1、3、5、7道是否已经通车" onClick="return Button1_onclick()" />

  </body>

    ★位或运算符

    ★位异或运算符

  <html>

  <head>

  <title></title>

  </head>

  <body>

  <script language="javascript">

  <!--

      var user = "foxun";                                         // 用户名

      var password = 123456;                                      // 密码，需要对其加密

      var key = 666666;                                           // 加密密钥

      var codedpassword = password ^ key;                         // 将明文密码123456加密

      alert( "加密后的密码：" + codedpassword );                  // 输出加密后的密

      codedpassword ^= key;                                       // 将加密后的密码解密

      alert( "解密后的密码：" + codedpassword );                  // 输出解密后的密码

  -->

  </script>

  </body>

  </html>

    ★位非运算符

  <html>

  <head>

  <title></title>

  </head>

  <body>

  <script language="javascript">

  <!--

      var msg = "正数取反：";

      for( i = 0; i<50; i++ )                         // 连续对0到49进行位取反，并逐一添加输出字符串

      {

          msg += i + "=>" + (~i) + " ";

      }

      msg += "\n负数取反：";

      for( i = -50; i<0; i++ )                        // 连续对-50到-1进行位取反，并逐一添加到输出字符串

      {

          msg += i + "=>" + (~i) + " ";

      }

      msg += "\n布尔值取反：";

      var b1 = true;                                  // 对布尔值true和false按位取反，并添加到输出字符串

      msg += b1 + "=>" + (~b1) + " ";

      var b2 = false;

      msg += b2 + "=>" + (~b2) + " ";

      msg += "\n字符串取反：";

      var name = "Bob";                               // 对布尔值字符串按位取反，并添加到输出字符串

      msg += "\"" + name + "\"" + "=>" + (~name) + " ";

      alert( msg );                                   // 输出

  -->

  </script>

  </body>

  </html>

    ★左移运算符

    ★带符号右移运算符

    ★高位补0右移运算符

  ●其他运算符

    ★条件运算符

    ★new运算符

    ★void运算符

    ★类型检测运算符--typeof(表达式);

    ★对象属性存取运算符

    ★数组存取运算符

  <html>

  <head>

  <title></title>

  </head>

  <body>

  <script language="javascript">

  <!--

     var nameList = new Array( "Tom", "Lisley", "Petter", "ZongNanYang", "Lily", "Jackson" ); // 名单

     for( index in nameList )                                                                 // 遍历名单

     {

          document.write( nameList[index] + "<br>" ); //使用“[]”运算符读取数组元素的内容                                        

     }

  -->

  </script>

  </body>

  </html>

    ★delete运算符

  <html>

  <head>

  <title></title>

  </head>

  <body>

  <script language="javascript">

  <!--

    var student = new Object();       // 创建一个对象表示学生

    student.name = "Tom";             // 为学生对象添加“名字”属性

    student.age = 20;                 // 添加“年龄”属性

    student.sex = "男";               // 添加性别属性

    document.write( "<li>" + student["name"] + "：" + student["sex"] + " " + student["age"] );    // 输出学生的三个属性

    delete student.age;                                                                           // 删除学生的“年龄”属性

    document.write( "<br>删除了age属性<br><li>" + student["name"] + "：" + student["sex"] + " " + student["age"] );   // 再次输出全部属性作对比

  -->

  </script>

  </body>

  </html>

    ★逗号运算符

    ★函数调用运算符

       call([thisObj,[arg1,[arg2,[argn,[…]]]]])

  <html>

  <head>

  <title></title>

  </head>

  <body>

  <script language="javascript">

  <!--

      function showStudentInfo()

      {

          // 输出this指针指向的对象的name、age成员

          document.write( "<li>" + this.name + " " + this.age + "<br>" );

      }

      function Student( _name, _age )         // 定义Student类的构造函数

      {

          this.name = _name;

          this.age = _age;

      }

      var stu1 = new Student( "Tom", 20 );    // 创建两个学生类实例

      var stu2 = new Student( "Lily", 21 );

      showStudentInfo.call( stu1 );           // 分别以stu1、stu2作为上下文调用showStudentInfo函数

      showStudentInfo.call( stu2 );

  -->

  </script>

  </body>

  </html>

    ★this运算符

    ★掌握运算符的优先级

  <script language="javascript">

         var result1 = 1+2/5-0.1*5;                      // 默认优先级顺序

         var result2 = ((1+2)/5-0.1)*5;                        // 小括号改变优先级

         document.write("<b>运行符优先级</b>");                     // 输出标题

         document.write("<li>1+2/5-0.1*5=" + result1 );        // 输出表达式1的结果

         document.write("<li>((1+2)/5-0.1)*5=" + result2 );   // 输出表达式2的结果

  </script>

  示例--信息加密

• <html>

  <head>

  <title></title>

  </head>

  <body>

  <script language="javascript">

  <!--

  var msgCoded;

  var msgEncoded;

  function CodeAndEncode( pkey, date )

  {

      var codedStr = "";

      for( i = 0; i<date.length; i++ )

      {

                var dateCoded;

                for( j = 0; j<pkey.length; j++ )

                {

                       var keyCoded = pkey.charCodeAt( j );

                       var dateCoded = date.charCodeAt(i) ^ keyCoded;

                }

          codedStr += String.fromCharCode( dateCoded );

      }

         return codedStr;

  }

  function BtnCode_onclick()

  {

      var date = TextArea1.value;

      var key = Password1.value;

      msgCoded = CodeAndEncode( key, date );

      TextArea1.value = msgCoded;

  }

  function BtnEncode_onclick()

  {

       var date = TextArea1.value;

       var key = Password1.value;

       msgEncoded = CodeAndEncode( key, date );

       TextArea1.value = msgEncoded;

  }

   

  -->

  </script>

   

      &nbsp;<textarea id="TextArea1" style="width: 331px; height: 211px"></textarea>&nbsp;<br />

      密钥：&nbsp;

      <input id="Password1" type="password" />&nbsp;

      <input id="BtnCode" type="button" value="加密" onClick="return BtnCode_onclick()" style="width: 57px" />

      <input id="BtnEncode" style="width: 55px" type="button" value="解密" onClick="return BtnEncode_onclick()" />

  </body>

  </html>

  示例--排序

  <html>

  <head>

  <title>范例4-0</title>

  </head>

  <body>

  <script language="javascript">

  <!--

      var students = new Array( "Tom", "Petter", "Jim", "Lily" );    // 学生名字

      document.write( "排序前：" + students );                        // 输出排序前的名字序列

      for( n in students )                                                    // 在for语句中使用in运算符遍历数组

      {

          for( m in students )                                              // 逐一比较                                             

          {

              if( students[n] < students[m] )                               // 使用“<”运算会进行升序比较

              {

                  var temp = students[n];                                  // 交换数组元素内容

                  students[n] = students[m];

                  students[m] = temp;

              }

          }

      }

      document.write( "<br>" );                                                   // 输出换行

      document.write( "排序后：" + students );                        // 输出排序后的名字序列

  -->

  </script>

  </body>

  </html>

• 四。运算符执行的优先顺序：
  
  

  类型	运算符
  括号	()
  一元	! ~ - ++ -- typeof void delete
  算术	* / + -
  位位移	<< >> >>>
  比较	< <= > >= == !=
  位逻辑	& ^（xor） |
  逻辑	&& ||
  三元条件	?
  赋值	= += -= *= /= %= <<= >>= >>>= &= ^= |=

 

 运算符                                                            描述

. [] ()                                                             字段访问、数组下标、函数调用以及表达式分组

++ -- - ~ ! delete new typeof void                    一元运算符、返回数据类型、对象创建、未定义值

* / %                                                             乘法、除法、取模

+ - +                                                             加法、减法、字符串连接

<< >> >>>                                                    移位

< <= > >= instanceof                                     小于、小于等于、大于、大于等于、instanceof

== != === !==                                              等于、不等于、严格相等、非严格相等

&                                                                   按位与

^                                                                  按位异或

|                                                                   按位或

&&                                                                逻辑与

||                                                                 逻辑或

?:                                                                 条件

= oP=                                                           赋值、运算赋值

，                                                                 多重求值