js运算符

运算符也被称为操作符,是用于实现赋值、比较和执行算数运算等功能的符合。

JavaScript常见的运算符有:

  • 算数运算符(+ - * / %)
  • 递增和递减运算符()
  • 比较运算符
  • 逻辑运算符
  • 赋值运算符

算术运算

算术运算使用的符号,用于两个变量或值的算术运算。

运算符 描述 示例
+ 加法 1+1=2
- 减法 3-2=1
* 乘法 2*3=6
/ 除法 4/2=2
% 取余数(取模) 返回除法的余数 9%2=1

示例

1
2
3
4
5
6
7
<script>
console.log(1 + 1); // 2
console.log(2 - 1); // 1
console.log(2 * 3); // 6
console.log(4 / 2); // 2
console.log(5 % 2); // 1
</script>

比较运算

概念:比较运算(关系运算)是两个数据进行比较时使用的运算符,比较运算后,会返回一个布尔值(true/false)作为比较运算的结果。

运算符 说明 案例 结果
< 小于 1<2 True
> 大于 1>2 False
>= 大于或等于 2>=2 True
<= 小于或等于 3<=2 False
== 等于(会转型) 37==37 True
!= 不等 37!=37 False
=== !== 全等 要求值和数据类型都一致 37===’37’ False

示例

1
2
3
4
5
6
7
8
9
10
11
12
13
<script>
console.log(3 >= 5); // false
console.log(2 <= 4); // true
// 1、程序里面的等于符号是 == 默认会转换数据类型,会把字符串型的数据转换成数字型,只要值相等就行了。
console.log(3 == 5); // false
console.log('xiaopu' == '刘德华'); // false
console.log(18 == 18); // true
console.log(18 == '18'); // true
console.log(18 != 18); // false
// 2、程序里面有全等,要求两侧的值或数据类型完全一致才可以,true
console.log(18 === 18); // true
console.log(18 === '18'); // false
</script>

总结

符号 作用 用法
= 赋值 把右边给左边
== 判断 判断两边值是否相等(注意此时有隐式转换)
=== 全等 判断两边的值和数据类型是否完全相同

逻辑运算

概念:逻辑运算是用来进行布尔值运算的运算符,返回值也是布尔值,常用于多个条件判断。

逻辑运算符 说明 案例
&& 逻辑 与,简称 与 and True && false
|| 逻辑 或,简称或 or True || false
逻辑 非,简称 非 not !true

示例

1
2
3
4
5
6
7
8
9
10
11
12
<script>
// 1、逻辑与 && and 两侧都为true时结果才返回true,只要有一侧是false,结果就为false
console.log(3 > 5 && 3 > 2); // false
console.log(3 < 5 && 3 > 2); // true

// 2、逻辑或 || or 两侧都为false 结果才是假 false,只要有一侧为true,结果就是true。
console.log(3 > 5 || 3 > 2); // true
console.log(3 > 5 || 3 < 2); // false

// 3、逻辑非 not
console.log(!true); // false
</script>

递增和递减

  • 前置递增和后置递增可以简化代码的编写,让变量的值+1比以前写法更简单。
  • 单独使用时,运行结果相同。
  • 和其他代码联用时,执行结果会不同。
  • 后置:先原值运算,后自加(先人后己)
  • 前置:先自加,后运算(先己后人)
  • 开发时,大多数使用后置递增/减,并且代码独占一行,例如:num++;或者num–;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
// 1、前置自增后后置自增如果单独使用 效果是一样的。
// 2、后置自增 是:先返回原值 后自加1.
var num = 1
// 前置递增
++num // 2
// 后置递增
num++ // 3

// 前置递减
--num // 2
// 后置递减
num-- //1
</script>

赋值运算符

概念:用来把数据赋值给变量。

运算符 说明 案例
= 直接赋值 var userName = ‘张三’
+=、-= 加、减一个数后再赋值 Var age =10; age+=5; //15
*=、/=、%= 乘、除、取模后再赋值 var age =2; age*=5; // 10

示例

1
2
3
4
5
6
<script>
var age = 10;
age += 5; // 相当于age = age + 5;
age -= 5; // 相当于age = age - 5;
age *= 10; // 相当于age = age * 10;
</script>

运算符优先级

优先级 运算符 顺序
1 小括号 ()
2 一元运算符 ++ – !
3 算数运算符 先* / % 后+ -
4 关系运算符 > >= < <=
5 相等运算符 == != === !==
6 逻辑运算符 先 && 后 ||
7 赋值运算符 =
8 逗号运算符 ,
  • 一元运算符里面的逻辑非优先级很高
  • 逻辑与比逻辑或优先级高

js流程控制

程序在执行过程中,各条代码的执行顺序对程序的结果是有直接影响的,很多时候我们要通过控制代码的执行顺序来实现我们要完成的功能。

简单理解:流程控制就是来控制我们的代码安卓什么结构顺序来执行。

流程控制主要有三种结构,分别是顺序结构、分支结构和循环结构,这三种结构代表三种代码执行的顺序。

分支流程if语句

