JS函数总结


typora-copy-images-to: media


函数-上

引入:

先问大家一个问题,大家洗过衣服吧?

手动怎么洗?拿个盆,接水,放衣服,倒洗衣粉,洗,涮,拧干

挺费劲的,有没有简便的方法?

使用洗衣机,衣服放进去,倒上洗衣粉,按开关,一切就都搞定了

在生活中这样的例子有很多,大到洗衣机空调,小到水龙头剪刀。每个工具都有自己不同的功能。为了生活方便简洁,就会使用这些工具。

程序员是一群很会享受生活的群体,所以在代码中也有很多这样的工具,就是咱们今天要学习的函数。

总结:代码中工具----函数

概念:

函数就是具备某个功能的一个工具。是完成某个功能的一段代码。

大家以前有没有用过函数呀?

parseInt() alert() 这都是函数,是系统提供的,直接拿来就能用。

系统提供了很多函数,但是并不能包含所有的功能,所以有些功能需要我们自己来写----自定义函数。函数定义好以后,就可以像系统函数一样使用了,不用再重复写了。

所以经常写的代码,就写一个函数,需要的时候调一下好了。

自定义函数怎么写?

定义语法:

function 函数名(){
   
	代码段
}
# function是一个关键字,函数名自定义,定义规则和变量的定义规则相同

当我们定义好函数,并在页面中刷新的时候,会发现这段代码并没有被执行。因为函数定义好后,是不会自动执行的,需要我们进行调用。

函数的调用:

语法:
	函数名()

调用的语法很简单,这样我们以后还需要执行函数中的代码的时候,就不用再重写那么多的代码了,只需要简单的将原来定义好的函数进行调用即可。

// 定义函数:求两个数的和
function fn(){
   
    var a = 1;
    var b = 2;
    var c = a + b;
    console.log(c);
}
// 函数定义好以后,不会自动执行,需要手动调用
fn();

带参数的函数:

函数代码中会发生改变的值用变量来代替,入口是声明函数时的小括号

function zizeng(a){
     // 叫做形参 - 形式上的参数
    var b = a + 1;
    console.log(b);
}

调用函数的时候,需要给参数赋值

zizeng(1); // 实参 - 实际上的参数,实参其实就是给形参赋值

声明函数时候带进去的那个参数叫形参

调用函数的时候给形参进行赋值的实际值是实参

函数的本质

当我们去调用函数的时候,通过函数的名称就可以调用到,那说明我们在定义函数的时候,函数就已经保存起来了,所以下面才能调用出来。

函数定义在内存中的体现:

function fn(){
   
    console.log(11)
}

这段代码,在内存创建了一个空间,名字叫fn,这个空间中存储的数据是函数这整段代码。

调用函数,就相当于将这段代码拿出来执行。

匿名函数

既然函数的定义跟变量的定义过程差不多,那函数的定义就可以像变量一样进行。

var f = function fn(){
   
	console.log(12)
}

这是定义一个变量,将函数代码放到变量空间中,这样的函数也是可以正常进行调用的,就使用变量的名称就行:

f() // 12

那fn这个函数的名字还能进行调用吗:

fn() // fn is not defined

这就说明,当将一个函数赋值给一个变量的时候,这个函数的名字就没有用了,所以我们可以将这个函数名称省略:

var f = function(){
   
	console.log(12)
}

这样还是可以正常调用的:

f()

这种没有名字的函数就叫做匿名函数。

匿名函数不能单独存在,会报错:

function(){
   
    console.log(13)
}

除非将这个函数用小括号括起来:

(function(){
   
    console.log(13)
})

但是这种没有名字的函数就无法调用了,js提供了一个专门用来调用匿名函数的语法:

(function(){
   
    console.log(13)
})()

后面加小括号就表示调用,这种定义并调用函数的语法,叫做自调用函数。即,函数定义好立即调用。

自调用函数也可以不给函数加小括号,在函数前加感叹号或波浪线:

!function(){
   
    console.log(14);
}()

~function(){
   
    console.log(14);
}()

同样是立即执行的函数。

这种函数也是可以传参数的:

(function(a,b){
   
    var c = a + b;
    document.write(c);
})(1,2);

函数的优点:

  1. 实现了代码的可重用性
  2. 实现了模块化编程

我们在使用工具的时候,很多工具需要我们带东西进去,比如洗衣服要放衣服进去,用函数这个工具来说的话,就是需要带参数。

带返回值的函数

之前的函数,在调用后,就是将函数中的代码执行了,没有得到一个结果,如果我们希望函数调用后得到一个结果,在后续的代码中,需要用到这个结果,例:

// 求三门成绩的和
function add(ch,math,en){
   
    var sum = ch + math + en;
    console.log(sum)
}
// 根据函数中求出的和,计算平均数
var avg = add(20,30,40)

上面的函数是没有办法实现的,此时,需要使用函数的返回。

不是所有的程序的结果都需要输出在页面中,有时候,我们只是想让这一段代码得出一个结果,后续代码得到这个结果后进行后续处理。那么上面的函数显然已经不适用了。我们需要使用函数的返回。

函数返回结果,在函数中使用return关键字,后面跟要得到的结果。

function add(ch,math,en){
   
    var sum = ch + math + en;
    return sum
}

此时调用函数,就得到一个结果,可以将这个结果赋值给变量或进行下一步操作。

function add(ch,math,en){
   
    var sum = ch + math + en;
    return sum
}
var a = add(20,30,40)
var avg = add(20,30,40)/3

return关键字除了可以给函数调用返回结果,还可以结束函数运行:

function add(ch,math,en){
   
    var sum = ch + math + en;
    return sum
    console.log(sum)
}
add(20,30,40)

我们发现,调用函数后,函数中的输出代码没有执行,也就是return将函数结束了。

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值