JS-语句

大猩猩爱吃薯片

已于 2023-11-25 17:06:42 修改

阅读量63

点赞数

文章标签： javascript 前端开发语言

于 2023-11-18 22:07:05 首次发布

本文链接：https://blog.csdn.net/zxzx1289/article/details/134479612

版权

1、表达式和语句

表达式：表达式是可以被求值的代码，JavaScript 引擎会将其计算出一个结果。

语句：语句是一段可以执行的代码。比如： prompt() 可以弹出一个输入框，还有 if语句 for 循环语句等等

区别：

表达式： 因为表达式可被求值，所以它可以写在赋值语句的右侧。

表达式 num = 3 + 4

语句： 而语句不一定有值，所以比如 alert() for和break 等语句就不能被用于赋值。

语句 alert() 弹出对话框 console.log() 控制台打印输出

某些情况，也可以把表达式理解为表达式语句，因为它是在计算结果，但不是必须的成分 (例如continue语句 )

2、分支语句

2.1、if语句

if语句有三种使用：单分支、双分支、多分支

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
	<script>
		//1、if单分支使用语法：
		if(条件){
			满足条件要执行的代码
		}
		//2、if双分支使用语法
		if(条件){
			满足条件要执行的代码
		}else{
			不满足条件要执行的代码
		}
		//3、if多分支使用语法
		if(条件){
			满足条件要执行的代码
		}else if(条件2){
			满足条件要执行的代码
		}else if(条件3){
			满足条件要执行的代码
		}else{
			都不满足执行
		}
		//先判断条件1，若满足条件1就执行代码1，其他不执行
		//有一个满足条件执行代码，下面代码不在执行
		//都不满足则执行最后一行代码
	</script>
	</body> 
</html>

2.2三元运算符

使用场景： 其实是比 if 双分支更简单的写法，可以使用三元表达式

符号： ? 与 : 配合使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
	<script>
		let num = +prompt("请输入号码")
		num >10 ? alert(`${num}大于10`):alert(`${num}小于10`)
	</script>
	</body> 
</html>

一般用来取值

2.3、switch语句

找到跟小括号里数据全等的case值，并执行里面对应的代码

若没有全等 === 的则执行default里的代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
	<script>
		 switch(1){
			 case 1:
			 alert('是1')
			 break
			 case 2:
			 alert(' 这个数值是2')
			 break
			 default 3:
			 alert('这个数值是3')
			 break
		 }//输出这个数值是1
	</script>
	</body> 
</html>

注意事项：1. switch case语句一般用于等值判断,不适合于区间判断

2. switch case一般需要配合break关键字使用没有break会造成case穿透

3、循环语句

学习路径： 1. 断点调试

2. while循环

3.1断点调试

作用：学习时可以帮助更好的理解代码运行，工作时可以更快找到bug

浏览器打开调试界面：1. 按F12打开开发者工具

2. 点到sources一栏

3. 选择代码文件

断点：在某句代码上加的标记就叫断点，当程序执行到这句有标记的代码时会暂停下来

3.2while循环

循环：重复执行一些操作， while : 在…. 期间，所以 while循环 就是在满足条件期间，重复执行某些代码。

1. while 循环基本语法：

1.跟if语句很像，都要满足小括号里的条件为true才会进入循环体执行代码

2.while大括号里代码执行完毕后不会跳出，而是继续回到小括号里判断条件是否满足，若满足又执行大括号里的代码，然后再回到小括号判断条件，直到括号内条件不满足，即跳出

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
	<script>
		while(循环条件){
			循环体
		}
	</script>
	</body> 
</html>

2. while 循环三要素：

循环的本质就是以某个变量为起始值，然后不断产生变化量，慢慢靠近终止条件的过程。

1. 变量起始值

2. 终止条件（没有终止条件，循环会一直执行，造成死循环）

3. 变量变化量（用自增或者自减）

 <!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<script>
		//变量起始值
		let i = 1
		//终止条件
		while (i<=1){
			document.write('zx')
			//变量变化量
			i++
		}
	</script>
</body>
</html>

3.3退出循环

循环结束： break：退出循环

continue：结束本次循环，继续下次循环

区别：1、 continue 退出本次循环，一般用于排除或者跳过某一个选项的时候, 可以使用continue

2、break 退出整个循环，一般用于结果已经得到, 后续的循环不需要的时候可以使用

3.4for循环

1. for循环语法

作用：重复执行代码

好处：把声明起始值、循环条件、变化值写到一起，让人一目了然，它是最常使用的循环形式

<script>
		 for(变量起始值;终止条件;变量变化量){
			 //循环体
		 }
	 </script>

练习：1. 利用for循环输出1~100岁

2. 求1-100之间所有的偶数和

3. 页面中打印5个小星星

4. for循环的最大价值：循环数组：需求：请将数组 [‘马超’，‘赵云’， ‘张飞’, ‘关羽‘，’黄忠’] 依次打印出来

2. 退出循环

continue 退出本次循环，一般用于排除或者跳过某一个选项的时候, 可以使用continue

break 退出整个for循环，一般用于结果已经得到, 后续的循环不需要的时候可以使用

