【前端】JavaScript入门及实战51-55

子非鱼921

于 2024-07-21 13:27:25 发布

阅读量372

点赞数 8

分类专栏：前端-JavaScript 文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/weixin_45980065/article/details/140586879

版权

前端-JavaScript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

文章目录

51 函数
52 函数的参数
53 返回值
54 练习
55 return

51 函数

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset = "utf-8">
<script type="text/javascript">
	/*	
		函数：
			1. 函数也是一个对象
			2. 函数中可以封装一些功能（代码），在需要时可以执行这些功能（代码）
			3. 函数中可以保存一些代码在需要的时候调用
			4. 使用typeof检查一个函数对象时，会返回function		
	*/
	
	{
		console.log("我是第一行");
		console.log("我是第二行");
		console.log("我是第三行");
	}
		
	// 我们在实际开发中很少使用构造函数来创建一个函数对象
	// 创建一个函数对象
	// 可以将要封装的代码以字符串的形式传递给构造函数
	var fun = new Function("console.log('hello 这是第一个函数');");
	
	// 封装到函数的代码不会立即执行
	// 函数中的代码会在函数调用的时候执行
	// 调用函数：语法：函数对象()
	// 当调用函数时，函数中封装的代码会按照顺序执行
	fun();
	
	fun.hello = "你好";
	
	/*
		使用函数声明来创建一个函数（[]代表可选的）
		语法：function 函数名([形参1，形参2，...，形参N]){
					语句。。。
		
			  }
	*/
	
	function fun2(){
		console.log("hello 这是第二个函数");
		alert("哈哈哈");
		document.write("啦啦啦");
	}
	
	// console.log(log2);
	fun2();
	
	/*
		使用函数表达式来创建一个函数
		var 函数名 = function([形参1，形参2，...，形参N]){
				语句。。。		
		}
	*/
	
	// 匿名函数
	function(){
		console.log("我是匿名函数");
	}
	
	// 给变量赋值（函数）
	var fun3 = function(){
		console.log("我是匿名函数");
	};
	
	fun3();
</script>
<style>
</style>
</head>
<body>
</body>
</html>

52 函数的参数

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset = "utf-8">
<script type="text/javascript">
	/*	
		定义一个用来求两个数和的函数
		可以在函数的()中指定一个或多个形参（形式参数）
		多个形参之间使用“,”隔开，声明形参就相当于在函数内部声明了对应的变量
		但是并不赋值		
	*/
	
	function sum(a, b){
		console.log(a + b);
	}
	
	/*
		在调用函数时，可以在()中指定实参（实际参数）
		实参将会赋值给函数中对应的实参
	*/
	sum(1, 1);

	/*
		调用函数时解析器不会检查实参的类型
		要注意，是否有可能接收到非法的参数，如果有可能则需要对参数进行类型的检查
		函数的实参可以是任意的数据类型
	*/
	sum(123, "hello"); // 123hello
	sum(true, false); // 1
	
	/*
		调用函数时，解析器也不会检查实参的数量
		多余实参不会被赋值
		如果实参的数量少于形参的数量，则没有对象实参的形参将是undefined
	*/
	sum(123, 456, true, null);
	sum(123); // NaN，123 + undefined
</script>
<style>
</style>
</head>
<body>
</body>
</html>

53 返回值

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset = "utf-8">
<script type="text/javascript">
	/*	
		创建一个函数，用来计算三个数的和
		
		可以使用return设置函数的返回值
		语法：return 值
		
		return后的值将会作为函数的执行结果返回
		可以定义一个变量来接收该结果
		
		在函数中return后的语句都不会执行
		如果return语句后不跟任何值就相当于返回一个undefined
		如果函数中不写return，则也会返回undefined
	*/
	
	function sum(a, b, c){
		//alert(a + b + c);
		var d = a + b + c;
		return d;
	}
	
	// 调用函数
	// 变量res的值就是函数的执行结果
	// 函数返回什么res的值就算什么
	var res = sum(4, 8, 9);
	
	var result = alert("hello"); // 没有返回值，返回undefined
</script>
<style>
</style>
</head>
<body>
</body>
</html>

54 练习

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset = "utf-8">
<script type="text/javascript">
	/*	
		定义一个函数，判断一个数字是否是偶数，如果是返回true，否则返回false	
	*/
	
	function judge(a){
		return a % 2 == 0;
	}
	
	var res = judge(2);
	
	/*
		定义一个函数，可以根据半径计算一个圆的面积，并返回计算结果
	*/
	
	function s(r){
		return r * r * Math.PI;
	}
	
	/*
		创建一个函数，可以在控制台中输出一个人的信息
		可以输出人的name age gender address
		
		实参可以是任意的数据类型，也可以是一个对象
		当我们的实参过多时，可以将参数封装到一个对象中，然后通过对象传递
	*/
	
	function sayHello(name, age, gender, address){
		console.log("我是 "+ name + ",今年我" + age + "岁了，" + "我是一个" + gender + "人，" + "我住在" + address);
	}
	sayHello("猪八戒", 28, "男", "高老庄");
	
	//创建一个对象
	var obj = {
		name: "孙悟空",
		age: 18,
		gender: "男",
		address: "花果山"
	};
	
	function sayHello(o){
		console.log("我是 "+ o.name + ",今年我" + o.age + "岁了，" + "我是一个" + o.gender + "人，" + "我住在" + o.address);
	}
	
	sayHello(obj);
	
	/*
		实参可以是一个对象，也可以是一个函数
	*/
	
	function fun(a){
		//a(obj);
		console.log(a);
	}
	
	fun(sayHello);
	
	fun(function(){alert("hello")})
	
	fun(s); // s：函数对象
	fun(s(10)); //s()：调用函数，函数返回值作为参数传入
</script>
<style>
</style>
</head>
<body>
</body>
</html>

55 return

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset = "utf-8">
<script type="text/javascript">
	/*	
		使用break可以退出当前循环
		使用continue可以跳过当次循环
		使用return可以结束整个函数
	*/
	
	/*
		返回值可以是任意的数据类型
		也可以是一个对象，也可以是一个函数
	*/
	
	function fun(){
		var obj = {name: "沙和尚"};
		return obj
	}
	var a = fun();
	console.log(a.name); // 沙和尚
	
	function fun2(){
		//在函数内部声明一个函数
		function fun3(){
			alert("我是fun3");
		}
		//fun3();
		return fun3;
		//return fun3(); // 返回alert()也就是undefined
	}
	a = fun2(); // a是fun3()
	
	a(); // 执行alert
	fun2()(); // 同上	
</script>
<style>
</style>
</head>
<body>
</body>
</html>

子非鱼921

关注

8
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
【前端】JavaScript入门及实战51-55

定义一个函数，判断一个数字是否是偶数，如果是返回true，否则返回false。var 函数名 = function([形参1，形参2，...，形参N]){如果实参的数量少于形参的数量，则没有对象实参的形参将是undefined。语法：function 函数名([形参1，形参2，...，形参N]){当我们的实参过多时，可以将参数封装到一个对象中，然后通过对象传递。定义一个函数，可以根据半径计算一个圆的面积，并返回计算结果。// 当调用函数时，函数中封装的代码会按照顺序执行。
复制链接

扫一扫