JavaScript基础教程之函数的重新学习

Write By Monkeyfly

以下内容均为原创，如需转载请注明出处。

前提：

好久没看js了，已经忘得差不多了，最近就打算认真地学习一遍js，并做好一些相关的笔记，把之前学的不扎实的地方好好巩固一下。其实，我个人感觉重温还是有好处的。现在就让我们来重新认识一下这所谓的函数。

初识函数

一、函数是什么？

函数一般用来实现某一种重复使用的功能，在需要使用该功能时，直接调用函数就行了，而不需要编写一大堆重复的代码。

1.1 函数的使用情况：

（1）需要重复使用；
（2）特定功能。

1.2 js中需要使用函数时，只需要简单的两步：

（1）定义函数； 【必须使用function来定义】
（2）调用函数； 【一般有4种方式，后面讲】

1.3 说明：

（1）在JavaScript中，函数是一种用“{}”括起来的，可重复使用、具有特定功能的语句块。
（2）每个函数都是独立的语句块。
（3）用“{}”括起来的，我们都可以称之为语句块。
（4）参数可以省略不写。多个参数之间用英文逗号隔开。
（5）函数名不要随便取，尽量取有意义的英文名。
（6）参数的个数，一般取决于实际的开发需求。

二、函数的定义

在JavaScript中，函数分为两种：
（1）没有返回值的函数
（2）有返回值的函数

2.1 没有返回值的函数【函数执行完毕后，不会返回任何值】

语法：

function 函数名 (参数1，参数2，...，参数n){
    ....
}

举例：

// 定义一个任意两个数求和的函数
function addSum(a,b){
    var sum = a + b;
    document.write("<br/>" + sum);
}
//调用函数,并传入参数
addSum(1,2);

---

分析：
（1）function addSum(a,b){…}是函数的定义。
（2）这里的a,b为参数，也叫形式参数，简称形参。
（3）参数的名字可以随意取。

问：如何判断需要多少个参数？
答：由函数功能来决定。这里的函数用于计算任意两个数字之和，自然就需要两个参数。

说明：
（1）addSum(1,2);是函数的调用。这里的1,2也是参数，它们称之为实际参数，简称实参。因为它们是实际传入进函数的值。

（2）实际上，函数的调用与函数的定义相对应。所以，addSum(1,2); 对应于addSum(a,b)。 其中1对于a，2对应b。

addSum(1,2)就等价于：

function addSum(1,2){
    var sum = 1 + 2;
    document.write("<br/>" + sum);
}

由上可知，函数的调用就是把“实参”（这里是1和2）传递给“形参”（即a和b），然后再把函数执行一遍。

注意：
（1）如果函数只有定义部分，而没有调用部分，这是毫无意义的。
（2）如果只定义而不调用，JavaScript就会自动忽略这个函数，不会去执行它。
（3）因为函数只有在调用的时候才能被执行。

2.2 有返回值的函数 【函数执行完毕后，会返回一个值，来供我们使用】

语法：

function 函数名 (参数1，参数2，...，参数n){
    ....
    return 返回值；
}

说明：
（1）有返回值的函数与没有返回值的函数，两者之间的区别，仅仅是多了一个return语句。
（2）return语句就是用来返回一个结果。

举例：

//此处定义一个求和函数
function add(a,b){
    var sum1 = a + b;
    return sum1;
}
//调用函数，此时函数会返回一个值，即sum1的值
var n = add(1,2) + 100;
document.write("<br/>" + n + "<br/>");

问：为什么要返回一个值呢？
答：因为此时返回的值在后面需要用到。

结论：
一般情况，如果后面的程序需要用到函数的计算结果，就要用return返回；反之，则不需要用return返回。

三、函数的调用

如果一个函数仅仅被定义而没有被调用的话，则函数本身是不会执行的。

原因如下：
（1）JavaScript代码是从上到下执行的。
（2）当JavaScript遇到函数的定义部分时会直接跳过（也就是直接忽略掉），只有碰到函数的调用时才会返回函数的定义部分去执行这个函数。

说明：
在函数这方面，JavaScript跟其他编程语言（如C、java等）有很大不一样。

常见的JavaScript函数调用方式有如下四种：

• 直接调用
• 在表达式中调用
• 在超链接中调用
• 在事件中调用

3.1 直接调用 【较为常见，一般用于“没有返回值的函数”】、

语法：