了解： 1. while(true) 来构造“无限”循环，需要使用break退出循环。

2. for(;;) 也可以来构造“无限”循环，同样需要使用break退出循环。

3.5for循环嵌套

一个循环里再套一个循环，一般用在for循环里

 <script>
		 for(变量起始值;终止条件;变量变化量){
			  for(变量起始值;终止条件;变量变化量){
			  			 //循环体
			  }
		 }
	 </script>

案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<script>
			//假如每天记住5个单词，3天后一共能记住多少单词？
			for(let i=1;i<=3;i++){
				for(let j=1;j<=5;j++){
					document.write(`第${j}单词<br>`)
				}
				document.write(`第${i}天<br>`)
			}
			
			
			//需求： 页面中打印出5行5列的星星
			let row= +prompt('请输入行数')
			let col= +prompt('请输入数')
			for(let i=1; i<=row; i++){
				for(let j=1; j<=i; j++){
					document.write(`⭐`)
				}
				document.write(`<br>`)
				
				
			}
			//乘法口诀
			for(let i=1; i<=9; i++){
				for(let j=1; j<=i; j++){
					document.write(`${i}*${j}=${i*j}`)
				}
				document.write(`<br>`)
			}
		</script>
	</body>
</html>

4、数组

数组：(Array)是一种可以按顺序保存数据的数据类型

4.1数组基本使用

		<script>
			声明数组
			let 数组名 = [数据1,数据2,数据3,....数据n]
		</script>

1、数组是按顺序保存，所以每个数据都有自己的编号

2、在数组中，数据的编号也叫 索引或下标

3、数组可以存储任意类型的数据

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<script>
			//声明数组
			let name = ['小明','小张','小红','小米']
			//取值
			//数组名[下标]
			console.log(name[0])
		</script>
	</body>
</html>

3、一些术语：元素：数组中保存的每个数据都叫数组元素

下标：数组中数据的编号

长度：数组中数据的个数，通过数组的length属性获得

4、遍历数组： 用循环把数组中每个元素都访问到,一般会用for循环遍历

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<script>
			 // 语法:
			 // for(let i=0; i<数组名.length;i++){
				//  数组名[i]
			 // }
			 //例子:
			let name = ['小明','小张','小红','小米']
			 for(let i=0; i<name.length;i++){
			 	document.write(name[i])
			  }
		</script>
	</body>
</html>

案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<script>
		   //1·求数组 [2,6,8,5,9] 里面所有元素的和以及平均值
			 let sum = 0
			let name = [2,6,8,5,9]
			 for(let i=0; i<name.length;i++){
			 	 sum +=name[i]
			  }
			  console.log(sum/name.length)
			//2.求数组 [2,6,1,77,52,25,7]中的最大值  
              let num = [2,6,1,77,52,25,7]  
			  let max = num[0]
			  for(let i =1; i<num.length;i++){
				  if(max<num[i]){
					  max = num[i]
				  }
			  }
			  console.log(max)
		</script>
	</body>
</html>

4.2操作数组

数组本质是数据集合, 操作数据无非就是增删改查语法：

4.2.1增

数组.push(新增的内容) 方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度

数组.unshift(新增的内容) 方法将一个或多个元素添加到数组的开头，并返回该数组的新长度

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<script>
			let name= ['小明','小红']
			name.push('小张')
			name.unshift('小米')
			console.log(name)
		</script>
	</body>
</html>

案例：

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	筛选数组
	<script>
		//1.将数组 [2, 0, 6, 1, 77, 0, 52, 0, 25, 7] 中的 0 去掉后，形成一个不包含 0 的新数组
		let arr = [2,0,6,1,77,0,52,0,52,7]
		let newarr = []
		for(let i=0;i<arr.length;i++){
			if(arr[i]!=0){
				newarr.push(arr[i])
			}
		}
		//2.将数组 [2, 0, 6, 1, 77, 0, 52, 0, 25, 7] 中大于等于 10 的元素选出来，放入新数组
		console.log(newarr)
		let arr = [2,0,6,1,77,0,52,0,52,7]
		let newarr = []
		for(let i=0;i<arr.length;i++){
			if(arr[i]!=0){
				newarr.push(arr[i])
			}
		}
		console.log(newarr)
	</script> -->

4.2.2删

数组. pop() 方法从数组中删除最后一个元素，并返回该元素的值

数组. shift() 方法从数组中删除第一个元素，并返回该元素的值

数组. splice() 方法删除指定元素

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	 
	<script>  
	 //删除最后一个/第一个数值
	 let arr = [2,0,6,1,77,0,52,0,52,7]
	 //删除最后一个数值
	 arr.pop()
	 //删除第一个数值
	 arr.shift()
	 //删除指定数值
	 arr.splice(2,3)
	 console.log(arr)
	 </script>

需求使用场景：

1. 随机抽奖，中奖的用户就需要从数组里面删除，不允许重复抽奖

2. 点击删除按钮，相关的数据会从商品数据中删除

3.splice 开发很常用，比如随机抽奖，比如删除指定商品等等