本文详细介绍了JavaScript中的各类运算符，包括算术、比较、逻辑、位运算符等，并通过实例展示了它们的应用。此外，还解释了运算符的优先级及其如何影响表达式的计算。
- 一。JavaScript表达式：
算术表达式；
- 字符串表达式；
- 关系（比较）表达式；
- 逻辑表达式
- 二。JavaScript运算符：
-
●什么是表达式--表达式是产生一个结果值的式子，常量，变量，运算符。
●什么是操作数--操作数是指表达式中的常量与变量
●什么是运算符--表达式中起运算作用的符号，分多目与单目
- 根据处理对象的数目：单元运算符；
- 二元运算符；
- 三元运算符。
根据功能：赋值运算符；= += -= *= /= %=（取余）
算术运算符；+ - * / %（取余） ++（递增） --（递减） -
字符串运算符；+ +=
比较运算符；== != ===（值及类型） !==（值及类型） < <= > >= - 逻辑运算符：&& || !
逐位运算符；
特殊运算符。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>
<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运算符遍历数组
{
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= 赋值、运算赋值
， 多重求值
扫一扫
1682
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