函数名（实参1，实参2，...，实参n）；

说明：
（1）从表面来看，函数的调用与函数的定义非常相似。
（2）一般来说，定义时函数有几个参数，那么在调用时也相应的有几个参数。

举例：

//定义函数
function getMsg(){
    document.write("Hello World!");
}
//调用函数
getMsg()；

分析：

问：为什么此处的函数没有参数？
答：函数不一定都要有参数。如果在函数体内不需要用到传递过来的数据，那么就不需要参数。函数要不要参数，要多少个参数，由开发的实际需要决定。

3.2 在表达式中调用 【一般用于“有返回值的函数”】

函数的返回值会参与表达式的计算。

举例：

//定义一个有返回值的求和函数
function add(a,b){
    var sum1 = a + b;
    return sum1;
}
//调用函数，此时函数会返回一个值，即sum1的值
var n = add(1,2) + 100;
document.write("<br/>" + n + "<br/>");

分析：
（1）从这行代码可以看出 var n = add(1,2) + 100;
（2）函数在表达式中被调用了，然后函数的返回值会作为表达式的一部分参与运算。

3.3 在超链接中调用 【指的是在a元素的href属性中使用“javascript:函数名”的形式来调用函数。】

当用户点击超链接时，就会自动调用该函数。

语法：

<a href="javascript:"函数名"></a>

举例：

function expressMsg(){
    alert("她：请求支援！\n我：正在前往支援！");
}
<a href="javascript:expressMsg()">对战信息</a>

分析：
（1）当我们点击超链接后，就会调用expressMsg()函数;
（2）此处使用转义字符“\n”（反斜杠n）来实现alert()方法中的文本换行行为。

注意：
alert()方法与documen.write()方法的换行方式有区别。

alert()：使用\n（反斜杠n）来换行。
document.write()：使用<br/>来换行。
别乱用！

3.4 在事件中调用

【JavaScript是基于事件的一门语言，比如鼠标单击事件、移动事件、获取焦点事件等等，当一个事件发生的时候，我们就可以调用某个函数来对这个事件作出一些响应。】

举例：

function alertMsg(){
    alert("你是不是傻？");
}
<input type="button" onclick="alertMsg()" value="试着点一下" /><br/>

分析：
（1）当我们点击按钮的时候，就会触发onclick鼠标点击事件，并调用执行alertMsg()函数。
（2）这种在事件中调用函数的情况，在以后的开发中会接触的非常多。

四、嵌套函数

简单来说，就是在一个函数的内部定义了另外一个函数。
但是，在内部定义的函数只能在内部调用，如果在外部调用就会出错。

举例：

//定义一个阶乘函数，包含一个参数a
function fact(a){
    //在函数内部定义了一个嵌套函数，用来计算任意数的平方值
    function square(x){
        //该函数返回任意一个数的平方值
        return x*x;
    }
    var y =1;
    //此时调用嵌套函数，会传入一个参数并执行，得到的结果为传入值的平方
    for(var i = 1; i <= square(a); i ++){
        y = y * i;
    }
    return y;
}
//调用函数
var sum = fact(2) + fact(3);
document.write(sum);

分析：

对于，fact(2)，我们把2作为实参传进去，然后如下：

function fact(2){
    function square(2){
        return 2*2;
    }
    var y =1;
    for(var i = 1; i <= square(2); i ++){
        y = y * i;
    }
    return y;
}

• 由上可知，fact(2) 实现的是1*2*3*4，也就是4！。同理，fact(3)实现的是1*2*3*…*9，也就是9！。

注意：
（1）嵌套函数的功能非常强大，而且它跟js的一个非常重要的概念——“闭包”有着直接的关系。
（2）目前只需要知道什么是嵌套函数，不需要知道怎么用，因为是初级教程，等高级再说。

另外：

对于函数的高级部分的知识，等我学到了JavaScript的进阶教程时再将我的学习笔记放上来供大家学习参考。

五、内置函数

在JavaScript中，函数还可分为：自定义函数 和 内置函数。

说明：

• 上面学的就是自定义函数，这类函数需要我们自己定义函数的内容。
• 内置函数，就是JavaScript内部已经定义好的一些函数。
  我们不需要写什么函数体，不用关心它是如何实现的，只需要知道存在这样功能的一个内置函数，在需要用的时候，直接拿来使用就可以了。
