博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JavaScript基础教程之函数的重新学习
阅读量:4195 次
发布时间:2019-05-26

本文共 6310 字,大约阅读时间需要 21 分钟。

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("
" + 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("
" + 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("
" + n + "
");

问:为什么要返回一个值呢?

答:因为此时返回的值在后面需要用到。

结论:

一般情况,如果后面的程序需要用到函数的计算结果,就要用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("
" + n + "
");

分析:

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

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

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

语法:

举例:

function expressMsg(){
alert("她:请求支援!\n我:正在前往支援!");}对战信息

分析:

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

注意:

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

alert():使用\n(反斜杠n)来换行。document.write():使用
来换行。别乱用!

3.4 在事件中调用

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

举例:

function alertMsg(){    alert("你是不是傻?");}

分析:

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

四、嵌套函数

简单来说,就是在一个函数的内部定义了另外一个函数。

但是,在内部定义的函数只能在内部调用,如果在外部调用就会出错。

举例:

//定义一个阶乘函数,包含一个参数afunction 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 + "年是闰年" + "
"; }else{ return year + "年不是闰年" + "
"; }}//调用函数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) + "
");

思路二:

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

(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) + "
");

思路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) + "
");

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

结束语

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

你可能感兴趣的文章
docker 常用命令 (详细)
查看>>
ttc格式字体转化为ttf格式字体
查看>>
汇编库yasm安装与nasm安装
查看>>
x264编译错误
查看>>
ELKStack简介
查看>>
OpenGL各版本库的区别 glut glfw glew glad
查看>>
python 编程规范
查看>>
ffmpeg 带alpha透明层的视频编码
查看>>
error: ‘M_PI’ undeclared
查看>>
GLFW编译
查看>>
GLEW编译
查看>>
NVIDIA视频编码器 ffmpeg -h encoder=h264_nvenc
查看>>
emacsclient在命令行模式下不能输入中文
查看>>
无名师的GUI论 的解释
查看>>
添加定制的Edit Menu
查看>>
在UIMenuController出现的时候取得选中的数据
查看>>
ios或mac程序中添加链接到评价页面的方法
查看>>
屏蔽UITextView 中文字选择功能的方法
查看>>
如果使用UITextView来显示的大篇内容排版混乱,该怎么办?
查看>>
如何实现对UITextField ,UITextView等输入框的 字数限制
查看>>