js函数基础

274 阅读4分钟

JavaScript(JS)中的函数可以帮助我们更好地组织代码,提高代码的可读性和可维护性。

在JavaScript中,定义函数的方式有两种:

一种是使用function关键字:使用function关键字定义的函数叫做命名函数,

function 函数名(){
	代码段
}
#function是一个关键字,函数名自定义,定义规则和变量的定义规则相同另一种是使用表达式。

而使用表达式定义的函数叫做匿名函数。

匿名函数,顾名思义,就是没有名字的函数。在实际开发中,我们经常使用匿名函数来封装一段可以重用的代码。匿名函数的写法比较简单,只需要在函数表达式后面加上一对括号就可以了。

var f = function fn(){
    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);

带返回值的函数

带返回值的函数,指的是函数执行完毕后,会返回一个值。在JavaScript中,使用return关键字来指定函数的返回值。当函数执行到return语句时,会立即返回指定的值,并结束函数的执行。 之前的函数,在调用后,就是将函数中的代码执行了,没有得到一个结果,如果我们希望函数调用后得到一个结果,在后续的代码中,需要用到这个结果,例:

// 求三门成绩的和
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将函数结束了。

return在返回结果的时候,只能返回一个结果,不能返回多个:

function add(ch,math,en){
    var sum1 = ch + math
    var sum2 = ch + math + en
    return sum1,sum2
}
var res = add(20,30,40)
console.log(res) // 90

调用后的res值得到一个90的结果,就说明return只能得到一个结果,不能得到多个。

return总结:

  1. 终止代码继续运行
  2. 函数运行后返回一个结果,只能返回一个

预解析

今天还学习了浏览器执行JS代码之前的预解析。预解析是浏览器在加载HTML页面时,会对JS代码进行预处理的过程。这个过程主要包括两个方面:一个是对变量的声明进行提升,另一个是对函数的声明进行提升。

预解析可以帮助我们提前发现一些语法错误,提高代码的执行效率。例如,我们可以在函数声明之前调用该函数,因为预解析会把函数声明提升到作用域的最前面。

总之,今天学习了很多关于JS函数的知识,感觉受益匪浅。希望自己能够继续深入学习,掌握更多的JS技巧,成为一名优秀的前端开发者。