在 JS 里面,可能会定义非常多的相同代码或者功能相似的代码,这些代码可能需要大量重复使用。虽然循环语句能实现一些简单的重复操作,但是比较具有局限性,所以我们需要使用 JS 中的函数。所谓函数:就是封装了一段可被重复调用执行的代码块。
1. 函数的使用
函数使用分为两步:声明函数和调用函数。
1.1 声明函数
// 声明函数 function 函数名() { //函数体代码 }
注意:
① function 是声明函数的关键字,必须小写
② 由于函数一般是为了实现某个功能才定义的, 所以通常我们将函数名命名为动词,比如 getSum
1.2 调用函数
// 调用函数 函数名(); // 通过调用函数名来执行函数体代码
注意:
① 调用的时候千万不要忘记添加小括号
② 声明函数本身并不会执行代码,只有调用函数时才会执行函数体代码。口诀:函数不调用,自己不执行。
2. 函数的参数
JS中的函数和我们数学中学的函数类似,都具有参数,比如一次函数:y=kx+b,其中k和b就是参数,函数的一些性质和值等会随着这两个参数的变化而变化,但是本质不会变,就是得到的总是一条直线。这就像代码中的函数,每个函数实现的基本功能是一样的,只是会随着传入的参数不一样,结果会进行相应的变化。
2.1 形参和实参
类比数学中函数参数,可以得到JS中参数的作用 :即我们可以通过参数在调用函数时传递不同的值进去,从而实现动态变化。
我们JS中的把参数分成形参和实参。声明函数时,在函数名称后面的小括号中添加的参数称为形参,形参就是类似数学中的未知数,可能取各种值。而在调用函数时,则需要传递相应的参数,这些参数被称为实参,而实参就类似于数学中给某个未知数取具体的值。
比如函数y=kx+b中,k、b是形参。而当k=2,b=-1时,这个2,-1就是实参了。
// 带参数的函数声明 function 函数名(形参1, 形参2 , 形参3...) { // 可以定义任意多的参数,用逗号分隔 // 函数体 } // 带参数的函数调用 函数名(实参1, 实参2, 实参3...);
注意点:
① 调用的时候实参值是传递给形参的
② 形参简单理解为:不用声明的变量
③ 实参和形参的多个参数之间用逗号(,)分隔// 声明函数 function getSum(num1, num2) { console.log(num1 + num2); } // 调用函数 getSum(1, 5); // 6 getSum(6, 9); // 15
这个函数的功能是求两个值的和,而在声明函数的时候,添加了两个形参,并在函数体中使用这两个形参进行计算,所以在调用的时候输入具体的值(实参)就可以求得这两个数的和了。这样的一个函数就是动态函数,可以求任意两个数的和。只要想求某两个数的和,只需要调用,并输入实参即可获得结果,非常的方便实用。
2.2 函数形参和实参个数不匹配问题
理论上,函数形参和实参个数应该保持一致,但是有时可能也会出现不匹配的情况,所以在此介绍下如果不匹配会有怎样的结果:
function getSum(num1, num2) { console.log(num1 + num2); } getSum(1, 5); // 形参和实参个数相等,输出正确结果6 getSum(1, 3, 8, 10); // 实参个数多于形参,只取到形参的个数,结果为4 getSum(2); // 实参个数少于形参,多的形参定义为undefined,结果为NaN
注意:在JavaScript中,形参的默认值是undefined。
3. 函数的返回值
3.1 return 语句
如果我们需要函数将值返回给调用者,此时通过使用 return 语句实现。
// 声明函数 function getMax(num1, num2) { return num1 > num2 ? num1 : num2; // 使用三元表达式判断出两个数中的最大值,return语句的作用就是把这个最大值返回给调用者 } // 调用函数 console.log(getMax(1, 6)); 此时打印出的值就是6,由return语句返回给调用者
由于本案例采用了参数,所以可以求任意两个数的最大值。
3.2 return 终止函数
return 语句之后的代码不被执行 。
function add(num1,num2){ return num1 + num2; // 注意:return 后的代码不执行 alert('我不会被执行,因为前面有 return'); } var sum= add(21,6); // 调用函数,传入两个实参,并通过 sum 接收函数返回值(两数的和) alert(sum); // 27
3.3 return 的返回值
return 只能返回一个值。如果用逗号隔开多个值,以最后一个为准。
function add(num1,num2){ //函数体 return num1,num2; // 如果用逗号隔开多个值,以最后一个为准,即返回值为num2 } var num = add(21,6); // 调用函数,传入两个实参,并通过 num 接收函数返回值 alert(num); // 6
注意:函数都是有返回值的
① 如果有return 则返回 return 后面的值
② 如果没有return 则返回 undefined
3.4 break ,continue ,return 的区别
① break :结束当前的循环体(如 for、while)
② continue :跳出本次循环,继续执行下次循环(如 for、while)
③ return :不仅可以退出循环,还能够返回 return 语句中的值,同时还可以结束当前的函数体内的代码
4. 函数可以调用另外一个函数
因为每个函数都是独立的代码块,用于完成特殊任务,因此经常会用到函数相互调用的情况。
function fn1() { console.log(111); fn2(); console.log('fn1'); } function fn2() { console.log(222); console.log('fn2'); } fn1();
之所以输出的是如上结果,是因为函数只有调用,才会执行。所以以上代码的执行顺序是遇到fn1(); 后往回找到函数,然后输出111,紧接着遇到fn2(); 则此时会跳到fn2函数中,输出222和fn2,该函数体执行完后继续执行fn1中的后续内容,输出fn1。
5. 小结
所谓函数其实简单理解就是一个具有功能的工具,这个工具可以带参数也可以不带参数,如果没有参数,那么就不可以动态实现功能,而带了参数,那么它就可以根据用户的需求,灵活的改变某些内容。也可以将函数比喻成一个榨汁机,如果不带参数,那么它的功能就是可以榨汁,但是具体榨啥汁不知道。而带了参数,如果传入实参是苹果,那么这个榨汁机就可以实现榨苹果汁的功能。函数具有返回值,你传入不同的参数,返回不同的结果,就像你放入不同的苹果,就会榨出不同的果汁一样。