第六次网页前端培训笔记（JS基础语法）-CSDN博客

本文链接：https://blog.csdn.net/m0_52665223/article/details/122867170

本文深入解析JavaScript中的运算符、控制语句（包括条件、循环）、数组的定义、操作、遍历和方法，以及函数的定义、参数、调用和返回值，讲解了核心概念并配以实例演示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

运算符

1.算数运算符

2.赋值运算符

3.比较运算符

4.逻辑运算符

控制语句

1.条件语句

if 语句

if...else 语句

if...else if...else 语句

switch 语句

2.循环语句

for 循环

while 循环

do/while 循环

数组

1.数组的定义

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var arr1 = [];
			console.log(arr1);
			var arr2=[1,2,'a',true];
			console.log(arr2);
			
			var arr3 = new Array(1,2,3);
			console.log(arr3);
			
			var arr4 = new Array (5);
			console.log(arr4);
		</script>
	</body>
</html>

2.数组的操作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			console.log(arr2[1]);
			console.log(arr2[10]);
			arr2[1] = 20;
			console.log(arr2);
			arr2[10] = 100;
			console.log(arr2);
            console.log(arr3.length);
			arr3.length = 5;
			console.log(arr3);
		</script>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			arr3.name = "zhangsan";
			console.log(arr3);
			arr3["pwd"] = "123456";
			console.log(arr3);
			console.log(arr3["name"]);
		</script>
	</body>
</html>

3.数组遍历

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			console.log(arr3);
			for(var i in arr3){
				console.log("下标：" + i + "值：" +arr3[i]);
			}
			arr3.forEach(function(element,index){
				console.log("下标：" +i + "值：" +arr3[i]);
			})
		</script>
	</body>
</html>

4.数组提供的方法

函数

1.函数的定义

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			function fn1(a,b){
				console.log(a+b);
			}
			console.log(fn1);
			var fn2=function(a,b){
				console.log(a+b);
			}
			console.log(fn2);
			var fn3=new Function('a','b','return(a+b)');
			console.log(fn3);
			function fn4(a,b){
				return(a+b);
			}
		</script>
	</body>
</html>

2.函数的参数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
		    function test1(x,y){
				console.log(x+y);
			}
			test1();
			test1(1);
			test1(1,2);
			function test2(x,x){
				console.log(x);
			}
			test2(1,2);
			function test3(x){
				x = x||"x";
				console.log(x);
			}
			test3(10);
			test3();
			function test4(x){
				(x!=null&&x!=undefined)?x = x:x="x";
				console.log(x);
			}
			test4();
			test4("Hello");
		</script>
	</body>
</html>

3.函数的调用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			function f1(){
				console.log("常用调用模式")；
			}
			f1();
			
			var f2 = function(a){
				console.log("函数调用模式");
				return a;
			}
			var num1=f2(1);
			console.log(num1);
			var obj = {
				name:"zhangsan",
				age:18,
				sex:true,
				cats:["大毛","二毛"],
				dog:{
					name:"张二狗",
					age:1
				},
				sayHello:function(){
					console.log("你好呀~");
				}
			}
			console.log(obj);
			console.log(obj.dog);
			console.log(obj.sayHello());
			obj.sayHello()
		</script>
	</body>
</html>

4.函数的返回值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			function a1(){
				console.log("没有返回值");
				return;
				console.log('.......');
			}
			console.log(a1());
			
			function a2(){
				console.log("有返回值");
				return "test";
			}
			console.log(a2());
		</script>
	</body>
</html>

5.函数的作用域

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var pp="Hello";
			function qq(){
				var box = 10;
				box2 = 20;
			}
			qq();
			console.log(pp);
			console.log(box);
			console.log(box2);
		</script>
	</body>
</html>