javascript
JavaScript表达式--掌握最全的表达式，一切尽在掌握中，让表达不再是难事
- 一。JavaScript表達式：
算術表達式；
- 二。JavaScript運算符：
-
●什么是表達式--表達式是產(chǎn)生一個結果值的式子，常量，變量，運算符。
●什么是操作數(shù)--操作數(shù)是指表達式中的常量與變量
●什么是運算符--表達式中起運算作用的符號，分多目與單目
- ???????????????????????????二元運算符；
- ???????????????????????????三元運算符。
根據(jù)功能：賦值運算符；= += -= *= /= %=（取余）
??????????????算術運算符；+ - * / %（取余） ++（遞增） --（遞減） -?
??????????????字符串運算符；+ +=
??????????????比較運算符；== != ===（值及類型） !==（值及類型） < <= > >= - ??????????????邏輯運算符：&& || !?
??????????????逐位運算符；
????????????? 特殊運算符。1、new運算符：創(chuàng)建對象（實例）格式：對象名稱=new 對象類型（參數(shù)）
???????????????????????????????2、this運算符：表示當前對象格式：this[.屬性]
???????????????????????????????3、條件運算符：三元運算符--格式：<條件表達式> ? 第一個值：第二個值 - 三.各種運算符詳解
- ●算術運算符簡介
? ★加法運算符
<script language="javascript">
<!--
?????? var departmentA = 1000;?????????????????????? // 部門A 1000人
?????? var departmentB = 375;???????????????????????? // 部分B 375人
?????? var total = departmentA + departmentB;??????????? // 公司總人數(shù)
?????? document.write( "公司總人數(shù)：" + total ); // 顯示總人數(shù)
-->
</script>
? ★減法運算符
<script language="javascript">
<!--
?????? var totalGas = "20升";?????????????????????????????????????????????? // 汽油總量
?????? var used = "7.5升";???????????????????????????????????????????? // 開出100公里后消耗
?????? var overplus = parseFloat( totalGas ) - parseFloat( used );????????????? // 剩余
?????? document.write( "車子已經(jīng)開了100公里，還剩汽油" + overplus + "升" );?? // 100公里時輸出提示
-->
</script>
? ★乘法運算符
<script language="javascript">
<!--
?????? var employee = 300;??????????????????????? // 雇員總數(shù)
?????? var prize = 370;??????????????????????? // 每人獎金數(shù)額
?????? var total = employee * prize;????????????????? // 預算總額
?????? alert( "預算：" + total + "元" );???????????? // 輸出總額
-->
</script>
? ★除法運算符
<script language="javascript">
<!--
?????? var total = 1000; ?????????????????????????????????? // 1000元
?????? var thieves = 3;??????????????????????????????? // 3個賊
?????? alert( "每人瓜分所得：" + total/thieves + "元" );????? // 輸出3人瓜分后所得數(shù)額
-->
</script>
? ★取模運算符
<script language="javascript">
<!--
?????? for( i = 1; i<1000; i++ )?????????????? // 找出0到1000中3的公倍數(shù)
?????? {
?????? ??? if( i%3 == 0 )????????????????????? // 當模3為0時即是3位數(shù)
?????? ??? {
?????? ??????? 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將發(fā)生類型轉換，轉換為同一種類型
??? {
??????? alert( "a等b，“==”使兩端的操作數(shù)發(fā)生了類型轉換" );
??? }
-->
</script>
??★等同運算符
<script language="javascript">
<!--
??? var a = "10";
??? var b = 10;
??? if ( a == b )?????? // a、b將發(fā)生類型轉換，轉換為同一種類型
??? {
??????? 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或不是數(shù)字，則清除文本框內(nèi)容并要求重輸
?????? ??? {
?????? ??????? alert( "您的輸入不正確，請重新輸入" );
?????? ??????? Text1.value = "";
?????? ? ??}
?????? ??? else????????????????????????????????????? // 輸入合法則統(tǒng)計總金額
?????? ??? {
?????? ??????? 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=\"確認支付\" οnclick="
??????????????????? + "\"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()?????????????????????????????????? // 按鈕單擊事件處理函數(shù)，主要處理表達發(fā)送輸出結算信息
??? {
??????? // 在此添加發(fā)送數(shù)據(jù)到服務器的操作代碼……
??????? document.write( "<li><font color=red>已經(jīng)完成支付</font>" );
??????? document.write( "您賬上余額：" + (actTotal-payTotal) + "元<br>" );
??? }
-->
</script>
??★小于或者等于運算符
??★大于或等于運算符
? ★in運算符
<script language="javascript">
<!--
?? var fruit = new Array( "梨", "3.5", "葡萄", "7", "香蕉", "2",? "蘋果", 3, "荔枝", 6 );?? // 水果數(shù)組
?? for ( index in fruit )?????? // 使用in運算符遍歷水果數(shù)組
?? {
??????? if( index%2 == 0 )????? // 如果索引為偶數(shù)即為水果名
??????? {
??????????? document.write( "<li>" + fruit[index] + "：");
??????? }
??????? else??????????????????? // 元素索引為奇數(shù)則為對應水果的價格
??????? {
??????????? document.write( fruit[index] + "元\t" );??????????????????????????????????????? // 輸出水果價格
??????????? document.write( "<input id=\"Button"+ index + "\" type=\"button\" value=\"購買\" "????? // 生成購買按鈕
??????????? +"οnclick=\"return Button1_onclick(this.serial-1)\" serial=\""+ index +"\" /><br>" );
??????? }
?? }
function Button1_onclick( arg ) // 購買按鈕的點擊事件處理漋數(shù)
{
??? alert("您即將購買：" + fruit[arg] );??? // 根據(jù)按鈕序列號判斷客戶要購買的水果
}
-->
</script>
-
?★instanceof運算符
●字符串運算符簡介
●賦值運算符
●邏輯運算符簡介?
??★邏輯與運算符
<html>
<head>
<title></title>
</head>
<body>
<script language="javascript">
<!--
function Button1_onclick()
{
??? var isRegistered = true;??????????? // 注冊用戶
??? var level = 3;????????????????????? // 級數(shù)為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;????????????????? ??????? // 目前車道開放的狀態(tài)
??? if ( (currentState & 85) == 85 )???????????? // 測試第1、3、5、7位是否為1
??? {
??????? alert( "已經(jīng)開通1、3、5、7車道" );
??? }
??? else?????????????????????????????????? ??????????????? // 其中至少有一位不為1
??? {
??????? alert( "1、3、5、7車道目前處于關閉狀態(tài)" );
??? }
}
-->
</script>
??? <input id="Button1" type="button" value="查看1、3、5、7道是否已經(jīng)通車" 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 = "正數(shù)取反：";
??? for( i = 0; i<50; i++ )???????????????????????? // 連續(xù)對0到49進行位取反，并逐一添加輸出字符串
??? {
??????? msg += i + "=>" + (~i) + " ";
??? }
??? msg += "\n負數(shù)取反：";
??? for( i = -50; i<0; i++ )??????????????????????? // 連續(xù)對-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(表達式);
? ★對象屬性存取運算符
??★數(shù)組存取運算符
<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>" ); //使用“[]”運算符讀取數(shù)組元素的內(nèi)容????????????????????????????????????????
?? }
-->
</script>
</body>
</html>
??★delete運算符
<html>
<head>
<title></title>
</head>
<body>
<script language="javascript">
<!--
? var student = new Object();?????? // 創(chuàng)建一個對象表示學生
? 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>
? ★逗號運算符
? ★函數(shù)調(diào)用運算符
???? 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類的構造函數(shù)
??? {
??????? this.name = _name;
??????? this.age = _age;
??? }
??? var stu1 = new Student( "Tom", 20 );??? // 創(chuàng)建兩個學生類實例
??? var stu2 = new Student( "Lily", 21 );
??? showStudentInfo.call( stu1 );?????????? // 分別以stu1、stu2作為上下文調(diào)用showStudentInfo函數(shù)
??? showStudentInfo.call( stu2 );
-->
</script>
</body>
</html>
? ★this運算符
??★掌握運算符的優(yōu)先級
<script language="javascript">
?????? var result1 = 1+2/5-0.1*5;????????????????????? // 默認優(yōu)先級順序
?????? var result2 = ((1+2)/5-0.1)*5;??????????????????????? // 小括號改變優(yōu)先級
?????? document.write("<b>運行符優(yōu)先級</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>
?
??? <textarea id="TextArea1" style="width: 331px; height: 211px"></textarea> <br />
??? 密鑰：
??? <input id="Password1" type="password" />
??? <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運算符遍歷數(shù)組
??? {
??????? for( m in students )????????????????????????????? ??????????????? // 逐一比較?????????????????????????????????????????????
??????? {
??????????? if( students[n] < students[m] )?????????????????? ??????????? // 使用“<”運算會進行升序比較
??????????? {
???????????? ???var temp = students[n];????????????????????? ??????????? // 交換數(shù)組元素內(nèi)容
??????????????? students[n] = students[m];
??????????????? students[m] = temp;
??????????? }
??????? }
??? }
??? document.write( "<br>" );?????????????????????????????????? ??????????????? // 輸出換行
??? document.write( "排序后：" + students );??????????????? ??????? // 輸出排序后的名字序列
-->
</script>
</body>
</html>
- 四。運算符執(zhí)行的優(yōu)先順序：
類型 運算符 括號 () 一元 ! ~ - ++ -- typeof void delete 算術 * / + - 位位移 << >> >>> 比較 < <= > >= == != 位邏輯 & ^（xor） | 邏輯 && || 三元條件 ? 賦值 = += -= *= /= %= <<= >>= >>>= &= ^= |=
?
?運算符????????????????????????????????????????????????????????????描述
. [] ()?????????????????????????????????????????????????????????????字段訪問、數(shù)組下標、函數(shù)調(diào)用以及表達式分組
++ -- - ~ ! delete new typeof void??????????????????? 一元運算符、返回數(shù)據(jù)類型、對象創(chuàng)建、未定義值
* / %???????????? ??????????????????????????????????????????????? 乘法、除法、取模
+ - +?????????????????????????????????????????????????????????????加法、減法、字符串連接
<< >> >>>??????????????????????????????????????????????????? 移位
< <= > >= instanceof?????????????????????????????????????小于、小于等于、大于、大于等于、instanceof
== != === !==??????????????????????????????????????????????等于、不等于、嚴格相等、非嚴格相等
&?????????????????????????????????????????????????????????????????? 按位與
^????????????????????????????????????????????????????????????????? 按位異或
|???????????????????????????????????????????????????????????????????按位或
&&??????????????????????????????????????????????????????????????? 邏輯與
||?????????????????????????????????????????????????????????????????邏輯或
?:???????????????????????????????????????????????????????????????? 條件
= oP=?????????????????????????????????????????????????????????? 賦值、運算賦值
，?????????????????????????????????????????????????????????????????多重求值
總結
以上是生活随笔為你收集整理的JavaScript表达式--掌握最全的表达式，一切尽在掌握中，让表达不再是难事的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Javascript 强制类型转换函数
- 下一篇： JavaScript的数据类型---最全