javascript基础知识之函数(五)

函数

Js函数的定义:封装了一段可重复执行调用的代码块

目的:可以让大量代码重复使用

函数的体验

函数之求和

函数名的命名是动词,而变量名的命名是名词





    
    
    
    函数之求和










javascript基础知识之函数(五)_第1张图片

函数的使用

  • 声明函数
  • 调用函数

声明函数

  function 函数名() {
        //函数体
    }

调用函数

  函数名()

注意事项

  • function是声明函数的关键字,因此必须是小写
  • 函数是做某件事情,因此函数的命名为动词
  • 函数本身不执行函数体代码,必须要调用才能执行
  • 调用时千万不要忘记加小括号

函数的简单使用






    
    
    
    函数之初体验








javascript基础知识之函数(五)_第2张图片

函数的封装

简单而言,就是把一个功能及多个功能以函数的方式进行封装,对外只提供一个简单的函数接口。

简单理解:类似于快递打包

函数的封装之求1~10之间的累乘





    
    
    
    函数封装之1~10的累乘










javascript基础知识之函数(五)_第3张图片

函数的参数

  • 函数的参数:形参与实参
  • 声明函数时,函数名后面的小括号里面的参数被称为形参,形参是形式上的参数,是为了接收实参传递过来的值。
  • 调用函数时,函数名后面的小括号里面的参数被称为实参。
  • 函数内部的值不确定,可以通过实参传递不同的值进去
  • 函数的参数可有可无

函数案例

函数案例之任意两个数的和





    
    
    
    函数案例之求两个数的和








  

javascript基础知识之函数(五)_第4张图片

函数案例求任意两个数之间的和






    
    
    
    Document








javascript基础知识之函数(五)_第5张图片

函数的形参与实参之个数的匹配

javascript基础知识之函数(五)_第6张图片

函数的形参与实参之个数一致的情况下

函数的形参与实参个数一致的情况下,则正常输入结果






    
    
    
    函数的形参与实参个数一致的情况下








javascript基础知识之函数(五)_第7张图片

函数的实参的个数大于形参的情况下

函数形参的个数小于实参的个数,则取形参的个数为准





    
    
    
    函数的实参个数大于形参个数的情况下








在这里插入图片描述

函数的形参大于实参的情况下

函数形参的个数大于实参的个数,则结果为NaN

注意事项

  • 函数的形参可以看做未赋值的变量,值为undefined;
  • undefined加任何数值,最终结果都为NaN(非数值)





    
    
    
    函数的实参个数小于形参个数的情况下









javascript基础知识之函数(五)_第8张图片

函数参数的总结

  • 函数可以带参数,也可以不带参数
  • 函数有多个参数时,中间以英文状态下的逗号相隔
  • 声明函数时,函数后面的小括号里面的参数为形参,其默认值为undefined
  • 调用函数时,函数后面的小括号里面的参数为实参
  • 参数的形参个数与实参个数应当一致,否则结果难以预计。

函数的返回值

函数是为了实现某件事情或某种功能,最终都会将返回值返回给函数的调用者。

在函数的执行过程,遇到return便会把后面的结果返回给函数调用者。





    
    
    
    函数的返回值








javascript基础知识之函数(五)_第9张图片

函数的返回值求两个数之间的最大值

第一种:利用if语句





    
    
    
    函数的返回值求两个数之间的最大值









第二种:利用三元表达式





    
    
    
    函数的返回值求两个数之间的最大值(三元表达式)









javascript基础知识之函数(五)_第10张图片

函数的返回值求数组最大值

在实际开发中,通常用变量来接收函数的返回值






    
    
    
    函数的返回值求数组的最大值








javascript基础知识之函数(五)_第11张图片

return

return:终止函数

return后面的语句将不会被执行





    
    
    
    return后面的代码不会执行









javascript基础知识之函数(五)_第12张图片

return后面只能返回一个值

return只能返回一个值 且返回最末尾的值





    
    
    
    return只能返回一个值








javascript基础知识之函数(五)_第13张图片

return之利用数组可以返回多个值





    
    
    
    return之利用数组可以返回多个值








javascript基础知识之函数(五)_第14张图片

函数没return的情况下





    
    
    
    函数之没return的情况下









javascript基础知识之函数(五)_第15张图片

break continue return的区别

  • break:结束当前循环
  • continue:结束当前循环,继续进行下次循环
  • return:不仅可以跳出循环 还结束函数体内的代码,将结果返回给函数的调用者

通过榨汁机看透函数

javascript基础知识之函数(五)_第16张图片

arguments的使用

当我们不确定有多少实参的时候,可以使用arguments对象,arguments是函数的内置对象,存储所有传递过来的实参。




    
    
    
    arguments的使用








javascript基础知识之函数(五)_第17张图片

注意事项

  • arguments是伪数组,并不是真正意义上的数组
  • arguments具有length属性,按照索引的方式进行排序
  • arguments不能使用真正的数组方法,如push,pop

arguments之的最大值

思路:与求数组的最大值的思路一致





    
    
    
    arguments之求最大值









javascript基础知识之函数(五)_第18张图片

函数封装案例

函数封装之翻转任意数组





    
    
    
    函数封装之反转数组








javascript基础知识之函数(五)_第19张图片

函数封装之实现冒泡排序





    
    
    
    函数封装之冒泡排序









javascript基础知识之函数(五)_第20张图片

函数封装之判断闰年及平年

声明一把锁,如果是闰年,则返回true,如果不是闰年,则返回false

在这里插入图片描述






    
    
    
    函数封装之判断闰平年








javascript基础知识之函数(五)_第21张图片

函数之间可相互调用

每个代码都是一个特殊的代码块,为了完成特殊的任务,函数之间可以相互调用





    
    
    
    函数之间可相互调用








javascript基础知识之函数(五)_第22张图片

函数之相互调用的案例





    
    
    
    函数之相互调用的案例








javascript基础知识之函数(五)_第23张图片

函数之间相互调用之求二月份的天数

 feBruary函数中,将isRunYear函数作为条件表达式,如果为true,则弹出2月份有29天,如果是false,则弹出二月份有28天

  




    
    
    
    函数之间相互调用之求二月份的天数










javascript基础知识之函数(五)_第24张图片

函数的两种声明方式

function关键字声明





    
    
    
    function关键字声明函数








javascript基础知识之函数(五)_第25张图片

函数表达式声明函数





    
    
    
    函数表达式之声明函数









javascript基础知识之函数(五)_第26张图片

注意

  • fn是变量名,不是函数名
  • 声明函数和声明变量的方式差不多,只不过一个存储的是变量,一个存储的是函数
  • 函数表达式也可以传递参数。

你可能感兴趣的:(#,Javascript基础,javascript)