JavaScript运算符
2022/4/30 11:42:52
本文主要是介绍JavaScript运算符，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！
声明
该文部分代码和内容节选自菜鸟教程，仅用作个人学习，特此声明
链接：https://www.runoob.com/
12、JavaScript运算符
运算符 = 用于给 JavaScript 变量赋值。
算术运算符 + 用于把值加起来。
y=5; z=2; x=y+z;//7
12.1 JavaScript算数运算符
下表中y=5
| 运算符 | 描述 | 例子 | x 运算结果 | y 运算结果 |
|---|---|---|---|---|
| + | 加法 | x=y+2 | 7 | 5 |
| - | 减法 | x=y-2 | 3 | 5 |
| * | 乘法 | x=y*2 | 10 | 5 |
| / | 除法 | x=y/2 | 2.5 | 5 |
| % | 取模（余数） | x=y%2 | 1 | 5 |
| ++ | 自增 | x=++y(x=y++) | 6(5) | 6(6) |
| -- | 自减 | x=--y(x=y--) | 4(5) | 4(4) |
算术运算符练习
JavaScript代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript算数运算符练习</title>
</head>
<body>
<p>假设 y=5。</p>
<button onclick="add()">add</button>
<button onclick="sub()">sub</button>
<button onclick="mul()">mul</button>
<button onclick="div()">div</button>
<button onclick="mold()">mold</button>
<button onclick="selfAdd1()">selfAdd++</button>
<button onclick="selfAdd2()">++selfAdd</button>
<button onclick="selfSub1()">selfSub--</button>
<button onclick="selfSub2()">--selfSub</button>
<p>计算 x=y+2，并显示结果。</p>
<p id="demo1"></p>
<p>计算 x=y-2，并显示结果。</p>
<p id="demo2"></p>
<p>计算 x=y*2，并显示结果。</p>
<p id="demo3"></p>
<p>计算 x=y/2，并显示结果。</p>
<p id="demo4"></p>
<p>计算 x=y%2，并显示结果。</p>
<p id="demo5"></p>
<p>计算 x=y++，并显示结果。</p>
<p id="demo6"></p>
<p>计算 x=++y，并显示结果。</p>
<p id="demo7"></p>
<p>计算 x=y--，并显示结果。</p>
<p id="demo8"></p>
<p>计算 x=--y，并显示结果。</p>
<p id="demo9"></p>
<script>
function add(){
let y=5;
let x=y+2;
document.getElementById("demo1").innerHTML = "x = " + x +" "+"y = " + y;
}
function sub(){
let y=5;
let x=y-2;
document.getElementById("demo2").innerHTML = "x = " + x +" "+"y = " + y;
}
function mul(){
let y=5;
let x=y*2;
document.getElementById("demo3").innerHTML = "x = " + x +" "+"y = " + y;
}
function div(){
let y=5;
let x=y/2;
document.getElementById("demo4").innerHTML = "x = " + x +" "+"y = " + y;
}
function mold(){
let y=5;
let x=y%2;
document.getElementById("demo5").innerHTML = "x = " + x +" "+"y = " + y;
}
function selfAdd1(){
let y=5;
let x=y++;
document.getElementById("demo6").innerHTML = "x = " + x +" "+"y = " + y;
}
function selfAdd2(){
let y=5;
let x=++y;
document.getElementById("demo7").innerHTML = "x = " + x +" "+"y = " + y;
}
function selfSub1(){
let y=5;
let x=y--;
document.getElementById("demo8").innerHTML = "x = " + x +" "+"y = " + y;
}
function selfSub2(){
let y=5;
let x=--y;
document.getElementById("demo9").innerHTML = "x = " + x +" "+"y = " + y;
}
</script>
</body>
</html>
生成页面效果
12.2 JavaScript赋值运算符
赋值运算符用于给 JavaScript 变量赋值。
给定 x=10 和 y=5，下面的表格解释了赋值运算符：
| 运算符 | 例子 | 等同于 | 运算结果 |
|---|---|---|---|
| = | x=y | x=5 | |
| += | x+=y | x=x+y | x=15 |
| -= | x-=y | x=x-y | x=5 |
| *= | x*=y | x=x*y | x=50 |
| /= | x/=y | x=x/y | x=2 |
| %= | x%=y | x=x%y | x=0 |
赋值运算符练习
JavaScript代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript赋值运算符练习</title>
</head>
<body>
<p>设置 x=10 和 y=5。</p>
<button onclick="fuZhi()">=</button>
<button onclick="jiaD()">+=</button>
<button onclick="jianD()">-=</button>
<button onclick="chengD()">*=</button>
<button onclick="chuD()">/=</button>
<button onclick="moD()">%=</button>
<p>1.计算 x=y, 并显示结果</p>
<p id="demo1"></p>
<p>2.计算 x+=y, 并显示结果</p>
<p id="demo2"></p>
<p>3.计算 x-=y, 并显示结果</p>
<p id="demo3"></p>
<p>4.计算 x*=y, 并显示结果</p>
<p id="demo4"></p>
<p>5.计算 x/=y, 并显示结果</p>
<p id="demo5"></p>
<p>6.计算 x%=y, 并显示结果</p>
<p id="demo6"></p>
<script>
function fuZhi()
{
let x=10;
let y=5;
x=y;
document.getElementById("demo1").innerHTML = "x = " + x +" "+"y = " + y;
}
function jiaD()
{
let x=10;
let y=5;
x+=y;
document.getElementById("demo2").innerHTML = "x = " + x +" "+"y = " + y;
}
function jianD()
{
let x=10;
let y=5;
x-=y;
document.getElementById("demo3").innerHTML = "x = " + x +" "+"y = " + y;
}
function chengD()
{
let x=10;
let y=5;
x*=y;
document.getElementById("demo4").innerHTML = "x = " + x +" "+"y = " + y;
}
function chuD()
{
let x=10;
let y=5;
x/=y;
document.getElementById("demo5").innerHTML = "x = " + x +" "+"y = " + y;
}
function moD()
{
let x=10;
let y=5;
x%=y;
document.getElementById("demo6").innerHTML = "x = " + x +" "+"y = " + y;
}
</script>
</body>
</html>
生成页面效果
12.3 JavaScript连接符
+ 运算符用于把文本值或字符串变量加起来（连接起来）。
如需把两个或多个字符串变量连接起来，使用 + 运算符。
//1.连接两个或多个字符串变量 txt1="What a"; txt2="nice day"; txt3=txt1+txt2; //what anice day //2.1字符串之间增加空格 txt1="What a "; txt2="nice day"; txt3=txt1+txt2; //What a nice day //2.2表达式插入空格 txt1="What a"; txt2="nice day"; txt3=txt1+" "+txt2; //What a nice day
12.4 补充知识
1、对字符串和数字进行加法运算
规则:如果把数字与字符串相加，结果将成为字符串！
x=5+5; //10 y="5"+5; //55 z="Hello"+5; //Hello5
空文本 + 数字得到的运算结果都是把数字转成字符串，无论文本有多少个空格。但是空格会计入长度。
html会压缩空格， 所以直观上显示的是字符串，没有显示空格。
var result1 = 5+5+"abc"; //结果将是"10abc" var result2 = ""+5+5+"abc"; //结果将是"55abc" var result1=""+5; // 得到的结果是"5" var result2=" "+5; // 得到的结果是" 5" var result3=" "+5; // 得到的结果是" 5"
2、不同类型运算转换方式
1.字符串和数字相加，数字转成字符串.
var one="This is a test"; var two=123; var three=one+two; // 结果 three:This is a test123
2.数字和布尔值相加，布尔值false 转成 0，true 转成 1
var one=13; var two=true; var three=one+two; // 结果 three:14
3.字符串与布尔值相加，布尔值转化成字符串。
4.数字与 null(空值) 相加，null 转化为数字 0
var car=null+3+4; // 结果为7
5.字符串与 null(空值) 相加，null 转化为字符串
var car=null+"a"; // 结果为 nulla
1、字符串一个很能强大的数据类型；在执行加 + 时,将被加的对象统一处理为字符串。
2、bool 类型在与数字类型进行相加时，视为 0 或者 1 处理。
3、null 类型与数字类型进行累加时，视为 0 处理。
4、bool 类型与 null 类型进行累加时，视为其与整数类型累加处理。
5、undefined 除了与字符串进行累加时有效（undefined 视为字符串"undefined"处理），其他情况皆返回 NaN。
3、关于取模
取模运算的结果符号只与左边值的符号有关：
var x = 7 % 3; // 结果为 1 var y = 7 % (-3); // 结果为 1 var z = (-7) % 3; // 结果为 -1
- 如果 % 左边的操作数是正数，则模除的结果为正数或零；
- 如果 % 左边的操作数是负数，则模除的结果为负数或零。
4、JavaScript == 与 === 区别
1、对于 string、number 等基础类型，== 和 === 是有区别的
- a）不同类型间比较，== 之比较 "转化成同一类型后的值" 看 "值" 是否相等，=== 如果类型不同，其结果就是不等。
- b）同类型比较，直接进行 "值" 比较，两者结果一样。
2、对于 Array,Object 等高级类型，== 和 === 是没有区别的
进行 "指针地址" 比较
3、基础类型与高级类型，== 和 === 是有区别的
- a）对于 ==，将高级转化为基础类型，进行 "值" 比较
- b）因为类型不同，=== 结果为 false
这篇关于JavaScript运算符的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
- 2024-11-23Springboot应用的多环境打包入门
- 2024-11-23Springboot应用的生产发布入门教程
- 2024-11-23Python编程入门指南
- 2024-11-23Java创业入门：从零开始的编程之旅
- 2024-11-23Java创业入门：新手必读的Java编程与创业指南
- 2024-11-23Java对接阿里云智能语音服务入门详解
- 2024-11-23Java对接阿里云智能语音服务入门教程
- 2024-11-23JAVA对接阿里云智能语音服务入门教程
- 2024-11-23Java副业入门：初学者的简单教程
- 2024-11-23JAVA副业入门：初学者的实战指南
