javascript 的函数及枚举操作:
- Ⅰ、创建函数:
- Ⅱ、函数参数:
- Ⅲ、函数返回值:
- Ⅳ、3个函数使用的案例:
- [Ⅴ、return 使用:](#Ⅴ、return 使用:)
- Ⅵ、立即执行函数:
- Ⅶ、函数在对象中的使用:
- Ⅷ、枚举对象中的属性:
- Ⅸ、小结:
Ⅰ、创建函数:
其一、代码为:
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