JavaScript运算符分别为:
赋值运算符、算术运算符、字符串运算符、逻辑运算符、关系运算符、位运算符,其中赋值运算符和算法运算符结合到一起组成复合运算符。
1.赋值运算符
赋值运算符只有一个:即 “=” 。用于表示赋值的含义。例如语句 c=a+b 表示将“a+b”的值赋给c,而不是c等于a+b,要和数学中的等式概念区分开。
2.算术运算符
算术运算符有多个,分别为:+、-、*、/、%、++、-- ,以下分别对每种运算法举例讲解:
(1)“+” 表示 “加” 。例如a=1+2,将1和2的和赋给变量a,“+”也可作字符串的连接符,具体在下方“字符串运算符”中讲解。
实例 z=x+y:
<html>
<head>
<title>测试网页</title>
</head>
<body>
<p>令x=3,y=2,求z=x+y的值。</p>
<button onclick="myFunction()">点击计算z=x+y的值</button>
<p id="demo"></p>
<script>/* 定义JavaScript 函数求z的值 */
function myFunction(){
var x=3;//定义x
var y=2;//定义y
var z;//定义z
z=x+y;//计算x+y的值赋给z
document.write("z=" + z );//输出z的值
}
</script>
</body>
</html>
(2)“-” 表示 “减” 。例如a=2-1,将2减1的值赋给变量a。
实例 z=x-y:
<html>
<head>
<title>测试网页</title>
</head>
<body>
<p>令x=3,y=2,求z=x-y的值。</p>
<button onclick="myFunction()">点击计算z=x-y的值</button>
<p id="demo"></p>
<script>/* 定义JavaScript 函数求z的值 */
function myFunction(){
var x=3;//定义x
var y=2;//定义y
var z;//定义z
z=x-y;//计算x-y的值赋给z
document.write("z=" + z );//输出z的值
}
</script>
</body>
</html>
(3)“ * ” 表示 “乘” 。例如a=2*1,将2乘1的值赋给变量a。
实例 z=x*y:
<html>
<head>
<title>测试网页</title>
</head>
<body>
<p>令x=3,y=2,求z=x*y的值。</p>
<button onclick="myFunction()">点击计算z=x*y的值</button>
<p id="demo"></p>
<script>/* 定义JavaScript 函数求z的值 */
function myFunction(){
var x=3;//定义x
var y=2;//定义y
var z;//定义z
z=x*y;//计算x*y的值赋给z
document.write("z=" + z );//输出z的值
}
</script>
</body>
</html>
(4)“ / ” 表示 “除” 。例如a=2/1,将2除1的值赋给变量a。
实例 z=x/y:
<html>
<head>
<title>测试网页</title>
</head>
<body>
<p>令x=3,y=2,求z=x/y的值。</p>
<button onclick="myFunction()">点击计算z=x/y的值</button>
<p id="demo"></p>
<script>/* 定义JavaScript 函数求z的值 */
function myFunction(){
var x=3;//定义x
var y=2;//定义y
var z;//定义z
z=x/y;//计算x/y的值赋给z
document.write("z=" + z );//输出z的值
}
</script>
</body>
</html>
(5)“ % ” 表示 “取余” 。“取余”即取两个数相除后得到的“余数”。例如a=2%1,将2取余1的值赋给变量a。
实例 z=x%y:
<html>
<head>
<title>测试网页</title>
</head>
<body>
<p>令x=3,y=2,求z=x%y的值。</p>
<button onclick="myFunction()">点击计算z=x%y的值</button>
<p id="demo"></p>
<script>/* 定义JavaScript 函数求z的值 */
function myFunction(){
var x=3;//定义x
var y=2;//定义y
var z;//定义z
z=x%y;//计算x%y的值赋给z
document.write("z=" + z );//输出z的值
}
</script>
</body>
</html>
(6)“ ++ ” 表示 “自增” 。“自增”即指定的变量在原有数值的基础上数值每次加1。共有两种形式:
第1种:“++”在后面。例如a++,表示变量a每次在原有值基础上自增1。假设a初始为0,执行a++ 三次后得到a=3。
第2种:“++”在前面。例如++a,表示变量a每次在原有值基础上自增1。假设a初始为0,执行++a 三次后得到a=3。
两种形式得到的结果相同,区别在于:a++时变量a先运算后再自增1,++a是变量a先自增1后再参与运算。
实例 z=x-y,之后循环使z自增3次,再输出结果:
<html>
<head>
<title>测试网页</title>
</head>
<body>
<p>令x=3,y=2,求z=x-y的值。之后z自增3次输出</p>
<button onclick="myFunction()">点击计算z=x-y的值,之后z自增3次输出</button>
<p id="demo"></p>
<script>/* 定义JavaScript 函数求z的值 */
function myFunction(){
var x=3;//定义x
var y=2;//定义y
var z;//定义z
z=x-y;//计算x-y的值赋给z
for(var i=0;i<3;i++){
z++;//z自增 ,换成 ++z 结果一样
}
document.write("z=" + z );//输出z的值
}
</script>
</body>
</html>
(7)“ -- ” 表示 “自减” 。“自减”即指定的变量在原有数值的基础上数值每次减1。共有两种形式:
第1种:“--”在后面。例如a--,表示变量a每次在原有值基础上自减1。假设a初始为3,执行a-- 三次后得到a=0。
第2种:“--”在前面。例如--a,表示变量a每次在原有值基础上自减1。假设a初始为3,执行--a 三次后得到a=0。
两种形式得到的结果相同,区别在于:a--时变量a先运算后再自减1,--a是变量a先自减1后再参与运算。
实例 z=x+y,之后循环使z自减3次,再输出结果:
<html>
<head>
<title>测试网页</title>
</head>
<body>
<p>令x=3,y=2,求z=x+y的值。之后z自减3次输出<</p>
<button onclick="myFunction()">点击计算z=x+y的值,之后z自减3次输出</button>
<p id="demo"></p>
<script>/* 定义JavaScript 函数求z的值 */
function myFunction(){
var x=3;//定义x
var y=2;//定义y
var z;//定义z
z=x+y;//计算x+y的值赋给z
for(var i=0;i<3;i++){
z--;//z自减 ,换成 --z 结果一样
}
document.write("z=" + z );//输出z的值
}
</script>
</body>
</html>
3.复合运算符
赋值运算符 和 算法运算符 结合到一起组成复合运算符。包括:+=、-=、*=、/=、%=、>>=、<<=、>>>=、^=、&=、|= 共11种,前5种为算术复合运算符,比较常用;中间3种为位复合运算符;最后3种为逻辑复合运算符。
展开式例如:
x+=y 为 x=x+y。x-=y 为 x=x-y。x%=y 为 x=x%y。a>>=b 为 a=a>>b。a&=b 为 a=a&b。
其他复合运算符展开方法相同。
下面仅以 “%=”为例进行说明,其余复合运算符操作方法相同,可自行尝试练习。
(1)代码实现:
<html>
<head>
<title>测试网页</title>
</head>
<body>
<p>令x=3,y=2,求z=x+y的值,之后求z%=x的值</p>
<button onclick="myFunction()">点击计算z=x+y的值,并输出z%=x的值</button>
<p id="demo"></p>
<script>/* 定义JavaScript 函数求z的值 */
function myFunction(){
var x=3;//定义x
var y=2;//定义y
var z;//定义z
z=x+y;//计算x+y的值赋给z
document.write("z=x+y 的值为:" + z );//输出z的值
document.write("<br>");//换行
z%=x;//计算z取余x的值再次赋给z
document.write("z%=x 的值为:" + z );//输出z的值
}
</script>
</body>
</html>
(2)运行结果: