JavaScript学习手册八：JS函数

以你之姓@ 2023-01-14 14:56 228阅读 0赞

### JS函数 ###

*  1、用函数语句定义函数
 *   *  任务描述
     *  相关知识
     *   *  用函数语句定义
         *  代码文件
 *  2、用表达式定义函数
 *   *  任务描述
     *  相关知识
     *   *  用表达式定义
         *  代码文件
 *  3、函数的调用
 *   *  任务描述
     *  相关知识
     *   *  函数的调用
         *  代码文件
 *  4、未定义的实参
 *   *  任务描述
     *  相关知识
     *   *  用函数语句定义
         *  代码文件
 *  5、实参对象
 *   *  任务描述
     *  相关知识
     *   *  实参对象
         *  代码文件
 *  6、对象作为参数
 *   *  任务描述
     *  相关知识
     *   *  对象作为参数
         *  代码文件
 *  7、函数对象
 *   *  任务描述
     *  相关知识
     *   *  函数对象作为另一个函数的参数
         *  代码文件

# 1、用函数语句定义函数 #

## 任务描述 ##

**本关任务：用函数语句定义一个函数。**  
**具体要求如下：**

1.  定义一个名字为mainJs()的函数；
2.  该函数有两个参数，均为字符串类型；
3.  函数的功能是返回这两个参数的拼接结果；

## 相关知识 ##

*  函数的定义是指用一段代码实现函数的功能，通常的定义方式以关键字function开头。

### 用函数语句定义 ###

*  先给一个例子，该函数的功能是返回数组元素的和：

function sumArray(arr) { 
        var sum = 0;
        for(var i = 0,aLength = arr.length;i < aLength;i++) { 
            sum += arr[i];
        }
        return sum;
    }

1.  `关键字function`后面空一格，`sumArray是函数的名字`，其命名规范与变量名的`命名规范`相同：  
    **只能有字母、数字、下划线和美元符号，不能以数字开头，不能是关键字。**
2.  括号中是参数，又叫形式参数，只需要参数名就可以。参数可以是0个、1个或者多个，相互之间用`,`隔开，`{}`中间包含的是函数体。含有一条或者多条语句。函数体用来实现函数的功能。
3.  关键字`return`后面是函数的返回值，函数也可以没有返回值。函数运行完return这句话这里就会退出运行，return下面的语句不再运行。返回值即函数的输出。
4.  用这种方式定义的函数，在函数定义的前面和后面都可以调用该函数，只要函数和调用函数的语句在一个源文件里面就可以了。

### 代码文件 ###

//请在此处编写代码
    /********** Begin **********/
    function mainJs(str1,str2){ 
    return str1+str2;
    }
    /********** End **********/

# 2、用表达式定义函数 #

## 任务描述 ##

**本关任务：定义一个匿名函数。**

**具体要求如下：**

*  定义一个匿名函数，将它赋值给变量`myFunc`；
 *  该函数实现求一个三位数的各个位上的数字之和，比如123各个位上的数字分别为1、2和3，和是6；

## 相关知识 ##

除了最直观的用函数语句定义函数之外，还可以用表达式定义函数。

### 用表达式定义 ###

**用`表达式`的方式定义函数，就是用赋值表达式把函数赋值给一个变量，这其实就是把函数看成一个变量。这个时候函数可以有名字，也可以没有名字，没有名字的函数叫做匿名函数。**

*  带名字的：

var funct = function getMax(a,b) { 
        return a>b?a:b;
    };//注意这后面的分号不能少，因为我们定义的是一个变量!

和前一关不同的是，**只能在函数定义语句之后调用该函数，且调用的时候只能用变量名funct，不能用函数名getMax，如：**

var funct = function getMax(a,b) { 
        return a>b?a:b;
    };
    console.log(funct(1,2));//输出2

*  **匿名函数**：

*所谓匿名函数就是关键字function之后直接是参数列表：*

var funct = function(a,b) { 
        return a>b?a:b;
    };

这个函数没有名字，它被赋值给了变量funct，所以叫匿名函数。同样，也只能在这一语句之后调用该函数。

var funct = function(a,b) { 
        return a>b?a:b;
    };
    console.log(funct(1,2));//输出2

### 代码文件 ###

# 3、函数的调用 #

## 任务描述 ##

**本关任务：根据要求调用不同的函数。**

**具体要求如下：**

1.  mainJs()代码区上面定义了三个函数，从上到下分别编号为1、2和3；
2.  mainJs()有三个参数a、b和c，根据a的值（函数的编号，可取的值是1、2和3）调用相应的函数（可选的函数分别是`getMax()`、`getMin()`和`getSum()`，具体请参考代码！），并传入参数b和c，返回得到的结果；
3.  比如a为1表示你需要调用函数`getMax()`；

## 相关知识 ##

### 函数的调用 ###

**对象可以有自己的方法**，当然这也是函数。这种函数的调用和前面两关定义的函数有细小的区别。

