前端基础（JavaScript 二）——操作符、流程控制语句

一、操作符

1.表达式

  表达式就是将同类型的数据如：常量、变量、函数等，用运算符号按一定的规则连接起来的，有意义的式子叫做表达式。这里提到的运算符号就是操作符。

2.操作符的分类

算数操作符

  算数操作符比较常见的就是数学中常见的加(+)、减(-)、乘(✖)、除(/)、取余(%)、自增(++)、自减(–)。加减乘除和取余（取余就是得到余数，如5%2结果为1）这边就不作演示了，主要给大家演示一下取余、自增和自减。
  自增：

	var a = 1;
	a++;
	console.log(a);/*结果输出为2*/

  还有一种是++a：

	var a = 1;
	console.log(++a);/*结果输出也为2*/

  但如果把上述的++a换成a++，会发现结果为1：

	var a = 1;
	console.log(a++);

  原因是因为a++等价于a += 1，即a = a + 1，相当于使用a的值之后才会加一，而++a会在使用a的值之前对a进行加一的操作，所以导致了结果的不同。
  当然加号不仅仅能实现数值的相加，对于字符串等也可以通过加号来进行操作，具体如下：

	var a = 1 + 'abc';
	console.log(a);
	var b = true + false;
	console.log(b);

结果：

赋值操作符

  赋值操作符分为简单赋值和复合赋值，简单赋值就是我们常用的“=”，而复合赋值有“+=”、“-=”、“*=”、“/=”、“%=”，这些其实都类似于上面有提到的“+=”，例如a+=1就等价于a = a + 1，其他复合赋值符号同理，具体例子如下：

	var a = 1;
	a += 3;
	console.log(a);
	a *= 2;
	console.log(a);
	a /= 2;
	console.log(a);
	a %= 3;
	console.log(a);

比较操作符

  常见的比较运算符有：>(大于)、>=(大于等于)、<(小于)、<=(小于等于)，就是和数学中的定义一样，这里需要记住的是比较表达式返回的值是布尔类型的值，例如：

console.log(5 > 3);

输出结果：

三元操作符

  三元操作符形如：

	5>3?console.log("输出表达式一"):("输出表达式二");

  ?前面的表示判断条件，如果条件成立的话，就执行?后面的第一个表达式，若未成立，则执行:后面的表达式，结果如：

逻辑操作符

  逻辑操作符常见的有三种：逻辑与（&&）、逻辑或（||）、逻辑非（!）。
  逻辑与：条件都真，结果才为真，如果条件不为布尔值，则返回值规则为，条件1为真，则返回条件2，条件1为假，则返回条件1。具体样例如下：

	console.log(true&&true);
	console.log(false&&true);
	console.log(1&&2);
	console.log(1&&null&&'');

结果：

  逻辑或：条件有一个为真，结果就为真，如果条件不为布尔值，条件1为真，则返回条件1，若条件1为假，则返回条件2。具体样例如下：

	console.log(false||false);
	console.log(false||true);
	console.log(1||2);
	console.log(null||'');

结果：

  逻辑非：将布尔类型的值取反，具体样例如下：

	console.log(!true);
	console.log(!1);
	console.log(!null);

结果：

二、流程控制语句

if-else语句

  基础语法：

	if(条件){
		执行语句;
	}else{
		执行语句;
	}

  if语句简单说就是if括号里面的条件成立，则执行{}里的语句，如果没有加{}，则默认执行紧跟着if的第一条语句。else代表如果不满足if中的条件时，则执行else中的语句。
  if中还有一种类型的语句，else-if，具体语法如下：

	if(条件){
		执行语句;
	}else if(条件){
		执行语句;
	}else{
		执行语句;
	}

&emsep;&emsep;else if会在不满足if语句条件的前提下，判断是否满足自身括号里的条件，满足的话进入执行语句，不满足程序向下执行，else if可以设置多条具体示例如下：

<script type="text/javascript">
	var score;
	score = window.prompt("请输入你的成绩");
	if(score == 100){/*若成绩为一百*/
		alert("恭喜您是满分");
	}else if(score >= 80){ /*若成绩不为一百且大于等于八十*/
		alert("成绩优秀");
	}else if(score >= 60){/*若成绩小于八十并大于等于60*/
		alert("及格");
	}else{/*若成绩都不为上面的情况*/
		alert("不及格");
	}
</script>

  大家可以把代码复制了自己运行一下。另外if语句是可以进行嵌套的，例如：

<script type="text/javascript">
	var score;
	score = window.prompt("请输入你的成绩");
	if(isNaN(score)){
		alert("输入不合法");
	}else{
		if(score == 100){
			alert("恭喜您是满分");
		}else if(score >= 80){
			alert("成绩优秀");
		}else if(score >= 60){
			alert("及格");
		}else{
			alert("不及格");
		}
	}
</script>

  大家可以自己尝试一下。

switch-case语句

  switch-case语句和if-else语句的作用类似，都是根据条件的不同来执行不同的语句，但是在语法上有着区别，switch-case语句的语法如下：

