目录
前言
在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()
总结
以上就是今天要讲的内容,本文仅仅简单介绍了函数的相关知识,函数封装了一段可被重复调用执行的代码块。通过此代码块可以实现大量代码的重复使用。