收藏 分销(赏)

JavaScript前端开发案例教程-函数教学-(课堂PPT).ppt

上传人:w****g 文档编号:10251020 上传时间:2025-04-30 格式:PPT 页数:53 大小:2.27MB
下载 相关 举报
JavaScript前端开发案例教程-函数教学-(课堂PPT).ppt_第1页
第1页 / 共53页
JavaScript前端开发案例教程-函数教学-(课堂PPT).ppt_第2页
第2页 / 共53页
JavaScript前端开发案例教程-函数教学-(课堂PPT).ppt_第3页
第3页 / 共53页
JavaScript前端开发案例教程-函数教学-(课堂PPT).ppt_第4页
第4页 / 共53页
JavaScript前端开发案例教程-函数教学-(课堂PPT).ppt_第5页
第5页 / 共53页
点击查看更多>>
资源描述

1、第,4,章 函数,函数的使用,匿名函数,变量的作用域,闭包函数,学习目标,掌握,掌握,掌握,掌握,函数的使用方法,1,2,掌握,变量的作用域,掌握,匿名函数与闭包函数,3,目录,变量的作用域,4.2,4.1,函数的定义与调用,匿名函数,4.3,点击查看本小节知识架构,点击查看本小节知识架构,嵌套与递归,4.4,点击查看本小节知识架构,目录,4.5,闭包函数,点击查看本小节知识架构,知识架构,4,.1,函数的定义与调用,1,初识函数,2,参数设置,3,函数的调用,4,【,案例,】,字符串大小写转换,知识架构,4.3,匿名函数,1,函数表达式,2,匿名函数,3,回调函数,知识架构,4.4,嵌套与递

