本文深入讲解JavaScript函数的基础概念，包括函数的声明与调用、参数处理、返回值、作用域及函数表达式。通过实例演示如何定义和使用函数，探讨形参与实参的区别，以及函数在不同场景下的应用。
什么是函数？
这里提供 友情链接
函数对于任何语言来说都是一个核心的概念。通过函数可以封装多条语句，并且在任何时候调用执行。ECMAScript中函数使用function关键字来声明，后跟一组参数以及函数体。（函数在声明时不会执行，只有调用才可以执行）；目的是让大量代码重复使用；
函数分为两步 “声明函数” 和 “调用函数”
函数语法：
JavaScript 函数通过 function 关键词进行定义，其后是函数名和括号 ( )。函数名可包含字母、数字、下划线和美元符号（规则与变量名相同）。
function 函数名（参数1，参数2）｛ //函数声明时的参数是 “形式参数” 形参
函数体（执行代码）；
｝
例子：
function sum(a,b){
console.log(a+b);
}
sum(1,4); // 函数调用时的参数是 “实际参数” 实参参数：
函数运行的时候，有时需要提供外部数据，不同的外部数据会得到不同的结果，这种外部数据就叫参数；
声明函数时括号中的参数时 形参，调用函数时 括号中的参数时 实参；
上面例子中的 a，b 就是sum 的形参；
形参是接受实参的；实参时传递给形参的；
多个参数中间用 逗号 隔开；
参数的作用：在函数内部某些值不能固定，我们可以通过参数在调用函数时传递不同的值进去；
<!-- 利用函数 计算任意两个数 之间 的值（1-10之间）？ -->
<script>
function sum(one, two){
var he = 0;
for(var i = one; i <= two; i++){
he = he + i;
}
console.log(he); // 55
}
sum(1, 10)
</script>函数的形参和实参个数不匹配的问题：
| 参数个数 | 说明 |
| 实参个数等于形参个数 | 输出正确结果 |
| 实参个数多余形参个数 | 只能取到形参的个数 |
| 实参个数小于形参个数 | 多的形参定义为undefined，结果为NANA |
函数参数不是必须的，是可以省略的；参数的省略：
- 如果形参的个数大于实参的个数，多余的形参的值就是 undefined；
function sum(a,b,c){ // 形参
console.log(a,b,c);
}
sum(2,5); // 实参 最后浏览器解析就来就是 2,5 ，undefined因为实参 c 没有赋值，所以就是undefined；
function sum2(a,b){
console.log(a+b)
}
sum2(6) // NaN2. 如果形参的个数小于实参的个数，多余的实参会被忽略，如果想要使用多余的实参，可以使用 arguments[ 索引 ] ，获取到想要的数值； arguments：仅能在函数中使用，是函数实际参数的集合函数，也可以作为参数传给另一个函数。 友情链接
function sum(a){ // 形参只有一个
console.log(a);
}
sum(1,2,3,4,5); // 实参的长度有5个
所以打印出来的a是 1， 实参中的其他数被忽略掉 function sum2(a,b){
console.log(a+b)
}
sum2(6) // NaN 实参个数小于形参个数，多余的形参的值就是undefined，数字加undefined 结果就为NaN
sum2(1,4) // 5 实参个数和形参个数相等，结果就是正确的
sum2(2,4,1) // 6 实参个数大于形参个数，取形参的个数如果想要使用实参中的其他数，就需要使用 arguments[ 索引的位置 ] ；来获取想要的数值
function sum(a){ // 形参只有一个
console.log(a);
console.log(arguments[2]); // 打印索引位置为 2的数字，索引位置从0开始数，所以就是 3
}
sum(1,2,3,4,5);所以打印出来就是 1 , 3
函数的声明：
JavaScript常用的两种声明函数的方法：
1. function 声明函数；
function 声明的代码区块，就是一个函数。function 后面是函数名，函数名后面是一对圆括号，里面是传入函数的参数。函数体放在大括号里面。
function func(s) {
console.log(s);
}2. 字面量定义函数（函数表达式）；
格式：
var 函数名 = function(形参){
要执行的语句
}
例子：
var func = function(a){
console.log(a);
}
func(5);
最后打印出来就是 5；函数的返回值 ： return
return： 后面的值是函数的执行结果（即函数的返回值）；
function sums(sum1,sum2){
return sum1 + sum2;
}
console.log(sums(11,3)); // 14function c(a,b){
return a+b;
}
var num= c(5,3); // 调用函数c将他赋值给 num
console.log(num);return：还可以用来终止跳出函数（当函数执行到return之后，后面的函数就不再执行了）；
// return具有终止函数的作用
function result(sum1,sum2){
return sum1 * sum2;
console.log('return终止函数，我执行不了');
}
console.log(result(11,3)); // 33return：只能返回一个值，如果返回多个结果，那么返回的结果是最后一个值 ；
// return：只能返回一个值，如果返回多个结果，那么返回的结果是最后一个值 ；
function results(sum1,sum2){
return sum1 , sum2;
}
console.log(results(11,3)); // 3要返回多个结果,中间用 逗号 隔开， 我们可以试试 数组的方式 ：
// 要返回多个结果,中间用 逗号 隔开， 我们可以试试 数组的方式
// 计算两个数的加减乘除
function re(u1 , u2) {
return [u1 + u2 , u1 - u2 , u1 * u2 , u1 / u2];
}
var SM = re(10 , 5);
console.log(SM); // [15, 5, 50, 2]案例： 比较两个数的大小，并将最大的那个输出？
// 比较两个数的大小，并将最大的那个输出？
function getMax(o,t){
return o > t ? o : t // 三元表达式
}
alert(getMax(1,8)); //8
function getMax1(t,f){
if(t > f){ // if条件判断语句
return t;
} else {
return f;
}
}
console.log(getMax1(12,23)); // 23函数的调用：
1. 函数名（）； 固定格式，通过这种方式可以调用函数；
2. 可以在html标签的事件中调用，当函数又返回值的时候，可以赋值给某个变量；
3. 函数不调用 ， 自己不执行
小案例：
<script>
// 1. 利用函数 计算任意两个数 之间 的值（1-10之间）？
function sum(one, two){
var he = 0;
for(var i = one; i <= two; i++){
he = he + i;
}
console.log(he); // 55
}
sum(1, 10);
// 2. 利用函数 计算两个数的值
function sums(sum1,sum2){
alert(sum1 + sum2)
}
sums(1,3);
</script> // 利用函数 求任意数组中的最大值 [23,4,15,24,199,59,14]
function getArrMax (arr) {
var max = arr[0]; // 假设最大值为数组的第一个数
for(var i = 1; i <= arr.length; i++){ // 循环遍历数组
if(arr[i] > max){
max = arr[i] //如果数组的值大于max 就将那个最大值赋值给 max
}
}
return max; //返回最大值
}
var maxArr = getArrMax([23,4,15,24,199,59,14]); //调用函数 将最大值赋值给maxArr
console.log(maxArr); // 199函数作用域
* - 调用函数时创建函数作用域，函数执行完毕以后，函数作用域销毁
* - 每调用一次函数就会创建一个新的函数作用域，他们之间是互相独立的
* - 在函数作用域中可以访问到全局作用域的变量
* 在全局作用域中无法访问到函数作用域的变量
* - 当在函数作用域操作一个变量时，它会先在自身作用域中寻找，如果有就直接使用
* 如果没有则向上一级作用域中寻找，直到找到全局作用域，
* 如果全局作用域中依然没有找到，则会报错ReferenceError
* - 在函数中要访问全局变量可以使用window对象
例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 函数作用域
* - 调用函数时创建函数作用域，函数执行完毕以后，函数作用域销毁
* - 每调用一次函数就会创建一个新的函数作用域，他们之间是互相独立的
* - 在函数作用域中可以访问到全局作用域的变量
* 在全局作用域中无法访问到函数作用域的变量
* - 当在函数作用域操作一个变量时，它会先在自身作用域中寻找，如果有就直接使用
* 如果没有则向上一级作用域中寻找，直到找到全局作用域，
* 如果全局作用域中依然没有找到，则会报错ReferenceError
* - 在函数中要访问全局变量可以使用window对象
*/
//创建一个变量
var a = 10;
function fun(){
var a = "我是fun函数中的变量a";
var b = 20;
//console.log("a = "+a);
function fun2(){
console.log("a = "+window.a);
}
fun2();
}
//fun();
//console.log("b = "+b);
/*
* 在函数作用域也有声明提前的特性，
* 使用var关键字声明的变量，会在函数中所有的代码执行之前被声明
* 函数声明也会在函数中所有的代码执行之前执行
*/
function fun3(){
fun4();
//console.log(a);
var a = 35;
function fun4(){
alert("I'm fun4");
}
}
//fun3();
var c = 33;
/*
* 在函数中，不适用var声明的变量都会成为全局变量
*/
function fun5(){
//console.log("c = "+c);
//c = 10;
//d没有使用var关键字，则会设置为全局变量
d = 100;
}
fun5();
//在全局输出c
//console.log("d = "+d);
var e = 23;
/*
* 定义形参就相当于在函数作用域中声明了变量
*/
function fun6(e){
alert(e);
}
fun6();
</script>
</head>
<body>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