• 其实，JavaScript的内置函数非常多，但是大多数都没有与我们见面的机会，基本都用不上。
• 值得一提的就是，这两个函数parseInt()和parseFloat()。重点掌握这两个就行。
• 至于其他的内置函数，不需过多的深入了解，也不需要记。在实际开发中如果用到，直接百度就行。

常用的内置函数如下表所示：

函数	说明
parseInt()	提取字符串中的数字，只能提取整数
parseFloat()	提取字符串中的数字，可以提取小数
isFinite()	判断某个数是否是一个有限数值
isNaN()	判断一个数是否是NaN值（Not a Number，非数字值）
escape()	对字符串进行编码
unescape()	对字符串进行解码
eval()	把一个字符串当做一个表达式去执行

英文解释：

• adj. infinite无限的；finite有限的；
• infinity无穷大；finity有限

六、 练习：

6.1 闰年判断

判断条件：
（1）【普通年份】能被4整除但是不能被100整除；
（2）【世纪年份】能被400整除；

代码：

/*判断某一年是否为闰年*/
//定义函数
function isLeapYear(year){
    //判断闰年的条件
    if( ((year % 4 == 0) && ( year % 100 != 0)) || ( year % 400 == 0) ){
        return year + "年是闰年" + "<br/>";
    }else{
        return year + "年不是闰年" + "<br/>";
    }
}
//调用函数
document.write(isLeapYear(2018));

6.2 求出任意五个数的最大值

思路一：

（1）设定一个包含5个参数且带有返回值的函数用于求最大值；

（2）然后定义一个变量，利用条件运算符（三目运算符）进行两两比较；

（3）再将两者中的较大者赋值给刚开始定义的变量，不停地更新变量的值，最后一次比较的结果即为最大值。

代码：

function max(a,b,c,d,e){
    var maxnum;
    //a大于b吗？如果a大于b，则将a赋值给变量maxnum，反之将b赋值给变量maxnum
    maxnum = a > b ? a : b;
    //a和b中的最大者与c进行比较
    maxnum = (maxnum > c) ? maxnum : c;
    //a、b、c中的最大者与d进行比较
    maxnum = (maxnum > d) ? maxnum : d;
    a、b、c、d中的最大者与e进行比较
    maxnum = (maxnum > e) ? maxnum : e;
    //返回5个数中的最大者
    return maxnum;
}
document.write("五个数中的最大值为：" + max(45,213,15,7,53) + "<br/>");

思路二：

利用上面学到的知识，我们可以利用嵌套函数来实现这个功能。

（1）首先，定义一个包含5个参数的主体函数，并且带有返回值，用来求5个数的最大值。

（2）然后在主函数体内定义一个嵌套函数，它用于求两个数中的最大值，自然包括两个参数，且有一个返回值。

（3）5个数可以两两分对，还剩余一个值，将这两对值分别传入嵌套函数中，将得出的结果进行比较得出较大值，然后将较大值与剩下的数字比较，即可求出5个数中的最大值。

代码：

function maximum(a,b,c,d,e){
    //嵌套函数的定义，用于求两者之间的最大值
    function maxnum(x,y){
        if(x>y)
            z=x;
        else
            z=y;
        return z;
    }
    //定义一个变量，用于存储两两比较后的最大者
    var max;
    //两两比较后更新变量
    max = maxnum(a,b) > c ? maxnum(a,b) : c;
    //两两比较后更新变量
    max = maxnum(d,e) > max ? maxnum(d,e) : max;
    //返回5个数中的最大者
    return max;
}
document.write("五个数中的最大值为：" + maximum(8,11,2,5,7) + "<br/>");

思路3：

这种方法简单粗暴，直接利用条件运算符进行两两比较。

两两比较后的值 赋值给不同的变量，然后再次运用条件运算符与剩下的那个数比较大小，从而得出5个数中的最大值。

代码：

function large(a,b,c,d,e){
    var x = a > b ? a : b;
    var y = c > d ? c : d;
    var z = x > y ? x : y;
    return z > e ? z : e;
}
document.write("五个数中的最大值为：" + large(50,1,-5,58,99) + "<br/>");

至此，函数的基础知识就已经全部写完。

结束语

isNaN() 方法我会单独写一篇博客来进行详细的说明，这个方法刚开始学的时候还挺绕的，我觉得有必要再深入了解下。因为这个方法要写的话内容比较多，加之时间也不早了，想睡觉了，改天再写。今天就到这里吧。