//函数的定义：求三个数的最大值
    function max(a,b,c) { 
        if(a > b) { 
            if(a > c)
                return a;
            else 
                return c;
        }
        else { 
            if(b > c)
                return b;
            else 
                return c;
        }
    }
    //调用该函数
    var result = max(1,2,3);//result为3
    console.log(result);//输出3

调用函数的时候，需要传入和形参相同个数的的具体值，上面的函数有3个参数，所以下面调用的时候传入3个具体的值，1传给参数a，2传给参数b，3传给参数c。函数的返回值通过赋值符号=传给了变量result。`如果函数体内没有return关键字，将返回undefined。`

再来看一下对象里定义的函数的调用：

var ob = { 
        id:1,
        getMax:function(a,b) { 
            return a>b?a:b;
        }
    };
    var result = ob.getMax(2,1);//result值为2
    var result1 = ob["getMax"](2,1);//result1的值也是2

与上面的区别是，这里要定位到函数，需要使用`对象名.函数名`或者`对象名["函数名"]`,其它相同。

### 代码文件 ###

//求最大值的函数
    function getMax(b,c) { 
        return b>c?b:c;
    }
    
    //求最小值的函数
    var getMin = function(b,c) { 
        return b>c?c:b;
    }
    
    //对象中的求和函数
    var myObject = { 
        id:1,
        name:"function",
        myFunc:function(b,c) { 
            return b+c;
        }
    }
    
    function mainJs(a,b,c) { 
        a = parseInt(a);
        b = parseInt(b);
        c = parseInt(c);
    	//请在此处编写代码
    	/********** Begin **********/
        var result;
        if(a == 1){ 
            result = getMax(b,c);
        }
        else if(a == 2){ 
            result = getMin(b,c);
        }
        else{ 
            result = myObject.myFunc(b,c);
        }
        return result;
    
    	/********** End **********/
    }

# 4、未定义的实参 #

## 任务描述 ##

**1.JavaScript的实际参数的个数有时候是不确定的。**

**2.本关任务：学习处理未定义的实参。**

**3.具体要求如下：**

1.  路口有四个方向的红绿灯，其默认值分别是green、green 、red和yellow；
2.  对于函数`mainJs(a,b,c,d)`的四个参数，要求在没有传入实参或者传入`undefined`时，其分别设置为上述默认值；
3.  最后返回四个字符串型参数的拼接结果，字符串中间用-符号隔开，如分别传入red、red、yellow和undefined时，返回red-red-yellow-yellow；

## 相关知识 ##

函数的基本功能是对函数内的参数进行操作，其中，**函数定义时的参数被称为形式参数**，`函数被调用时传入的参数被称为实际参数`。

### 用函数语句定义 ###

1.  在大部分的编程语言里面，都会对调用函数时传入的实参个数和类型进行检查，而JavaScript既不检查实参的类型，也不检查实参的个数。
2.  JavaScript中的实参会按照顺序从左到右依次匹配上形参，例如：

function myFunction(a,b,c) { 
        console.log(a);
        console.log(b);
        console.log(c);
    }
    myFunction(1,2,3);

1.  实参1传入形参a，实参2传入形参b，实参3传入形参c。
2.  当实参个数少于形参时，靠右的形参会被传入值undefined。

如：

function myFunction(a,b,c) { 
        console.log(a);
        console.log(b);
        console.log(c);
    }
    myFunction(1,2);

*  实参1传入形参a，实参2传入形参b，undefined传入形参c。
 *  如果只想给右侧的参数传入数据，可以给前几个实参传入undefined。

如：

function myFunction(a,b,c){ 
    console.log(a);
    console.log(b);
    console.log(c);
    }
    myFunction(undefined,1,2);

上面这两种做法不够严谨，最佳实践是给可能被传入undefined值的形参设定一个默认值。如：

function getSum(a,b,c) { 
        if(c === undefined) 
            c = 0;
        console.log(a+b+c);
    }
    myFunction(1,2);

### 代码文件 ###

function mainJs(a,b,c,d) { 
    	//请在此处编写代码
    	/********** Begin **********/
        
        a = a == null ? "green" : a;
        b = b == null ? "green" : b;
        c = c == null ? "red" : c;
        d = d == null ? "yellow" : d;
        return a+"-"+b+"-"+c+"-"+d;
    	/********** End **********/
    }

# 5、实参对象 #

## 任务描述 ##

*  **本关任务：编写一个计算若干个数的最大值的程序**。
 *  具体要求如下：
 *  定义函数getMax()；
 *  该函数计算并返回一组整数的最大值；
 *  整数的个数不确定；
 *  如果整数个数为0，直接返回0；

## 相关知识 ##

### 实参对象 ###

1.  `JavaScript一切都是对象`，实参也是一个对象，有一个专门的名字`arguments`，这个对象可以看成一个数组（`类数组，不是真的数组`），实参从左到右分别是arguments\[0\]、arguments\[1\]…，arguments.length表示实参的个数。
2.  实参对象一个最重要的应用是`可变长参数列表`，想象一下求一组数的和，如果这组数不在一个数组里面，使用函数来求则无法定义函数体，因为不知道形参的个数。这个时候就可以用arguments来解决问题。如:

