js基础:06、函数(创建函数、参数、返回值、return、立即执行函数、对象(函数))和枚举对象的属性

javascript 的函数及枚举操作:

Ⅰ、创建函数:

其一、代码为:

html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			/*
			 * 函数 function
			 * 	- 函数也是一个对象
			 * 	- 函数中可以封装一些功能(代码),在需要时可以执行这些功能(代码)
			 * 	- 函数中可以保存一些代码在需要的时候调用
			 * 	- 使用 typeof 检查一个函数对象时,会返回 function
			 */
			


			//我们在实际开发中很少使用构造函数来创建一个函数对象(即:方式一)
			//创建一个函数对象
			//可以将要封装的代码以字符串的形式传递给构造函数
			var fun = new Function("console.log('Hello 这是我的第一个函数');");
			
			//封装到函数中的代码不会立即执行
			//函数中的代码会在函数调用的时候执行
			//调用函数 语法:函数对象()(如:fun())
			//当调用函数时,函数中封装的代码会按照顺序执行

			// fun();// Hello 这是我的第一个函数
			


			/*
			 * 使用 函数声明 来创建一个函数(即:方式二)
			 * 	语法:
			 * 		function 函数名([形参1,形参2...形参N]){
			 * 			语句...
			 * 		}
			 */
			
			function fun2(){
				console.log("这是我的第二个函数~~~");
				alert("哈哈哈哈哈");
				document.write("~~~~(>_<)~~~~");
			}
			
			// console.log(fun2);// ƒ fun2(){......}
			//调用 fun2
			// fun2();// 会有输出:这是我的第二个函数~~~,随后有弹窗和页面数据显示;
			



			/*
			 * 使用 函数表达式 来创建一个函数(即:方式三)
			 * var 函数名  = function([形参1,形参2...形参N]){
			 * 	 语句....
			 *  }
			 */
			
			var fun3 = function(){
				console.log("我是匿名函数中封装的代码");
			};
			
			
			fun3();// 我是匿名函数中封装的代码
			
		</script>
	</head>
	<body>
	</body>
</html>

其二、结果为:

// 一进入页面后的控制台:

// 其它情况的验证:

Ⅱ、函数参数:

其一、代码为:

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


			/*
			 * 调用函数时解析器不会检查实参的类型,
			 * 	所以要注意,是否有可能会接收到非法的参数,如果有可能则需要对参数进行类型的检查
			 * 函数的实参可以是任意的数据类型
			 */
			// sum(123,"hello");// a = 123   b = hello   123hello
			// sum(true , false);// a = true  b = false  1
			


			/*
			 * 调用函数时,解析器也不会检查实参的数量
			 * 	多余实参不会被赋值
			 * 如果实参的数量少于形参的数量,则没有对应实参的形参将是 undefined
			 * 
			 */
			// sum(123,456,"hello",true,null);// a = 123   b = 456   579
			sum(123);// a = 123   b = undefined   NaN
			
		</script>
	</head>
	<body>
	</body>
</html>

其二、结果为:

// 一进入页面后的控制台:

Ⅲ、函数返回值:

其一、代码为:

html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript">
			
			/*
			 * 创建一个函数,用来计算三个数的和
			 * 
			 * 可以使用 return 来设置函数的返回值
			 * 	语法:
			 * 		return 值
			 * 
			 * 	return 后的值将会会作为函数的执行结果返回,
			 * 		可以定义一个变量,来接收该结果
			 * 
			 *  在函数中 return 后的语句都不会执行
			 * 
			 * 	如果 return 语句后不跟任何值就相当于返回一个 undefined,(如:return; 此时就返回一个 undefined)
			 * 	如果函数中不写 return,则也会返回 undefined
			 * 
			 * 	return 后可以跟任意类型的值
			 * 
			 */
			function sum(a , b , c){
				//alert(a + b +c);
				
				var d = a + b + c;
				
				return d;
				
				//return undefined;
				
			}
			


			//调用函数
			//变量 result 的值就是函数的执行结果
			//函数返回什么 result 的值就是什么
			var result = sum(4,7,8);
			
			//var result = alert("hello");
			
			console.log("result = "+result);// 
			
			
		</script>
	</head>
	<body>
		
	</body>
</html>

其二、结果为:

// 一进入页面后的控制台:

Ⅳ、3个函数使用的案例:

其一、代码为:

