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=                                                           赋值、运算赋值

,                                                                 多重求值

上一篇:Java进程故障排查


下一篇:不可或缺 Windows Native (1) - C 语言: hello c