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

文章目录

  • [51 函数](#51 函数)
  • [52 函数的参数](#52 函数的参数)
  • [53 返回值](#53 返回值)
  • [54 练习](#54 练习)
  • [55 return](#55 return)

51 函数

html 复制代码
<!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 函数的参数

html 复制代码
<!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 返回值

html 复制代码
<!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 练习

html 复制代码
<!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

html 复制代码
<!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>
相关推荐
IT技术分享社区3 分钟前
C#实战:使用腾讯云识别服务轻松提取火车票信息
开发语言·c#·云计算·腾讯云·共识算法
极客代码6 分钟前
【Python TensorFlow】入门到精通
开发语言·人工智能·python·深度学习·tensorflow
疯一样的码农12 分钟前
Python 正则表达式(RegEx)
开发语言·python·正则表达式
光影少年15 分钟前
vue2与vue3的全局通信插件,如何实现自定义的插件
前端·javascript·vue.js
As977_16 分钟前
前端学习Day12 CSS盒子的定位(相对定位篇“附练习”)
前端·css·学习
susu108301891118 分钟前
vue3 css的样式如果background没有,如何覆盖有background的样式
前端·css
Ocean☾20 分钟前
前端基础-html-注册界面
前端·算法·html
Rattenking20 分钟前
React 源码学习01 ---- React.Children.map 的实现与应用
javascript·学习·react.js
Dragon Wu22 分钟前
前端 Canvas 绘画 总结
前端
CodeToGym27 分钟前
Webpack性能优化指南:从构建到部署的全方位策略
前端·webpack·性能优化