html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			/*
			 * 定义一个函数,判断一个数字是否是偶数,如果是返回 true,否则返回 false
			 */
			
			function isOu(num){
				
				return num % 2 == 0;//精简代码的体现;
			}
			
			var result = isOu(15);
			
			// console.log("result = "+result);// result = false
			


			
			/*
			 * 定义一个函数,可以根据半径计算一个圆的面积,并返回计算结果
			 * 3.14*r*r
			 */
			function mianji(r){
				
				return 3.14*r*r;
				
			}
			
			result = mianji(5);
			
			// console.log("result = "+result);// result = 78.5
			


			
			/*
			 * 创建一个函数,可以在控制台中输出一个人的信息
			 * 	可以输出人的 name age gender address
			 * 
			 * 实参可以是任意的数据类型,也可以是一个对象
			 * 	当我们的参数过多时,可以将参数封装到一个对象中,然后通过对象传递
			 */
			function sayHello(o){
				
				//console.log("o = "+o);
				console.log("我是"+o.name+",今年我"+o.age+"岁了,"+"我是一个"+o.gender+"人"+",我住在"+o.address);
			}
			
			// sayHello("猪八戒",28,"高老庄","男");// 我是undefined,今年我undefined岁了,我是一个undefined人,我住在undefined

			//创建一个对象
			var obj = {
				name:"孙悟空",
				age:18,
				address:"花果山",
				gender:"男"
				
			};
			// sayHello(obj);// 我是孙悟空,今年我18岁了,我是一个男人,我住在花果山



			
			/*
			 * 实参可以是一个对象,也可以是一个函数(注意:函数也是对象)
			 */
			
			function fun(a){
				console.log("a = "+a);
				//a(obj);
			}
			
			// fun(sayHello);//此时就将 sayHello 函数,作为实参传递下去(输出结果为:a = function sayHello(o){......})
			
			// fun(function(){alert("hello")});// a = function(){alert("hello")}
			
			fun(mianji(10));// a = 314
			
			

			/*
			 * mianji()
			 * 	- 调用函数
			 * 	- 相当于使用的函数的返回值
			 * 
			 * mianji
			 * 	- 函数对象
			 * 	- 相当于直接使用函数对象
			 */
			
		</script>
	</head>
	<body>
	</body>
</html>

其二、结果为:

// 一进入页面后的控制台:

Ⅴ、return 使用:

其一、代码为:

html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			function fun(){
				alert("函数要执行了~~~~");
				
				for(var i=0 ; i<5 ; i++){
					
					
					if(i == 2){
						//使用 break 可以退出当前的循环
						// break;
						
						//continue 用于跳过当次循环
						// continue;
						
						//使用 return 可以结束整个函数
						// return;
					}
					
					console.log(i);
				}
				
				alert("函数执行完了~~~~");
			}
			
			// fun();// 在 break/continue/return 情况下,显示情况是不同的;


			
			
			/*
			 * 返回值可以是任意的数据类型
			 * 	也可以是一个对象,也可以是一个函数
			 */
			function fun2(){
				
				//返回一个对象
				return {name:"沙和尚"};
			}
			
			var a = fun2();
			
			// console.log("a = "+a);// a = [object Object]
			
			function fun3(){
				//在函数内部再声明一个函数
				function fun4(){
					alert("我是fun4");
				}
				
				//将 fun4 函数对象作为返回值返回
				return fun4;
			}
			
			a = fun3();
			// console.log(a);// ƒ fun4(){ alert("我是fun4"); }
			// a();// 弹窗显示:我是 fun4
			fun3()();// 弹窗显示:我是 fun4
			
		</script>
	</head>
	<body>
	</body>
</html>

其二、结果为:

// 一进入页面后的控制台:

Ⅵ、立即执行函数:

其一、代码为:

html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			
			//函数对象()	
			/*
			 * 立即执行函数
			 * 	函数定义完,立即被调用,这种函数叫做立即执行函数
			 * 	立即执行函数往往只会执行一次
			 */
			/*(function(){
				alert("我是一个匿名函数~~~");
			})();*/
			
			(function(a,b){
				console.log("a = "+a);
				console.log("b = "+b);
			})(123,456);// a = 123   b = 456
			
		</script>
	</head>
	<body>
	</body>
</html>

其二、结果为:

// 一进入页面后的控制台:

Ⅶ、函数在对象中的使用:

其一、代码为:

