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将函数结束了。