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