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=\"确认支付\" ο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() // 按钮单击事件处理函数，主要处理表达发送输出结算信息
{
// 在此添加发送数据到服务器的操作代码……
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=\"购买\" " // 生成购买按钮
+"οnclick=\"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= 赋值、运算赋值
， 多重求值
JavaScript表达式--掌握最全的表达式，一切尽在掌握中，让表达不再是难事相关推荐
- JavaScript的函数声明与函数表达式的区别
1)函数声明(Function Declaration); // 函数声明function funDeclaration(type){return type==="Declaration&q ...
- 【AE表达式】下载的模板表达式报错？大多数都是小问题！
今天要说的是一个很小的问题,新手可能经常遇到:你辛苦找到的模板,打开以后结果显示黄叹号"此项目包含表达式错误--",这时候不要慌不要乱,模板中的表达式报错通常都是非常简单的小问题. ...
- 【笔记】Java的运算符（赋值运算符号、一元运算符、算术运算符、关系运算符、自增与自减运算符、逻辑运算符、括号运算符、位运算符、三元（三目）运算符）、表达式与语句：简洁表达式
文章目录 一.运算符 1.赋值运算符号 2.一元运算符 3.算术运算符 4.关系运算符 5.自增与自减运算符 6.逻辑运算符 7.括号运算符 8.位运算符 左移位: 右移位: 9.三元(三目)运算符 ...
- 【Java】LeetCode 150. 逆波兰表达式求值 （后缀表达式）
题目: 根据 逆波兰表示法,求表达式的值. 有效的算符包括 +.-.*./ .每个运算对象可以是整数,也可以是另一个逆波兰表达式. 说明: 整数除法只保留整数部分. 给定逆波兰表达式总是有效的.换句话 ...
- 表达式树 php,Linux_LINQ学习笔记:表达式树，构建查询表达式
本节中, 我们 - phpStudy...
构建查询表达式 本节中, 我们假设我们拥有一个这样的实体类: 1: [Table] public partial class Product 2: 3: { 4: 5: [Column(IsPrima ...
- 前缀、中缀和后缀表达式详解，中缀表达式到后缀表达式的转换规则，以及后缀表达式的计算规则，附计算代码
1. 中缀.前缀和后缀表达式 1.1 中缀表达式 首先,中缀表达式的这个"缀"指运算符在两个操作数的位置.中缀表达式其实就是我们常用的算术表达式,比如 2 + 9 - (32 * ...
- matlab函数表达式里分号_C语言表达式和语句
一.表达式 在C语言中,常量.变量.函数调用以及按C语言语法规则用运算符把运算数连接起来的式子都是合法的表达式 . 最后一类可以理解为运算符和运算对象的组合.例如: 算术表达式 = 算术运算符 + 运 ...
- java1.8 lambda表达式_java1.8之Lambda表达式
行为参数化 为了应对多变的需求,难道我们就要因为客户每提出一个需求,我们就要写一个方法去实现吗? 显然这样做很冗余,而且维护性大大降低,这说明代码的设计不够好.好在已经有前人帮我们提出了行为参数化思想 ...
- 表达式_关系式_关系表达式_比较表达式
文章目录 表达式说明 比较表达式的结果 表达式说明 "关系表达式",简称"关系式","比较关系表达式",简称"比较关系式" ...
最新文章
- 模仿Hibernate的逆向工程_java版_源码下载
- 某电商平台开发记要——客服系统
- 【计算机网络】手动配置hosts文件解决使用GitHub和Coursera网站加载慢/卡的问题
- android中如何执行java命令
- Ubuntu18突然卡死解决方法
- 打开ISEIP核里面的datesheet失败，显示C：\Program Files (x86) internet explorer\iexplore.exe http:\\www.xilinx.com
- 记录：2018年CCF优秀博士学位论文奖信息
- STM32单片机实现连接USB摄像头
- 苹果 M1芯片运行Android模拟器
- button的setClickable 和 setEnabled 区别
- 谈谈我对华为HarmonyOS 2.0的看法
- Unity解析和读取文本—— txt 文件
- SOA 微服务 RPC WebService Soap关系详解
- 呵呵呵切克闹，Mysql优化来一套。
- Win11正式发布：支持安卓应用
- python内置函数有哪些_Python 中的内置函数(一)
- c语言的true、false
- osg3.0 集成 CEGUI 0.8.7
- 多线程MT和多线程MD的区别
- 已知日程表软件用户手册
热门文章
- 【错误记录】IntelliJ IDEA 中右键点击源码目录选择 New 选项 没有创建 Java Class 选项 ( 将对应的源码目录标记为 Sources 选项 )
- 【Java 并发编程】线程锁机制 ( 锁的四种状态 | 无锁状态 | 偏向锁 | 轻量级锁 | 重量级锁 | 锁竞争 | 锁升级 )
- 【C++ 语言】线程 ( 线程创建方法 | 线程标识符 | 线程属性 | 线程属性初始化 | 线程属性销毁 | 分离线程 | 线程调度策略 | 线程优先级 | 线程等待 )
- JVM 参数及各部分含义(转)
- 添加python虚拟环境
- Linux目录与文件常见处理命令
- ajax状态码--转他人的
- Sum All Primes
- 任务05—学习 MARKDOWN 语言
- CoreData多线程