第二章
运算符
运算符(operator)也被称为操作符，适用于实现赋值、比较和执行算数运算等功能符号.
Js里的运算符有:
-
算数运算符
-
递增和递减运算符
-
比较运算符
-
逻辑运算符
-
赋值运算符
算数运算符
- 算数运算符使用的符号，用于执行两个变量或值的算数
| 运算符 | 描述 | 示例 |
| + | 加 | 1 + 1 = 2 |
| - | 减 | 1 - 1 = 0 |
| * | 乘 | 1 * 1 = 1 |
| / | 除 | 10 / 20 = 0.5 |
| % | 取模（取余） | 9 % 2 = 1 |
//练习
<script>
console.log(1+1);//2
console.log(1-1);//0
console.log(1*1);//1
console.log(10/20);//0.5
console.log(9%2);//1
console.log(0.1+0.2);//0.30000000000000004
console.log(0.1+0.2==0.3);//false
//所以对比出来的结果是false,0.1+0.2的结果并不是0.3
</script>
知识扩展
浮点数值的精度问题
浮点数值的最高精度是17位小数，但在进行算术计算时其精确度远远不如整数，而且浮点数值的精确度会随着计算的进行而降低,所以永远不要测试某个特定的浮点数值
表达式和返回值
表达式是由操作符和操作数组成的，而表达式的值则是运算后得到的值,称为返回值.简单来说就是由数字,字符串或者变量等组成的简单表达式.
递增和递减运算符
-
概述
如果需要反复给数字变量添加或减去1,可以使用递增(++)和递减(–) 运算符来完成.
递增运算符由两个加号(++)表示,递减运算符由两个减号(–)表示.
递增运算符和递减运算符都是单目运算符,即只能操作一个值
递增运算符和递减运算符可以放在包含它们的语句之前(前置递增/递减运算符)或之后(后置递增/递减运算符)
前置递增递减
//++num前置递增,自加1,与表达式num+1类似,++num写起来方便些
var num = 1;
nmu = ++num;//再加1
console.log(num);//2
var a = 1;
console.log(++a + num);//a先加1,再加num
//小结:先自加(减),后返回值
后置递增递减
//后置递减
var num = 1;//定义一个变量
var num1 = num++ + 1;//先将num的值赋值给num1,然后num的值加1
console.log(num);//2
console.log(num1);//2 首先num把自己的值返回1,然后num的值加1
总结
自增（++）和自减（–）运算符在编程中经常使用，它们分为前置和后置两种形式。下面是一个简单的口诀
前置加加，先加后用；后置加加，先用后加。
前置减减，先减后用；后置减减，先用后减。
- 前置自增（++variable）：首先将变量的值增加 1，然后返回新值。
- 后置自增（variable++）：首先返回变量的值，然后将变量的值增加 1。
- 前置自减（–variable）：首先将变量的值减少 1，然后返回新值。
- 后置自减（variable–）：首先返回变量的值，然后将变量的值减少 1。
举个例子：
let num = 1;
let preIncrement = ++num; // num = 2, preIncrement = 2
let postIncrement = num++; // num = 3, postIncrement = 2
let preDecrement = --num; // num = 2, preDecrement = 2
let postDecrement = num--; // num = 1, postDecrement = 2
以下是三道关于自增和自减运算符的练习题。
练习 1：
let a = 5;
let b = a++ * 2;
在执行完这段代码后，a 和 b 的值分别是多少？
练习 2：
let x = 10;
let y = --x + 3;
在执行完这段代码后，x 和 y 的值分别是多少？
练习 3：
let m = 3;
let n = 4;
let result = ++m + n--;
在执行完这段代码后，m、n 和 result 的值分别是多少？
递增和递减运算符
- 概念:比较运算符用于比较两个值，并返回一个布尔值，比较运算符包括小于<,大于>,小于等于<=,大于等于>=,等于==,不等于!=,全等===,不全等!==
| 比较运算符 | 符号 | 示例 | 结果 |
|---|---|---|---|
| 等于 | == | 5 == 5 | true |
| 不等于 | != | 5 != 3 | true |
| 大于 | > | 5 > 3 | true |
| 小于 | < | 5 < 3 | false |
| 大于等于 | >= | 5 >= 5 | true |
| 小于等于 | <= | 5 <= 3 | false |
| 严格等于 | === | 5 === '5' | false |
| 严格不等于 | !== | 5 !== '5' | true |
比较规则
1.如果两个操作数都是数值，则执行数值比较
2.如果两个操作数都是字符串，则比较两个字符串对应的字符编码值
3.如果一个操作数是数值，则将另一个操作数转换为数值，然后执行数值比较
4.如果一个操作数是对象，则调用对象的valueOf()方法，用得到的结果按照前面的规则执行比较，如果对象没有valueOf()方法，则调用toString()方法，用得到的结果按照前面的规则执行比较
5.如果一个操作数是布尔值，则将其转换为数值，然后执行比较
6.如果一个操作数是null或undefined，则将其转换为0，然后执行比较
7.如果一个操作数是NaN，则返回false
8.如果两个操作数都是对象，则比较两个对象的引用
//比较规则如上,操作数会字形转换
console.log(1<2);//true
console.log(1>2);//false
console.log(1<=2);//true
console.log(1>=2);//false
console.log(1==2);//false
console.log(1!=2);//true
console.log(1===2);//false
console.log(1!==2);//true
console.log(1===1);//true
console.log(1==='1');//false 检查类型和值是否相等
console.log('小明'=='小红');//false
console.log('小红'=='小红');//true
console.log(1>"2");//false
console.log(1<true);//false
console.log(1>false);//true
console.log(1<false);//false
=的小结
| 运算符 | 符号 | 描述 | 示例 | 结果 |
|---|---|---|---|---|
| 赋值 | = | 将右操作数的值赋给左操作数 | var a = 5 | 将 5 赋值给 a |
| 等于 | == | 检查两个操作数是否相等，如果相等则返回 true | 5 == '5' | true |
| 严格等于 | === | 检查两个操作数是否完全相等（类型和值），如果相等则返回 true | 5 === '5' | false |
逻辑运算符
-
概念
是用来判断两个表达式的逻辑关系，逻辑运算符包括与&&,或||,非!,三种逻辑运算符的运算结果都是布尔值，逻辑运算符的运算规则如下：
运算符 描述 示例 结果 && 逻辑与,简称"与" and 5 > 3 && 2 < 4 true || 逻辑或,简称"或" or 5 > 3 || 2 > 4 true ! 逻辑非,简称"非" not !(5 > 3) false console.log(3>6 && 2<4);//false 两个都为true才为true console.log(3>6 || 2<4);//true 只要有一个为true就为true console.log(!(3>6));//true 取反 console.log(!(3<6 && 2<4));//true取反为false console.log(!(3>6 || 2>4));//false取反为true
位运算符(目前了解即可)
-
概念
位运算符是将数字转换为32位整数，然后对整数进行运算，最后将结果转换为数字，位运算符包括按位与&,按位或|,按位异或^,按位非~,左移<<,右移>>,无符号右移>>>，位运算符的运算规则如下：
运算符 描述 示例 结果 & 按位与 5 & 1 1 | 按位或 5 | 1 5 ^ 按位异或 5 ^ 1 4 ~ 按位非 ~5 -6 << 左移 5 << 1 10 >> 右移 5 >> 1 2 >>> 无符号右移 5 >>> 1 2 console.log(5 & 1);//1 console.log(5 | 1);//5 console.log(5 ^ 1);//4 console.log(~5);//-
逻辑中断逻辑与和逻辑或
- 短路运算(逻辑中断)
短路运算的原理:
当有多个表达式(值)时,会从左到右依次判断,如果能够判断出结果,则不再继续判断,直接返回结果,这种现象称为短路运算(逻辑中断)
- 逻辑与&&
//逻辑与短路运算
//如果表达式1的值为true，则返回表达式2的值，如果表达式1的值为false，则返回表达式1的值
console.log(1&&2);//2 1为true,返回2
console.log(0&&2);//0 0为false,返回0
console.log(1&&0);//0 0为false,返回0
console.log(123&&456);//456 456为true,返回456
console.log(''&&456);//'' ''为false,返回''
- 逻辑或||
//逻辑或短路运算
//如果表达式1的值为true，则返回表达式1的值，如果表达式1的值为false，则返回表达式2的值
console.log(1||2);//1 1为true,返回1
console.log(0||2);//2 0为false,返回2
console.log(1||0);//1 1为true,返回1
console.log(123||456);//123 123为true,返回123
console.log(''||456);//456 ''为false,返回456
//小练
var a = 1;
console.log(123 || a++);//123
console.log(a);//1
赋值运算符
- 概念
赋值运算符是将右边的值赋值给左边的变量，赋值运算符包括=,+=,-=,*=,/=,%=,<<=,>>=,>>>=,&=,|=,^=，赋值运算符的运算规则如下：
| 运算符 | 描述 | 示例 | 结果 |
|---|---|---|---|
| = | 赋值 | var a = 1 | 1 |
| += | 加后赋值 | var a = 1;a += 2 | 3 |
| -= | 减后赋值 | var a = 1;a -= 2 | -1 |
| *= | 乘后赋值 | var a = 1;a *= 2 | 2 |
| /= | 除后赋值 | var a = 1;a /= 2 | 0.5 |
| %= | 取模后赋值 | var a = 1;a %= 2 | 1 |
| <<= | 左移后赋值(了解即可) | var a = 1;a <<= 2 | 4 |
| >>= | 无符号右移后赋值(了解即可) | var a = 1;a >>>= 2 | 0 |
| &= | 按位与后赋值(了解即可) | var a = 1;a &= 2 | 0 |
var a = 1;
a += 2;
console.log(a);//3
a -= 2;
console.log(a);//1
a *= 2;
console.log(a);//2
a /= 2;
console.log(a);//1
a %= 2;
console.log(a);//1
a <<= 2;
console.log(a);//4
a >>>= 2;
console.log(a);//1
a &= 2;
console.log(a);//0
运算符优先级
-
概念
运算符优先级是指多个运算符同时出现时，先执行哪个运算符，运算符优先级的规则如下：
优先级 运算符 顺序 1 括号 () 从左到右 2 一元运算符 ++ -- ！ 3 算数运算符 先* / %后+ - 4 关系运算符 >= > < <= 5 相等运算符 == != === !== 6 逻辑运算符 先&& 后|| 7 赋值运算符 = 8 逗号运算符 , -
一元运算符逻辑非优先级比较高
-
逻辑与比逻辑或优先级高
流程控制分支结构
流程控制
-
概念
流程控制是指程序的执行顺序，流程控制分为顺序结构、分支结构、循环结构，顺序结构是指程序按照代码的先后顺序执行，分支结构是指程序按照条件的不同执行不同的代码，循环结构是指程序按照条件的不同重复执行相同的代码。
-
分类
流程控制分为顺序结构、分支结构、循环结构，顺序结构是指程序按照代码的先后顺序执行，分支结构是指程序按照条件的不同执行不同的代码，循环结构是指程序按照条件的不同重复执行相同的代码。
顺序结构
-
概念
顺序结构是指程序按照代码的先后顺序执行，顺序结构是程序的默认结构，不需要任何关键字。
分支结构
-
概念
分支结构是指程序按照条件的不同执行不同的代码，分支结构分为单分支结构和双分支结构，单分支结构是指程序按照条件的不同执行不同的代码，双分支结构是指程序按照条件的不同执行不同的代码，分支结构的关键字为if、else、switch。
1.if语句(单分支语句)
-
概念
if语句是指程序按照条件的不同执行不同的代码，if语句的语法如下：
if(条件){ 执行语句 }执行思路：如果条件为true则执行if语句中的代码，如果条件为false则不执行if语句中的代码。
-
示例
var a = 1; if(a == 1){ console.log("a等于1"); } -
注意
if语句的条件为布尔值，如果条件为true则执行if语句中的代码，如果条件为false则不执行if语句中的代码，if语句中的代码只有一行时可以省略大括号，但是不建议省略大括号，因为省略大括号会造成代码的可读性差，容易出错。
//练习:弹出输入框，输入一个数字，如果数字大于10则弹出“数字大于10”，如果数字小于10则弹出“数字小于10”，如果数字等于10则弹出“数字等于10”。
var a = prompt("请输入一个数字");
if(a>10){
alert("大于10");
}if(a<10){
alert("小于10");
}
if(a==10){
alert("等于10");
}
2.if…else语句(双分支语句)
-
概念
if…else语句是指程序按照条件的不同执行不同的代码，if…else语句的语法如下：
if(条件){ 执行语句1 }else{ 执行语句2 }执行思路：如果条件为true则执行if语句中的代码，如果条件为false则执行else语句中的代码。
-
示例
var a = 1; if(a == 1){ console.log("a等于1"); }else{ console.log("a不等于1"); } -
注意
if…else语句的条件为布尔值，如果条件为true则执行if语句中的代码，如果条件为false则执行else语句中的代码，if…else语句中的代码只有一行时可以省略大括号，但是不建议省略大括号，因为省略大括号会造成代码的可读性差，容易出错。
//练习:弹出输入框，输入一个数字，如果数字大于10则弹出“数字大于10”，如果数字小于10则弹出“数字小于10”。
var a = prompt("请输入一个数字");
if(a>10){
alert("大于10");
}else{
alert("小于10");
}
- 练习
var a = prompt("请输入年份");
if (a % 4 == 0 && a % 100 != 0 || a % 400 == 0){
alert("闰年");
}else{
alert("平年");
}
3.if…else if…else语句(多分支语句)
-
概念
if…else if…else语句是指程序按照条件的不同执行不同的代码，if…else if…else语句的语法如下：
if(条件1){ 执行语句1 }else if(条件2){ 执行语句2 }else if(条件3){ 执行语句3 }else{ 执行语句4 }执行思路：如果条件1为true则执行if语句中的代码，如果条件1为false则判断条件2，如果条件2为true则执行else if语句中的代码，如果条件2为false则判断条件3，如果条件3为true则执行else if语句中的代码，如果条件3为false则执行else语句中的代码。
-
示例
var a = 1; if(a == 1){ console.log("a等于1"); }else if(a == 2){ console.log("a等于2"); }else if(a == 3){ console.log("a等于3"); }else{ console.log("a不等于1、2、3"); } -
注意
if…else if…else语句的条件为布尔值，如果条件1为true则执行if语句中的代码，如果条件1为false则判断条件2，如果条件2为true则执行else if语句中的代码，如果条件2为false则判断条件3，如果条件3为true则执行else if语句中的代码，如果条件3为false则执行else语句中的代码，if…else if…else语句中的代码只有一行时可以省略大括号，但是不建议省略大括号，因为省略大括号会造成代码的可读性差，容易出错。
//练习：接收用户输入的分数，根据分数给出到对应的等级，分别是：90以上为A，80-89为B，70-79为C，60-69为D，60以下为不及格。
var c = prompt('请输入成绩');
if(c>=90){
alert("A");
}else if(c>=80&&c<90){
alert("B");
}else if(c>=70&&c<80){
alert("C");
}
else if(c>=60&&c<70){
alert("D");
}
else{
alert("不及格");
}
三元表达式
-
概念
三元表达式是由三个表达式组成的运算符，三元表达式的运算规则如下：
运算符 描述 示例 结果 ? 三元表达式 5 > 3 ? 1 : 0 1 //语法:条件表达式 ? 表达式1 : 表达式2 //根据条件表达式的结果,来决定返回表达式1的值还是表达式2的值 console.log(5 > 3 ? 1 : 0);//1 console.log(5 < 3 ? 1 : 0);//0 //练习：用户输入数值，如果数值小于10，则在前面补0，否则不补0 var a = prompt("请输入一个数值"); a < 10 ? a = "0" + a : a = a; alert(a); console.log(a < 10 ? '0'+ a : '大于10了' );
switch语句
- 概念
switch语句是指程序按照条件的不同执行不同的代码，switch语句的语法如下：
switch(条件){
case 值1:
执行语句1
break;
case 值2:
执行语句2
break;
case 值3:
执行语句3
break;
default:
执行语句4
}
执行思路：如果条件等于值1则执行case值1中的代码，如果条件等于值2则执行case值2中的代码，如果条件等于值3则执行case值3中的代码，如果条件不等于值1、值2、值3则执行default中的代码。
-
示例
var a = prompt("请输入一个数字"); a = parseInt(a);//将字符串转换为数字 switch(a){ case 1: console.log("a等于1"); break; case 2: console.log("a等于2"); break; case 3: console.log("a等于3"); break; default: console.log("a不等于1、2、3"); } -
注意
switch语句中的条件为数值，数据类型必须相同且每一次判断时都要加上break，否则会造成程序的错误，switch语句中的代码只有一行时可以省略大括号，但是不建议省略大括号，因为省略大括号会造成代码的可读性差，容易出错。
//练习
var a = prompt("请输入一个水果");
switch(a){
case "苹果":
alert("苹果");
console.log("苹果");
break;
case "香蕉":
alert("香蕉");
console.log("香蕉");
break;
case "橘子":
alert("橘子");
console.log("橘子");
break;
default:
alert("不是水果");
console.log("不是水果");
}
ifelseif和switch区别
-
ifelseif和switch都是多分支语句，都可以根据条件的不同执行不同的代码，但是ifelseif和switch的区别如下：
- if-else if 语句适合判断连续范围的条件,switch-case 适合判断离散的条件。
例如:
// if-else if 适用
if (age > 0 && age < 18) {
// ...
} else if (age >= 18 && age < 60) {
// ...
} else {
// ...
}
// switch-case 适用
switch (color) {
case "red":
// ...
break;
case "blue":
// ...
break;
default:
// ...
}
- if-else if 语句可以判断复杂的逻辑条件,switch-case 只能判断是否相等。
例如:
// if-else if 可以判断
if (age > 0 && age < 18) {
// ...
}
// switch-case 只能判断相等
switch (age) {
case 18:
// ...
break;
}
-
if-else if 语句没有 break,会执行所有的语句,switch-case 需要 break 否则会继续执行下一个 case。
-
if-else if 语句可以判断NaN或undefined,switch-case 会报错。
所以总结来说:
- 如果需要判断连续范围或复杂条件,if-else if 更合适。
- 如果只是判断几个离散值的相等,且值只能是整数或字符串,switch-case 更简洁。
- 如果值可能是NaN或undefined,只能使用if-else if。
if-else if 语句更通用,switch-case 语句在某些情况下更高效、简洁,所以可以根据需求灵活选择。
225
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
