2022-05-31
十一、JS函数
1、 函数的概念
在JS里面,可能会定义非常多的相同代码或者功能相似的代码,这些代码可能需要大量重复使用。
虽然for循环语句也能实现一些简单的重复操作,但是比较具有局限性,此时我们就可以使用JS中的函数。
函数 ∶ 就是封装了一段可被重复调用执行的代码块。通过此代码块可以实现大量代码的重复使用。
2、 函数的使用
(1) 声明函数
// 1.声明函数
// function函数名(){
// //函数体
// }
function sayHi() {
console.log( ' hi~~ ');
}
function是声明函数的关键字,必须小写
由于函数一般是为了实现某个功能才定义的,所以通常我们将函数名命名为动词,比如getSum
(2) 调用函数
// 2.调用函数
//函数名();
sayHi();
调用的时候千万不要忘记添加小括号
函数不调用,自己不执行。
3、 函数的参数
(1)形参与实参
在声明函数时,可以在函数名称后面的小括号中添加一些参数,这些参数被称为形参,而在调用该函数时,同样也需要传递相应的参数,这些参数被称为实参。
参数说明
形参形式上的参数,函数定义的时候传递的参数,当前并不知道是什么
实参实际上的参数 ,函数调用的时候传递的参数,实参是传递给形参的
参数的作用 : 在函数内部某些值不能固定,我们可以通过参数在调用函数时传递不同的值进去
// 1.函数可以重复相同的代码
function cook() {
console.log('酸辣土豆丝');
}
cook();
cook();
// 2.我们可以利用函数的参数实现函数重复不同的代码
function函数名(形参1,形参2...){//在声明函数的小括号里面是形参(形式上的参数)
}
函数名(实参1,实参2...);//在函数调用的小括号里面是实参(实际的参数)
// 3.形参和实参的执行过程
function cook(aru){ //形参是接受实参的 aru = '酸辣土豆丝’ 形参类似于一个变量
console.log(aru);
}
cook("酸辣土豆丝');
(2)函数形参与实参个数不匹配问题
参数个数说明
实参个数等于形参个数输出正常结果
实参个数多余形参个数只取到形参个数
实参个数小于形参个数多的形参定义为 undefined ,结果为 NaN
function sum (num1,num2){
console.log(num1 + num2);
}
sum ( 100,200) ;//形参和实参个数相等,输出正确结果
sum(100,400,500,700);//实参个数多于形参,只取到形参的个数
sum(200) ;//实参个数少于形参,多的形参定义为 undefined ,结果为 NaN
注意 : 在JavaScript中,形参的默认值是 undefined.
4、 函数的返回值
(1)return 语句
有的时候,我们会希望函数将值返回给调用者,此时通过使用return语句就可以实现。
(2)return 终止函数
return 语句之后的的代码不被执行
(3)return 的返回值
return 只能返回一个值,如果用逗号隔开多个值,以最后一个为准、
(4)函数没有 return 返回 undefined
函数都是有返回值的
如果有 return 返回 return 后面的值
如果没有 return 则返回 undefined
5、 arguments 的使用
当我们不确定有多少个参数传递的时候,可以用arguments来获取。在JavaScript中,arguments实际上它是当前函数的一个内置对象。所有函数都内置了一个arguments对象,arguments对象中存储了传递的所有实参。
arguments展示形式是一个伪数组,因此可以进行遍历。伪数组具有以下特点:
具有length属性
按索引方式储存数据
不具有数组的push , pop等方法
//利用函数求任意个数的最大值
function getMax() { // arguments = [1,2,3]
var max = arguments[0];
for (var i = 1; i < arguments.length; i++) {
if (arguments[i] > max) {
max = arguments[i];
}
}
return max;
}
console.log(getMax( 1,2,3));
console.log(getMax(1,2,3,4,5));
console.log(getMax(11,2,34,444,5,100));
// 利用 arguments 可以求任意个数
6、 函数的两种声明方式
(1)利用函数关键字自定义函数(命名函数)
function fn(){
}
fn();
(2)函数表达式(匿名函数)
var fun = function(){
}
fun();
// (1)fun是变量名不是函数名
// (2)函数表达式声明方式跟声明变量差不多,只不过变量里面存的是值而函数表达式里面存的是函数
// (3)函数表达式也可以进行传递参数