//求参数的和
    function getSum() { 
        var aLength = arguments.length;
        var sum = 0;
        for(var i = 0;i < aLength;i++) { 
            sum += arguments[i];
        }
        return sum;
    }
    console.log(getSum(1,2,3,4,5))//输出15

这里的形参直接省略，使用`arguments[i]`表示。

### 代码文件 ###

//请在此处编写代码
    /********** Begin **********/
    function getMax(){ 
        var aLength = arguments.length;
        var max = 0;
        if(aLength == 0){ 
            return 0;
        }else{ 
            for(var i=0;i<aLength;i++){ 
                if(arguments[i]>max)
                    max = arguments[i];
        }
        return max;
        }   
    }
    
    /********** End **********/
    
    function mainJs(a) { 
        a = parseInt(a);
        switch(a) { 
            case 1:return getMax(23,21,56,34,89,34,32,11,66,3,9,55,123);
            case 2:return getMax(23,21,56,34,89,34,32);
            case 3:return getMax(23,21,56,34);
            case 4:return getMax(23,21,56,34,89,34,32,11,66,3,9,55,123,8888);
            case 5:return getMax();
            default:break;
        }
    }

# 6、对象作为参数 #

## 任务描述 ##

--------------------

本关任务：编写一个以对象作为参数的函数。

--------------------

**具体要求如下：**

1.  函数`objcetFunction()`的参数是一个对象，该函数的功能是返回属性名1+’:’+属性值1+’,’+属性名2+’:’+属性值2+’,’+…+属性值n+’,’；
2.  测试的时候我们会往`mainJs()`传入参数1或2或3，分别表示调用函数`objectFunction()`并传入对象参数park、computer或者city；
3.  比如对于第一个对象park，该函数需要返回name:Leaf Prak,location:Fifth Avenue,todayTourists:4000,；

## 相关知识 ##

### 对象作为参数 ###

*  复杂的函数通常多达十几个参数，尽管JavaScript不做参数个数和类型的检查，但是调用时实参的顺序不能乱。
 *  开发人员需要检查每一个实参和形参的对应关系，这样效率很低。
 *  一种很好的解决方案是使用对象作为参数，函数会根据对象的属性名操作参数。

function myFunction(obj) { 
        console.log(obj.name);
        obj.number++;
        return obj.number;
    }
    myObj = { name:"myObj",number:34};
    myFunction(myObj);//输出myObj
    console.log(myObj.number);//输出35

这种情况下开发人员不需要记住或查阅形式参数的顺序。

### 代码文件 ###

# 7、函数对象 #

## 任务描述 ##

本关任务：求数组中奇数或者偶数元素的个数。

--------------------

**具体要求如下：**

1.  已知`getOddNumber(a)`求数组a中奇元素的个数，`getEvenNumber(a)`求数组a中偶元素的个数；
2.  完成函数`getNumber(func,a)`，实现：根据函数参数func的不同，求数组a中奇元素的个数或者偶元素的个数；
3.  上一条提到的func的值只有可能是`getOddNumber`或者`getEvenNumber`。

## 相关知识 ##

--------------------

JavaScript中一切都是对象，这句话同样适用于函数。函数对象可以作为函数的参数。

--------------------

### 函数对象作为另一个函数的参数 ###

1.  一个函数（为方便行文，称为a函数）可以作为另外一个函数（称为b函数）的参数，b函数最终可以返回一个具体的值。
2.  从原理上来说，b函数在自己的函数体内调用了a函数，所以需要把a函数的名字作为实际参数传递给b函数。如下：

//求最大值
    function getMax(a,b) { 
        return a>b?a:b;
    }
    //求最小值
    function getMin(a,b) { 
        return a<b?a:b;
    }
    //下面这个函数以函数作为参数，并最终返回一个值
    function getM(func,num1,num2) { 
        return func(num1,num2);
    }
    getM(getMax,1,2);//返回2
    getM(getMin,1,2);//返回1

我们把a函数的名字（`getMax`或者`getMin`）传给b函数（`getM（）`），然后在b函数内部调用闯入的a函数，得到相关的结果。

### 代码文件 ###

//求数组中奇数元素的个数
    function getOddNumber(a) { 
        var result = 0;
        for(var i = 0;i < a.length;i++) { 
            if(a[i]%2 != 0)
                result++;
        }
        return result;
    }
    
    //求数组中偶数元素的个数
    function getEvenNumber(a) { 
        var result = 0;
        for(var i = 0;i < a.length;i++) { 
            if(a[i]%2 == 0)
                result++;
        }
        return result;
    }
    
    function getNumber(func,a) { 
    	//请在此处编写代码
    	/********** Begin **********/
        return func(a);
    
    	/********** End **********/
    }
    
    //测试接口
    function mainJs(b,a) { 
        a = a.split(",");
        var aLength = a.length;
        for(var i = 0;i < aLength;i++) { 
            a[i] = parseInt(a[i]);
        }
        if(b == "getEvenNumber") { 
            return getNumber(getEvenNumber,a);
        } else { 
            return getNumber(getOddNumber,a);
        }
    }