2、归,1,函数嵌套与作用域链,2,递归调用,3,【,案例,】,求斐波那契数列第,N,项的值,知识架构,4.5,闭包函数,1,什么是闭包函数,2,闭包函数的实现,4.1,函数的定义与调用,初识函数,函数,:用于封装一段完成特定功能的代码。,相当于将一条或多条语句组成的代码块包裹起来,用户在使用时只需关心参数和返回值,就能完成特定的功能,而不用了解具体的实现。,4.1,函数的定义与调用,初识函数,console.log(,parseFloat,(7.26e-2);,/,返回解析后的浮点数:,0.0726,console.log(,isNaN,();/,判断是否是,NaN,:,false,consol

3、e.log(,parseInt,(15.99);/,返回解析后的整数值:,15,观察“内置函数”的使用,parseFloat(),用于返回解析字符串后的浮点数,。,isNaN(),判断给定参数是否为,NaN,,判断结果为是,返回,true,,否则返回,false,。,parseInt(),用于返回解析字符串后的整数值。,4.1,函数的定义与调用,初识函数,function,函数名,(,参数,1,参数,2,),函数体,函数的定义由,以下,4,部分组成:,关键字,function,。,函数名,。,参数,。,函数体,。,除了使用内置函数外,,JavaScript,中还可以根据具体情况自定义函数,提高

4、代码的复用性、降低程序维护的难度。,4.1,函数的定义与调用,初识函数,function,:定义函数的关键字。,函数名,:可由大小写字母、数字、下划线(,_,)和,$,符号组成,但是函数名不能以数字开头,且不能是,JavaScript,中的关键字。,参数,:是外界传递给函数的值,它是可选的,多个参数之间使用“,”分割。,函数体,:是专门用于实现特定功能的主体,由一条或多条语句组成。,返回值,:在调用函数后若想得到处理结果,在函数体中可用,return,关键字返回。,4.1,函数的定义与调用,初识函数,注意,函数的名称最好不要使用,JavaScript,中的保留字,避免在将来被用作关键字导致出错

5、4.1,函数的定义与调用,参数设置,函数可以根据参数的设置分为以下两种:,无参函数,有参函数,4.1,函数的定义与调用,参数设置,无参函数,:适用于不需要提供任何数据,即可完成指定功能的情况。,function greet(),console.log(Hello everybody!);,在自定义函数时,即使函数的功能实现不需要设置参数,小括号“,(),”也不能够省略。,4.1,函数的定义与调用,参数设置,有参函数,:适用于开发时函数体内的操作需要用户传递数据的情况。,形参:,指的就是形式参数,具有特定的,含义,在,定义有参函数,时设置,的,参数。,实参:,指的是实际参数,也就是具体的,值

6、在函数,调用时传递的,参数。,function maxNum(a,b),a,=parseInt(a);,b,=parseInt(b);,return,a=b?a:b;,示例,4.1,函数的定义与调用,参数设置,获取函数调用时传递的所有实参,:适用于开发时函数体形参不确定的情况。,实现方式:利用,arguments,对象,在函数体内可获取函数调用时传递的实参。,其他操作:,length,属性可获取实参,的,总数,具体实参值可利用数组遍历方式。,function,transferParam,(),console.log(,arguments.length,);,console.log(argum

7、ents);,示例,4.1,函数的定义与调用,多,学,一,招,含有默认值的参数与剩余参数,函数参数的设置,在,ES6,中提供了更灵活的使用方式,如设置形参的默认值等。,function greet(name,say=Hi,Im),console.log(say+name);,默认值,函数的形参在设置时,还可以为其指定默认值。当调用者未传递该参数时,函数将使用默认值进行操作。,4.1,函数的定义与调用,多,学,一,招,含有默认值的参数与剩余参数,函数定义时,还可用“,变量名”的方式动态接收用户传递的不确定数量的实参。,function transferParam(num1,.theNums),t

8、heNums.unshift(num1);,console.log(theNums);,function transferParam(.theNums),console.log(theNums);,一个确定形参,无确定的形参,4.1,函数的定义与调用,函数的调用,当函数定义完成后,要想在程序中发挥函数的作用,必须得调用这个函数。,函数的调用非常简单,只需引用函数名,并传入相应的参数即可。,函数声明与调用的编写顺序不分前后,。,函数名称,(,参数,1,参数,2,),参数,1,,参数,2,是可选的,用于表示形参列表,其值可以是零个、一个或多个。,4.1,函数的定义与调用,【,案例,】,字符串大小写

9、转换,代码实现思路:,编写,HTML,表单,设置两个文本框和两个按钮,文本框显示转换前后数据,按钮用于转换。,为按钮添加点击事件,并利用函数,deal(),处理。,编写,deal(),函数,根据传递的不同参数执行不同的转换操作。,将转换后的数据显示到对应位置。,4.2,变量的作用域,思考,:声明变量后就可以在任意位置使用该变量嘛?,回答,:不是。,举例,:函数内,var,关键字声明的变量,不能在函数外访问。,function info(),var,age=18;,/,输出结果:,Uncaught,ReferenceError,:age is not,defined,console.log(ag

10、e);,示例,4.2,变量的作用域,总结,:变量的使用是有作用域范围的。,作用域划分,:全局作用域、函数作用域和块级作用域(,ES6,提供的)。,不同作用域对应的变量,:全局变量、局部变量、块级变量(,ES6,提供的)。,demo.js,文件,函数,含有,,如,for,函数作用域,全局作用域,块级作用域,4.2,变量的作用域,全局变量,:不在任何函数内声明的变量(显示定义)或在函数内省略,var,声明变量(隐式定义)都称为全局变量。,作用范围,:它在同一个页面文件中的所有脚本内都可以使用。,demo.js,文件,var num=1;,函数,sum=0;,全局变量,4.2,变量的作用域,局部变量

11、在函数体内利用,var,关键字定义的变量称为局部变量,它仅在该函数体内有效。,demo.js,文件,var num=1;,函数,var sum=0;,局部变量,4.2,变量的作用域,块级变量,:,ES6,提供的,let,关键字声明的变量称为块级变量,仅在“,”中间有效,如,if,、,for,或,while,语句等。,块级变量,demo.js,文件,var num=1;,函数,let sum=0;,for,循环,let i=2;,4.2,变量的作用域,多,学,一,招,垃圾回收机制,在,JavaScript,中,局部变量只有在函数的执行过程中存在,而在这个过程中会为局部变量在(栈或堆)内存上分

12、配相应的空间,以存储它们的值,然后在函数中使用这些变量,直到函数结束。而一旦函数执行结束,局部变量就没有存在必要了,此时,JavaScript,就会通过垃圾回收机制自动释放它们所占用的内存空间。,4.2,变量的作用域,多,学,一,招,垃圾回收机制,在开发中若要保留局部变量的值,可以通过以下两种方式实现:,/,第,1,种方式:利用,return,返回,function test(,num,),num,=,num,+1;,return,num,;,var,num,=test(24);,console.log(,num,);/,输出结果:,25,/,第,2,种方式:利用全局变量保存,var,memo

13、ry;,function test(,num,),memory=,num,+1;,test(24);,console.log(memory,);/,输出结果:,25,4.3,匿名函数,函数表达式,概念,:所谓函数表达式指的是将声明的函数赋值给一个变量,通过变量完成函数的调用和参数的传递,它也是,JavaScript,中另一种实现自定义函数的方式。,4.3,匿名函数,函数表达式,var fn=function sum(num1,num2),return,num1+num2;,;,fn();,sum();,function,sum(num1,num2),return,num1+num2;,;,函数

14、表达式,函数声明方式,函数的定义方式不同,函数的调用方式不同,函数定义与调用顺序不同,4.3,匿名函数,匿名函数,概念,:,匿名函数指的是没有函数名称的函数,。,作用,:,可以有效的避免全局变量的污染以及函数名的冲突问题。,说明,:,既是函数表达式的另一种表示形式,又可通过函数声明的方式实现调用。,4.3,匿名函数,匿名函数,var fn=function(num1,num2),return num1+num2;,;,fn(1,2);,(function(num1,num2),return num1+num2;,)(2,3);,document.body.onclick =function()

15、alert(Hi,everybody!);,;,函数表达式中省略函数名,处理事件,自调用方式,4.3,匿名函数,多,学,一,招,箭头函数,概念,:,ES6,中引入了一种新的语法编写匿名函数,我们称之为箭头函数。,特点,:一个箭头函数表达式的语法比一个函数表达式更短。,4.3,匿名函数,多,学,一,招,箭头函数,(,p1,p2,pN)=statements,参数,函数体,多个参数:,(p1,p2,pN,),一个参数:,(p1),或,p1,没有参数:,(),或,_,函数体:,statements,返回值:,return expression;,函数体只有一条语句:,expression,4.3,

16、匿名函数,多,学,一,招,箭头函数,/,设置,1,个参数,var,fn1=x=x+2;,console.log(fn1(4,);/,输出结果:,6,/,设置,2,个参数,var,fn2=(x,y)=x+y;,console.log(fn2(1,2),);/,输出结果:,3,示例,4.3,匿名函数,多,学,一,招,箭头函数,值得一提,箭头函数中箭头“,=,”不是操作符或者运算符,但是箭头函数相比普通的函数受操作符的优先级影响。,4.3,匿名函数,回调,函数,概念,:所谓回调函数指的就是一个函数,A,作为参数传递给一个函数,B,,然后在,B,的函数体内调用函数,A,。此时,我们称函数,A,为回调函

17、数。,提示,:匿名函数常用作函数的参数传递,实现回调函数。,应用,:函数体中某部分功能由调用者决定,此时可以使用回调函数。,4.3,匿名函数,回调,函数,在,JavaScript,中还,为数组,提供了很多利用,回调函数,实现具体功能的方法。,方法名称,功能描述,find(),返回数组中满足回调函数的第一个元素的值,否则返回,undefined,every(),测试数组的所有元素是否都通过了回调函数的测试,some(),测试数组中的某些元素是否通过由回调函数实现的测试,forEach(),对数组的每个元素执行一次提供的函数,map(),创建一个新数组,其结果是该数组中的每个元素都调用一次提供的回

18、调函数后返回的结果,reduce(),对累加器和数组中的每个元素(从左到右)应用一个函数,将其减少为单个值,reduceRight(),接收一个函数作为累加器(,accumulator,)和数组的每个值(从右到左)将其减少为单个值,4.3,匿名函数,回调,函数,以,map(),方法为例进行演示,,对,arr,数组中的每个元素都按顺序调用一次回调函数,。,var arr=a,b,c;,arr.map(function(value,index),console.log(value,index);,);,参数,:,map(),的参数是一个回调函数,fn,。,fn,的,第,1,个,参数表示当前数组的元

19、素,。,fn,的,第,2,个,参数表示对应元素的索引下标,。,返回值,:,回调函数每次执行后的返回值会组合起来形成一个新数组。,示例结果,:,在控制台,依次可,查看到,,,“,a 0,”,、,“,b 1,”,和,“,c 2,”。,4.3,匿名函数,回调,函数,思考,:如何利用,map(),方法实现二维数组的转置?,var,arr,=1,2,3,4,5,6,7,8,9;,/,待转置的数组,var,reverse=,arr,1.map(function(col,i,),/,利用,i,获取转置后数组元素的下标,return,arr.map,(function(row),/,返回转置后新组合而成的数组

20、元素,return row,i,;,/,返回转置前数组元素的指定索引的元素,);,);,具体实现,4.4,嵌套与递归,函数嵌套与作用域链,什么是嵌套函数,:,是在一个函数内部存在另一个函数的声明,。,特点,:,内层函数只能在外层函数作用域内执行,在内层函数执行的过程中,若需要引入某个变量,首先会在当前作用域中寻找,若未找到,则继续向上一层级的作用域中寻找,直到全局作用域,我们称这种链式的查询关系为,作用域链,。,4.4,嵌套与递归,函数嵌套与作用域链,全局作用域,var i=10;,fn1,函数,fn2,函数,alert(i);,作用域链,符号含义参考,F,:表示向上查找,N,:没有找到,Y,

21、找到,N,F,N,F,Y,4.4,嵌套与递归,递归调用,概念,:,递归调用是函数嵌套调用中一种特殊的调用。它指的是一个函数在其函数体内调用自身的过程,这种函数称为递归函数,。,4.4,嵌套与递归,递归调用,下面以,计算,阶乘,为例进行演示。,4.4,嵌套与递归,递归调用,注意,递归调用虽然在遍历维数不固定的多维数组时非常合适,但它占用的内存和资源比较多,同时难以实现和维护,因此在开发中要慎重使用函数的递归调用。,4.4,嵌套与递归,【,案例,】,求斐波那契数列第,N,项的值,了解什么是斐波那契数列,斐波那契数列又称黄金分割数列,,如,“,1,1,2,3,5,8,13,21,”,。,找规律:,

22、这个数列从第,3,项开始,每一项都等于前两项之和。,代码实现思路,小于,0,,给出错误提示信息。,等于,0,,返回,0,。,等于,1,,返回,1,。,大于,1,,按找到的规律并利用函数递归调用实现。,4.5,闭包函数,什么是闭包函数,在,JavaScript,中,内嵌函数可以访问定义在外层函数中的所有变量和函数,并包括其外层函数能访问的所有变量和函数。但是在,函数外部,则,不能访问函数的内部变量和嵌套函数,。此时就可以使用“,闭包,”来实现。,4.5,闭包函数,什么是闭包函数,所谓“,闭包,”指的就是有权访问另一函数作用域内变量(局部变量)的函数。它最主要的用途是以下两点:,可以在函数外部读取

23、函数内部的变量,。,可以让变量的值始终保持在内存中。,4.5,闭包函数,什么是闭包函数,注意,由于闭包会使得函数中的变量一直被保存在内存中,内存消耗很大,所以闭包的滥用可能会降低程序的处理速度,造成内存消耗等问题。,4.5,闭包函数,闭包函数的实现,闭包的常见创建方式,:,就是在一个函数内部创建另一个函数,通过另一个函数访问这个函数的局部变量,,具体参考教材例,4-7,。,动手实践,网页计算器,代码实现思路,:,编写,HTML,页面,两个文本框用于输入数据,,4,个按钮用于完成加减乘除运算,最后一个文本框显示计算结果。,编写,calc(),函数,获取并转换输入的数据,判断,不合法给出提示,调用指定函数完成相关计算。,编写函数,实现加、减、乘、除运算。,本章小结,本章首先介绍了什么是函数、函数的定义、调用和返回值的设置,然后讲解了变量的作用域,接着针对匿名函数、嵌套、递归和闭包的应用进行讲解。通过本章的学习,希望读者能够熟练掌握函数的使用。,

展开阅读全文

开通  VIP会员、SVIP会员  优惠大
下载10份以上建议开通VIP会员
下载20份以上建议开通SVIP会员


开通VIP      成为共赢上传
相似文档                                   自信AI助手自信AI助手
搜索标签

当前位置:首页 > 包罗万象 > 大杂烩

移动网页_全站_页脚广告1

关于我们      便捷服务       自信AI       AI导航        抽奖活动

©2010-2025 宁波自信网络信息技术有限公司  版权所有

客服电话:4009-655-100  投诉/维权电话:18658249818

gongan.png浙公网安备33021202000488号   

icp.png浙ICP备2021020529号-1  |  浙B2-20240490  

关注我们 :gzh.png    weibo.png    LOFTER.png 

客服