语法结构

1
2
3
4
5
6
7
8
<script>
// 如果if里面的条件表达式为真 true时则执行大括号里面的语句
// 如果if条件表达式为假 false则执行if语句后面的语句。
if (条件表达式) {
// 执行的语句
alert('test')
}
</script>

if语句示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<script>
// 如果if里面的条件表达式为真 true时则执行大括号里面的语句
// 如果if条件表达式为假 false则执行if语句后面的语句。
// 1、单if分支示例
if (3 > 5) {
alert('test')
}

// 2、 if else双分支示例
if (3 > 2) {
alert('大于')
} else {
alert('不大于')
}

// 3、if多分支示例
var source = 70
if (source >= 60) {
alert('一般')
} else if (source >= 90) {
alert('优秀')
} else {
alert('不及格')
}
</script>

三元表达式

语法结构

1
2
3
4
5
6
<script>
// 语法结构
条件表达式 ? 表达式1 : 表达式2
// 执行思路
// 如果条件表达式结果为真 则返回表达式1的值,如果条件表达式为假 则返回表达式2的值
</script>

示例

1
2
3
4
5
6
7
8
9
10
11
12
13
<script>
// 三元表达式示例
var source1 = 92
var result = source1 >=90 ? '成绩优秀' : '成绩一般'
console.log(result); // 成绩优秀

// 等同于如下语句
if ( source1 >=90) {
result = '成绩优秀'
}else{
result = '成绩一般'
}
</script>

分支流程Switch语句

switch语句也是多分支语句,它用于基于不同的条件来执行不同的代码。当要针对变量设置一系列的特定值的选项时,就可以使用switch。

语法结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script>
// 1、switch 语句也是多分支语句 也可以实现多选1
// 2、语法结构 switch转换、开关、 case是例子或选项的意思
// 3、执行思路:利用我们的表达式的值 和case后面的选项值去匹配,如果匹配上就执行case中的语句,如果都没匹配上,就执行default中的语句。
// 注意事项:
// 1、开发过程中,表达式经常写成变量
// 2、变量的值和case中value的值匹配时是全等的关系,必须是值和数据类型一致才可以。
// 3、break 如果当前的case里面没有break 则不会退出switch,会继续执行下一个case。
switch (表达式) {
case value:
执行语句1;
break;
case value:
执行语句2;
break;
default:
执行最后的语句;
break;
}
</script>

示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script>
var source = prompt('输入查询价格的水果名称')
switch (source) {
case '橘子':
alert('橘子10块钱一斤')
break;
case '香蕉':
alert('香蕉3块钱一斤')
break;
case '苹果':
alert('苹果5块钱一斤')
break;
default:
alert('没有此水果')
break;
}
</script>

if和switch语句区别

  • 一遍情况,他们两个语句可以相互替换。
  • switch语句通常处理case为比较确定值的情况,而if语句更加灵活,用于范围判断(大于、等于某个范围)。
  • switch语句进行条件判断后直接执行到程序的条件语句,效率更高。而if语句有几种条件,就得多判断几次。
  • 当分支比较少时,if语句的执行效率比switch语句更高。
  • 当分支比较多时,switch语句的效率比较高,而且结构更清晰。

循环控制语句

for循环

程序中,一组被重复执行的语句被称为循环体,能否继续重复执行,取决于循环的终止条件,由循环体及循环的终止条件组成的语句,称为循环语句。

语法结构

1
2
3
4
5
6
7
8
<script>
for (初始化变量; 条件表达式; 操作表达式) {
// 循环体
}
// 初始化变量 就是用var声明的一个普通变量,用于作为计数器使用。
// 条件表达式 就是用来决定每次循环是否继续执行,就是终止的条件
// 操作表达式 就是每次循环最后执行的代码,经常用于我们计数器变量进行更新(递增或递减)
</script>

示例

1
2
3
4
5
<script>
for (var i = 1; i <= 10; i++) {
console.log(i);
}
</script>

continue语句,退出本次循环,继续执行剩余次数的循环示例。

1
2
3
4
5
6
7
8
<script>
for (var i = 1; i <= 5; i++) {
if (i == 3) {
continue
}
console.log('我正在吃第' + i + '个包子...');
}
</script>

break语句,用于立即跳出整个循环(循环结束)

例如吃5个包子,但是吃到第3个包子时发现里面有虫子,其余的包子也不吃了示例。

1
2
3
4
5
6
7
8
<script>
for (var i = 1; i <= 10; i++) {
if (i == 3) {
break
}
console.log('我正在吃第' + i + '个包子...');
}
</script>

while循环

语法格式

1
2
3
4
5
6
7
8
9
<script>
// 1、当条件表达式结果为true时,则执行循环体,否则退出循环
// 2、while循环中应该有计数器和初始化变量
// 3、也应该有操作表达式,完成计数器的更新,放着死循环发生。
while (条件表达式) {
// 循环体
// 操作表达式
}
</script>

示例

1
2
3
4
5
6
7
<script>
num = 1
while (num <= 10) {
console.log(num);
num++;
}
</script>