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

相关推荐
Mr_sun.2 分钟前
Day09——入退管理-入住-2
android·java·开发语言
MAGICIAN...13 分钟前
【java-软件设计原则】
java·开发语言
Ticnix14 分钟前
ECharts初始化、销毁、resize 适配组件封装(含完整封装代码)
前端·echarts
纯爱掌门人17 分钟前
终焉轮回里,藏着 AI 与人类的答案
前端·人工智能·aigc
twl21 分钟前
OpenClaw 深度技术解析
前端
gpfyyds66621 分钟前
Python代码练习
开发语言·python
崔庆才丨静觅24 分钟前
比官方便宜一半以上!Grok API 申请及使用
前端
星光不问赶路人32 分钟前
vue3使用jsx语法详解
前端·vue.js
天蓝色的鱼鱼36 分钟前
shadcn/ui,给你一个真正可控的UI组件库
前端
盐真卿37 分钟前
python第八部分:高级特性(二)
java·开发语言