html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			/*
			 * 创建一个对象
			 */
			var obj = new Object();
			
			//向对象中添加属性
			obj.name = "孙悟空";
			obj.age = 18;
			
			//对象的属性值可以是任何的数据类型,也可以是个函数
			obj.sayName = function(){
				console.log(obj.name);
			};
			
			function fun(){
				console.log(obj.name);
			};
			
			// console.log(obj.sayName);// ƒ (){ console.log(obj.name); }
			//调方法
			obj.sayName();// 孙悟空
			//调函数
			// fun();// 孙悟空
			


			/*
			 * 函数也可以称为对象的属性,
			 * 	如果一个函数作为一个对象的属性保存,
			 * 	那么我们称这个函数时这个对象的方法
			 * 	调用这个函数就说调用对象的方法(method)
			 * 
			 * 但是它只是名称上的区别没有其他的区别(即:调函数与调方法只是名称的区别,并没有其它本质的区别)
			 * 
			 */
			
			var obj2 = {
				
				name:"猪八戒",
				age:18,
				sayName:function(){
					console.log(obj2.name);
				}
				
			};
			
			obj2.sayName();// 猪八戒
			
			
			
		</script>
	</head>
	<body>
	</body>
</html>

其二、结果为:

// 一进入页面后的控制台:

Ⅷ、枚举对象中的属性:

其一、代码为:

html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			var obj = {
						name:"孙悟空",
						age:18,
						gender:"男",
						address:"花果山"
					 };
					 
			//枚举对象中的属性
			//使用 for ... in 语句
			/*
			 * 语法:
			 * 	for(var 变量 in 对象){
			 * 	
			 *  }
			 * 
			 * for...in 语句 对象中有几个属性,循环体就会执行几次
			 * 	每次执行时,会将对象中的一个属性的名字赋值给变量(即:赋值给变量 n)
			 */
			
			for(var n in obj){
				console.log("属性名:"+n);
				
				console.log("属性值:"+obj[n]);//此时要是执行 obj.n 返回值为 undefined,因为在 obj 中并没有 n 这个属性值(即:在 obj.n 中并不将 n 识别为变量)
																		 //注意:要是传值为 obj['n'] 也会返回 undefined,因为其效果与 obj.n 是一样的,因为在 obj 中并没有 n 这个属性值(即:在 obj['n'] 中并不将 n 识别为变量)

																		 // 输出结果为:
																		 // 属性名:name
																		 // 属性值:孙悟空
																		 // 属性名:age
																		 // 属性值:18
																		 // 属性名:gender
																		 // 属性值:男
																		 // 属性名:address
																		 // 属性值:花果山
			}
			
			
			
		</script>
	</head>
	<body>
	</body>
</html>

其二、结果为:

// 一进入页面后的控制台:

Ⅸ、小结:

其一、哪里有不对或不合适的地方,还请大佬们多多指点和交流!
其二、若有转发或引用本文章内容,请注明本博客地址(直接点击下面 url 跳转) https://blog.csdn.net/weixin_43405300,创作不易,且行且珍惜!
其三、有兴趣的话,可以多多关注这个专栏(Vue(Vue2+Vue3)面试必备专栏)(直接点击下面 url 跳转):https://blog.csdn.net/weixin_43405300/category_11525646.html?spm=1001.2014.3001.5482
其四、再有兴趣的话,也可以多多关注这个专栏(Java)(直接点击下面 url 跳转):https://blog.csdn.net/weixin_43405300/category_12654744.html?spm=1001.2014.3001.5482

相关推荐
sulikey4 小时前
【C++ STL 深入解析】insert 与 emplace 的区别与联系(以 multimap 为例)
开发语言·c++·stl·stl容器·insert·emplace
一枚前端小能手4 小时前
🔄 重学Vue之依赖注入(provide、inject)
前端·javascript·vue.js
Mintopia5 小时前
🧩 未成年人保护视角:WebAIGC内容的分级过滤技术
前端·javascript·aigc
墨白曦煜5 小时前
Java集合框架整体分类(完整的集合框架关系)
java·开发语言
Mintopia5 小时前
🌌 Three.js 几何变化动画配合噪声粒子教程:让你的代码也会“呼吸”
前端·javascript·three.js
YuanlongWang5 小时前
C# 基础——async/await 的实现原理与最佳实践
开发语言·c#
kkkkk0211065 小时前
JavaScript性能优化实战:深度剖析瓶颈与高效解决方案
开发语言·javascript·性能优化
亿元程序员5 小时前
每次游戏卡的时候,策划总问:是不是DrawCall太高了?
前端
围巾哥萧尘5 小时前
AI IDE 编辑器产品销售策略:从功能宣讲到赋能用户盈利的范式转变[特殊字符]
经验分享