<script type="text/javascript">
	var city;
	city = window.prompt("请输入你喜欢的地方");
	switch(city){/*city作为判定的值*/
		case '厦门': /*当值为厦门时*/
			alert("您喜欢的城市是"+city); 
			break;
		case '南宁':/*当值为南宁时*/
			alert("您喜欢的城市是"+city);
			break;
		case '长沙':/*当值为长沙时*/
			alert("您喜欢的城市是"+city);
			break;
		default:/*其他情况*/
			alert("您喜欢的城市是其他");
			break;
	}
</script>

  这边switch后面括号内的变量就是我们需要进行判断的变量，case后面跟的就是当变量值为当前值时，要执行的语句，default就是默认语句，当上述情况都不满足就会执行，这里需要注意的是break，break会在你执行完当前语句后跳出switch-case语句如果没有添加break的话，程序会继续向下进行输出，具体示例如下：

<script type="text/javascript">
	var city;
	city = window.prompt("请输入你喜欢的地方");
	switch(city){
		case '厦门': 
			console.log("您喜欢的城市是"+city); 
			// break;
		case '南宁':
			console.log("您喜欢的城市是"+city);
			// break;
		case '长沙':
			console.log("您喜欢的城市是"+city);
			break;
		default:
			console.log("您喜欢的城市是其他");
			break;
	}
</script>

  这样子程序执行的话，在输出第一条语句后，没有进行break，程序会继续向下执行，因此输出会有三句：

  这里为大家列举了switch语句和if-else语句的区别：

	switch	if
判断条件	等值判断	等值和区间判断
结束	break跳出	执行一个if后自动结束
默认和否则语句	default可以放在任何位置	else 只能放在最后

循环语句

1.for循环语句

  for循环语句的基本语法是：

for(语句1;语句2;语句3){
	执行语句
}![在这里插入图片描述](https://img-blog.csdnimg.cn/20210401120944378.png#pic_center)

  语句一是在循环开始前执行，语句二是定义循环体的条件，语句三在循环体执行后执行。具体示例如下：

<script type="text/javascript">
	for(var a = 1; a <= 10; a++){
		console.log(a);
	}
</script>

  比如上述代码，在循环体执行前执行的是var a = 1;语句，当a小于等于10时，进行a++的操作，循环体则是打印a的值，结果如下：

  语句也可以写成多条，如：

<script type="text/javascript">
	for(var a = 1, b = 2; a <= 10; a++, b+=2){
		console.log(a,b);
	}
</script>

结果：

  与if语句一样，for语句也可以进行嵌套，当外层为假时内层不执行，先执行外层再执行内层，直至内层的条件为假再返回外层去执行，具体使用如下：

<script type="text/javascript">
	for(var i = 1; i <= 3; i++){
		console.log("i的值为："+i);
		for(var j = 1; j <= 3; j++){
			console.log("j的值为："+j);
		}
		console.log("\n");
	}
</script>

可以看到，当第一个for循环进行一次时，内层for循环会完整执行结束：

2.while循环语句

  while循环语句实现的功能和for循环是一样的，但是在语法上有些不同，while循环有两种形式，一种是while循环，一种是do-while循环，while循环的语法如下：

while(条件){
	执行语句
}

  当满足条件时，会进入循环体，执行循环体体内的语句，不满足条件的时候则退出循环体，具体使用如下：

<script type="text/javascript">
	var a = 0;
	while(a < 10){
		console.log(a);
		a++;
	}
</script>

  当a不满足小于10时，就结束了循环：

  do-while循环的基本语法如下：

do{
	执行语句
}while(条件)

  与while不同的是，do-while循环先执行一遍循环体，再进行条件的判断，因此无论第一次是否满足条件，do-while语句都会进行一次循环体的执行，具体使用如下：

<script type="text/javascript">
	var a = 11;
	do{
		console.log(a);
	}while(a < 10)
</script>

  这边的a初始值11，明显不满足条件中的a小于10，但是程序依旧会执行一遍console.log(a);，这就是do-while和while的区别：

3.break和continue的使用

  这里需要提到平时在循环中最常用的两个语句，break和continue，这两者都是用来跳出循环的，但不同的是，break是直接结束循环，而continue只是跳出当前一轮的循环，具体示例如下：

<script type="text/javascript">
	var a = 10, i = 1;
	while(a > 0){
		console.log("这是第"+i+"次循环");
		i++;
		a--;
		if(a < 5){
			break;
		}
		console.log(a);
	}
</script>

  可以看出，这里循环只进行了六次，当a为4的时候循环就结束了：

  当我们把break换成continue时：

<script type="text/javascript">
	var a = 10, i = 1;
	while(a > 0){
		console.log("这是第"+i+"次循环");
		i++;
		a--;
		if(a < 5){
			continue;
		}
		console.log(a);
	}
</script>

  可以看出，这里依旧是执行了十次的循环，但是最后几次都没有输出a的值，因为在continue后，循环体中continue以下的语句便不再执行了，因此后面几次都没有输出a的值：

  使用break和continue时还有需要注意的一点是，当我们在使用嵌套循环的时候，break和continue只能跳过当前层的循环，不能跳出所有的循环体。
这一部分的内容就简要介绍这些啦，也许有些写的并不完整，也希望大家多多包涵啦！