JavaScript函数
- 1 本节目标
- 2 函数的概念
- 3 函数的使用
- 3.1 声明函数
- 3.2 调用函数
- 3.3 函数的封装
- 4 函数的参数
- 4.1 形参和实参
- 4.2 执行过程
- 4.3 注意点
- 4.4 函数形参和实参个数不匹配问题
- 5 函数的返回值
- 5.1 return语句
- 5.2 函数返回值注意事项
- 5.3 break,continue,return的区别
- 6 arguments的使用
- 7 函数的两种声明方式
1 本节目标
- 说出为什么需要函数
- 根据语法书写函数
- 根据需求封装函数
- 说出形参和实参的传递过程
- 使用函数的返回值
- 使用arguments获取函数的参数
2 函数的概念
- 函数:就是封装了一段可被重复调用执行的代码块。通过此代码块可以实现大量代码的重复使用。
3 函数的使用
- 函数在使用时分为两步:声明函数和调用函数。
3.1 声明函数
// 1.声明函数
function 函数名() {
// 函数体
}
// 举例:
function sayHi() {
console.log('hi~~');
}
// 注意:
// function声明函数的关键字 全部小写
// 函数是做某件事情,函数名一般是动词 sayHi
// 函数不调用,自己不执行
3.2 调用函数
// 2.调用函数
函数名();
// 举例:
sayHi();
// 注意:
// 调用函数的时候千万不要忘记加小括号
// 声明函数本身并不会执行代码,只有调用函数时才会执行函数体代码
3.3 函数的封装
- 函数的封装是把一个或多个功能通过函数的方式封装起来,对外只提供一个简单的函数接口。
- 简单理解:封装类似于将电脑配件整合组装到机箱中(类似快递打包)。
4 函数的参数
4.1 形参和实参
- 函数的参数可以有,也可以没有,个数不限。
- 形参:函数定义的时候传递的参数,当前并不知道是什么,默认值为undefined。
- 实参:函数调用的时候传递的参数,实参是传递给形参的。
- 参数的作用:在函数内部某些值不能固定,我们可以通过参数在调用函数时传递不同的值进去。
// 在声明函数的小括号里面是形参(形式上的参数)
function 函数名(形参1,形参2...) {
}
// 在函数调用的小括号里面是实参(实际的参数)
函数名(实参1,实参2...);
4.2 执行过程
// 举例:
// 形参是接收实参的 隐含:aru = '酸辣土豆丝'; 形参类似于一个变量
function cook(aru) {
console.log(aru);
}
cook('酸辣土豆丝');
4.3 注意点
- 多个参数之间用逗号隔开。
- 形参可以看作是不用声明的变量。
4.4 函数形参和实参个数不匹配问题
5 函数的返回值
5.1 return语句
- 有时我们希望函数将值返回给调用者,此时通过使用return语句就可以实现。
- 函数的返回值格式:
function 函数名() {
return 需要返回的结果;
}
函数名();
- 代码体验:
function getResult() {
return 666;
}
// getResult(); // getResult() = 666 实现赋值操作
console.log(getResult());
// 求任意两个数的和
function getSum(num1,num2) {
return num1 + num2;
}
console.log(getSum(1,2));
5.2 函数返回值注意事项
- 函数返回值注意事项:
1>return终止函数:return语句之后的代码不被执行。
2>return的返回值:return只能返回一个值,如果用逗号隔开多个值,以最后一个为准。想要输入多个值,可以变相实现,比如利用数组、对象等方式。
3>函数没有return,返回undefined:函数都是有返回值的。如果有return,则返回return后面的值;如果没有return,则返回undefined。
5.3 break,continue,return的区别
- break:结束当前的循环体(如for、while)
- continue:跳出本次循环,继续执行下次循环(如for、while)
- return:不仅可以退出循环,还能够返回return语句中的值,同时还可以结束当前的函数体内的代码
6 arguments的使用
- 当我们不确定有多少个参数传递的时候,可以用arguments来获取。在JavaScript中,arguments实际上它是当前函数的一个内置对象。所有函数都内置了一个arguments对象,arguments对象中存储了传递的所有实参。
- 只有函数才有arguments对象。
- arguments展示形式是一个伪数组,因此可以进行遍历。伪数组具有以下特点:
1>具有length属性
2>按索引方式存储数据
3>不具有数组的push(),pop()等方法
7 函数的两种声明方式
- 利用函数关键字自定义函数
// 1.利用函数关键字自定义函数(命名函数)
function fn() {
}
fn();
- 利用函数表达式
// 2.函数表达式(匿名函数)
var 变量名 = function() {}
变量名();
var fun = function(aru) {
console.log('我是函数表达式');
console.log(aru);
}
fun('小王同学');
- 注意:
1>fun是变量名,不是函数名;
2>函数表达式声明方式跟声明变量差不多,只不过变量里面存的是值,而函数表达式里面存的是函数;
3>函数表达式也可以传递参数。