当前位置：首页 > news >正文

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

news 2025/10/24 7:36:14

javascript 的函数及枚举操作：

Ⅰ、创建函数：
- 其一、代码为：
- 其二、结果为：
Ⅱ、函数参数：
- 其一、代码为：
- 其二、结果为：
Ⅲ、函数返回值：
- 其一、代码为：
- 其二、结果为：
Ⅳ、3个函数使用的案例：
- 其一、代码为：
- 其二、结果为：
Ⅴ、return 使用：
- 其一、代码为：
- 其二、结果为：
Ⅵ、立即执行函数：
- 其一、代码为：
- 其二、结果为：
Ⅶ、函数在对象中的使用：
- 其一、代码为：
- 其二、结果为：
Ⅷ、枚举对象中的属性：
- 其一、代码为：
- 其二、结果为：
Ⅸ、小结：

Ⅰ、创建函数：

其一、代码为：


<!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>

其二、结果为：

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

在这里插入图片描述

// 其它情况的验证：

在这里插入图片描述

Ⅱ、函数参数：

其一、代码为：


<!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   579sum(123);// a = 123   b = undefined   NaN</script></head><body></body>
</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个函数使用的案例：

其一、代码为：


<!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 使用：

其一、代码为：


<!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();// 弹窗显示：我是 fun4fun3()();// 弹窗显示：我是 fun4</script></head><body></body>
</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>

其二、结果为：

// 一进入页面后的控制台：
在这里插入图片描述

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

其一、代码为：


<!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>

其二、结果为：

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

在这里插入图片描述

Ⅷ、枚举对象中的属性：

其一、代码为：


<!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

查看全文

http://www.dtcms.com/a/519623.html