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

代码文件

function mainJs(a) {a = parseInt(a);//请在此处编写代码/********** Begin **********/var myFunc = function (a){var sum = 0;while(a){sum = sum+a%10;a = parseInt(a/10);}return sum;};/********** End **********/return myFunc(a);
}

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

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

代码文件

var park = {name:"Leaf Prak",location:"Fifth Avenue",todayTourists:4000
};var computer = {name:"Levenon",price:"$800",memory:"8G"
};var city = {name:"HangZhou",country:"Chine",population:9400000
}function objectFunction(object) {//请在此处编写代码
/********** Begin **********/var arr = new Array();for(var i=0;i<3;i++){arr[i] = (Object.keys(object)[i]+":"+Object.values(object)[i]+",");}return (arr.join(""));/********** End **********/
}function mainJs(a) {a = parseInt(a);switch(a) {case 1:return objectFunction(park);case 2:return objectFunction(computer);case 3:return objectFunction(city);default:break;}
}

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);}
}

JavaScript学习手册八：JS函数相关推荐

1. JavaScript 学习手册二

   JavaScript 学习手册二:JS 数据类型 第1关:JavaScript 数据类型介绍 任务描述 本关任务:在函数 objectTest() 内部定义了六个变量 a.b.c.d.e.f,并已经赋 ...

2. JavaScript学习（八十）—请写一段JS程序提取URL中的各个get参数(参数名和参数个数不确定)，将其按key-value形式返回到一个json结构中

   JavaScript学习(八十)-请写一段JS程序提取URL中的各个get参数(参数名和参数个数不确定),将其按key-value形式返回到一个json结构中 题目: 代码:

3. JavaScript学习（八十四）—变量

   JavaScript学习(八十四)-变量 一.什么是变量? 白话: 变量就是一个装东西的盒子 通俗:变量是用于存放数据的容器. 我们通过 变量名 获取数据,甚至数据可以修改. 二.变量在内存中的存储 ...

4. JavaScript学习（八十三）—JavaScript书写位置、注释、以及输入输出语句

   JavaScript学习(八十三)-JavaScript书写位置.注释.以及输入输出语句 一.JavaScript书写位置 JS 有三种书写位置,分别为行内.内嵌和外部. (一). 行内式 JS &l ...

5. JavaScript学习（八十二）—JavaScript的组成

   JavaScript学习(八十二)-JavaScript的组成 一.ECMAScript ECMAScript是由ECMA国际(原欧洲计算机制造商协会)进行标准化的一门编程语言,这种语言在万维网上应用 ...

6. JavaScript学习总结(八)——JavaScript数组

   转载自   JavaScript学习总结(八)--JavaScript数组 JavaScript中的Array对象就是数组,首先是一个动态数组,无需预先制定大小,而且是一个像Java中数组.Array ...

7. JavaScript学习（八十九）—数组练习题

   JavaScript学习(八十九)-数组练习题

8. JavaScript学习（八十八）—数组知识点总结，超详细！！！

   JavaScript学习(八十八)-爆肝 数组知识点总结,超详细!!! 每天都要进步一点点 小王加油!!! 一.数组的概念 所谓数组就是指内存中开辟出来的用来存储大量数据的连续的存储空间 数组可以把一 ...

9. JavaScript学习（八十七）—流程控制语句的总结，超级详细！！！

   JavaScript学习(八十七)-流程控制语句的总结,超级详细!!! 一.流程控制概念 流程控制概念:在一个程序执行的过程中,各条代码的执行顺序对程序的结果是有直接影响的.很多时候我们要通过控制代码 ...

10. JavaScript学习（八十六）—运算符知识点总结

    JavaScript学习(八十六)-运算符知识点总结 一. 运算符的分类 运算符(operator)也被称为操作符,是用于实现赋值.比较和执行算数运算等功能的符号. JavaScript中常用的运算符 ...

最新文章

1. 使用Prism提供的类实现WPF MVVM点餐Demo
2. iOS网络编程-配置iCloud-图文解说
3. AES加密补位填充的一个问题
4. 拔得头筹 | 阿里云混合云荣膺IPv6最佳实践奖
5. java inputreader_Java之InputStreamReader类的实现
6. figma下载_不用担心Figma中的间距
7. mysql 主主模式优缺点_mysql主主同步模式
8. 《MySQL——使用联合索引、覆盖索引，避免临时表的排序操作》
9. OpenStack Weekly Rank 2015.08.24
10. activiti 定时任务和线程池
11. excel的宏与VBA入门（二）——数据类型与变量
12. 《微观经济学》第五章弹性及其应用
13. java mas,java 移动MAS的DB接口实现彩信发送
14. Python初学者（零基础学习Python、Python入门）常见问题：书籍推荐、资料、社区
15. 台式计算机usb口不能用,电脑usb接口不能用怎么办【图文教程】
16. 卸载IE9重装IE9无法安装的原因及解决方法
17. 论文阅读之《Color Constancy Using CNNs》
18. 数据库、表的创建与修改
19. python习题计算a+aa+aaa+aaaa的结果 lintcode题目
20. ICLR 2021|基于GAN的二维图像无监督三维形状重建

热门文章

1. locale的设定及LANG、LC_CTYPE、LC_ALL环境变量
2. qq linux五笔输入法下载软件,qq五笔输入法
3. ad导出元件清单_如何Altium Designer 中输出元件清单（BOM表格）
4. Android自带语音播报TextToSpeech功能开发记录
5. 安装使用cuteFTP注意事项
6. linux那些事之copy on write(COW)
7. celebA_hq高清人脸图片下载、生成代码
8. Linux下本地yum源配置和局域网yum源配置
9. C++ 中typedef用法
10. DPDK Release 21.02