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总结:
- 终止代码继续运行
- 函数运行后返回一个结果,只能返回一个
预解析
今天还学习了浏览器执行JS代码之前的预解析。预解析是浏览器在加载HTML页面时,会对JS代码进行预处理的过程。这个过程主要包括两个方面:一个是对变量的声明进行提升,另一个是对函数的声明进行提升。
预解析可以帮助我们提前发现一些语法错误,提高代码的执行效率。例如,我们可以在函数声明之前调用该函数,因为预解析会把函数声明提升到作用域的最前面。
总之,今天学习了很多关于JS函数的知识,感觉受益匪浅。希望自己能够继续深入学习,掌握更多的JS技巧,成为一名优秀的前端开发者。