目录
前言
在JS 里面,我们可能会定义非常多的相同代码或者功能相似的代码,这些代码可能需要大量重复使用。虽然 for循环语句也能实现一些简单的重复操作,但是比较具有局限性,此时我们就可以使用 JS 中的函数。 简单来说就是: 函数封装了一段可被重复调用执行的代码块。通过此代码块可以实现大量代码的重复使用。
一、函数介绍
- 作用：任意功能的代码进行“封装”，在需要的时候调用，就像一个盒子，在盒子里装代码，通过盒子名找到盒子执行里面的代码
- 函数的作用：封装代码 封装的目的：复用代码
- 语法：
// 定义函数
function 函数名(){
封装代码
}
函数名 // 函数调用语句
示例1：
<script>
// 定义函数
function fun(){
console.log("我的第一个函数")
}
fun()
</script>示例2：
// 求最大值
function getMax(){
var a=58
var b=67
var max=a
if(max<b){
max=b
}
console.log("最大值为："+max);
}
// 判断是否为闰年
function isYear(){
var year=2009
if((year%4 ==0 && year%100 !=0) || year%400==0){
console.log("2009年是闰年")
}else{
console.log("2009年不是闰年")
}
}
getMax()
isYear()二、函数参数
1.参数的使用
代码如下（示例）：
function 函数名(var m){
函数体
}
函数名(100) //将100赋给函数参数m m称为形参 var可以省略2.参数的分类
形参：定义函数时，在函数名括号中定义的变量成为形参
实参：使用函数调用语句，调用函数时，传入的实际参数值
代码如下（示例）：
function 函数名(var m){
函数体
}
函数名(100) //将100赋给函数参数m var可以省略
m称为形参
100称为实参
3.参数的个数
代码如下（示例）：
参数个数
function 函数名(m,n){
函数体
}
函数名(100,200) //将100赋给函数参数m 将200赋给函数参数n
4.形参与实参的匹配 （一一对应分配）
形参多余实参时：一一对应分配，当实参不够时，多余的形参为未定义
代码如下（示例）：
<script>
// 形参个数多余实参
function fun(m,n){
console.log('m:',m,'n',n)
}
fun(100)
</script>运行结果
实参多余形参：一一对应分配，多余的形参不用传
代码如下（示例）：
// 实参个数多余形参
function fun(m,n){
console.log('m:',m,'n',n)
}
fun(100,200,300)运行结果：
函数参数示例：
//代码如下（示例）：
<script>
function getMax(x,y){ //x=54,y=67
var a=x //54
var b=y //67
var max=a
if(max<b){
max=b
}
console.log("最大值为："+max);
}
getMax(54,67)
</script>三、函数的返回值（return语句）
return语句：
作用：
1.在函数体中，终止函数代码向下执行，返回函数调用处，让程序继续执行后面的代码
代码如下（示例）：
<script>
function getMax(x,y){ //x=54,y=67
var a=x //54
var b=y //67
var max=a
if(max<b){
max=b
}
return //终止程序执行
console.log(max)
}
getMax()
2. return返回值，将值返回到函数调用处（将return值=函数调用语句）
代码如下（示例）：
<!-- return返回值，将值返回到函数调用处（将return值=函数调用语句） -->
<script>
function getMax(x,y){ //x=54,y=67
var a=x //54
var b=y //67
var max=a
if(max<b){
max=b
}
return max
}
var m1=getMax(54,67)
var m2=getMax(37,89)
console.log('m1',m1,'m2',m2)
</script>四、函数类型
根据函数参数和返回值，分为四类
1.无参无返回值
function fun(){
}
fun()2.有参无返回值
function fun(m){
}
fun(100)3.无参有返回值
function fun(){
return 100
}
var m=fun()
4.有参有返回值
function fun(m){
return m+100
}
var m=fun(200)五、函数参数默认值
参数未定义，类型为undefined
代码如下（示例）：
<script>
function fun(m){
console.log('m',m)
}
fun()
</script>参数默认值为10
代码如下（示例）：
<script>
function fun(m){
m=m || 10 //默认值为10
console.log('m',m)
}
fun()
</script>六、函数的定义方式
1.声明式定义函数
代码如下（示例）：
function 函数名(){
}2.函数表达式（赋值式）
代码如下（示例）：
var 函数名=function(){
}
函数名()七、预解析
游览器javascript引擎负责解析执行javascript代码
执行javascript代码之前，扫描通读js代码，如果有声明式函数和var声明的变量，将其提前
javascript源代码------ >执行
预解析：1.声明式函数提前 2.var声明的变量提前
代码如下（示例）：
//源码
fun()
console.log('111 num:',num)
function fun(){
console.log('fun >>>')
}
var num=100
console.log('222 num',num)
//预解析
- 当声明式函数与var声明变量同名时，声明函数优先
- if条件不管成立不成立语句块都会预解析
代码如下（示例）：
console.log(num) //输出为undefined
if(false){
var num=100 //var num通过预解析会提前
}
console.log(num) //输出为undefined- return语句后面代码不会执行，但会进行预解析
代码如下（示例）：
function fn(){
console.log(num) //输出为undefin
if(true){
return
}
var num=100 //var num 预解析提前
}
fn()
八、列题
1.求输出结果
<script>
var data ='abc'
fun(data)
console.log(data) //输出为abc
function fun(data){ //data作用域只存在于函数
data +='xyz'
}
</script>2.百元买百鸡:用一百元钱买一百只鸡。已知公鸡5元/只,母鸡3元/只,小鸡1元/3只
//百元买百鸡:用一百元钱买一百只鸡。已知公鸡5元/只,母鸡3元/只,小鸡1元/3只
// x y z
//x+y+z=100 && 5x+3y+z/3=100
for(x=1;x<100;x++){
for(y=1;y<100;y++){
for(z=1;z<100;z++){
if((x + y +z ==100) &&(5*x + 3*y + z/3 == 100)){
console.log('x:' + x ,'y:' + y,'z' + z)
}
}
}
}
//优化
for(x=1;x<100;x++){
for(y=1;y<100;y++){
z=100-y-x
if((5*x + 3*y + z/3 == 100)){
console.log('x:' + x ,'y:' + y,'z' + z)
}
}
}3.求水仙花数
// 水仙花数
function getNarcissus(){
for(var x=0;x<=9;x++){
for(var y=0;y<=9;y++){
for(var z=0;z<=9;z++){
var sum=x*x*x+y*y*y+z*z*z
var b=x*100+y*10+z
if(sum==b && b>=100){
console.log('水仙花数为'+b)
}
}
}
}
}
getNarcissus()
总结
以上就是今天要讲的内容，本文仅仅简单介绍了函数的相关知识，函数封装了一段可被重复调用执行的代码块。通过此代码块可以实现大量代码的重复使用。