『JavaScript』JavaScript函数的定义与基本使用

简介: 关键字function后面空一格,sumArray是函数的名字,其命名规范与变量名的命名规范相同:只能有字母、数字、下划线和美元符号,不能以数字开头,不能是关键字。括号中是参数,又叫形式参数,只需要参数名就可以。参数可以是0个、1个或者多个,相互之间用,隔开,{}中间包含的是函数体。含有一条或者多条语句。函数体用来实现函数的功能。

1.用函数语句定义

先给一个例子,该函数的功能是返回数组元素的和;

functionsumArray(arr) {  

   varsum=0;  

   for(vari=0,aLength=arr.length;i<aLength;i++) {  

       sum+=arr[i];  

   }  

   returnsum;  

}  

关键字function后面空一格,sumArray是函数的名字,其命名规范与变量名的命名规范相同:只能有字母、数字、下划线和美元符号,不能以数字开头,不能是关键字。

括号中是参数,又叫形式参数,只需要参数名就可以。参数可以是0个、1个或者多个,相互之间用,隔开,{}中间包含的是函数体。含有一条或者多条语句。函数体用来实现函数的功能。

关键字return后面是函数的返回值,函数也可以没有返回值。函数运行完return这句话这里就会退出运行,return下面的语句不再运行。返回值即函数的输出。

用这种方式定义的函数,在函数定义的前面和后面都可以调用该函数,只要函数和调用函数的语句在一个源文件里面就可以了。

2.用表达式定义

用表达式的方式定义函数,就是用赋值表达式把函数赋值给一个变量,这其实就是把函数看成一个变量。这个时候函数可以有名字,也可以没有名字,没有名字的函数叫做匿名函数

  • 带名字的;

varfunct=functiongetMax(a,b) {  

   returna>b?a:b;  

};//注意这后面的分号不能少,因为我们定义的是一个变量!  

用函数语句定义不同的是,只能在函数定义语句之后调用该函数,且调用的时候只能用变量名funct,不能用函数名getMax,如:

varfunct=functiongetMax(a,b) {  

   returna>b?a:b;  

};  

console.log(funct(1,2));//输出2  

  • 匿名函数;所谓匿名函数就是关键字function之后直接是参数列表:

varfunct=function(a,b) {  

   returna>b?a:b;  

};  

这个函数没有名字,它被赋值给了变量funct,所以叫匿名函数。同样,也只能在这一语句之后调用该函数。

varfunct=function(a,b) {  

   returna>b?a:b;  

};  

console.log(funct(1,2));//输出2  

总结:用表达式定义函数是即拿即用的,定义了就只能在这一语句之后调用该函数

3.函数的调用

在实训四中,我们曾经介绍过对象可以有自己的方法,当然这也是函数。这种函数的调用和前面两关定义的函数有细小的区别。

//函数的定义:求三个数的最大值  

functionmax(a,b,c) {  

   if(a>b) {  

       if(a>c)  

           returna;  

       else  

           returnc;  

   }  

   else {  

       if(b>c)  

           returnb;  

       else  

           returnc;  

   }  

}  

//调用该函数  

varresult=max(1,2,3);//result为3  

console.log(result);//输出3  

调用函数的时候,需要传入和形参相同个数的的具体值,上面的函数有3个参数,所以下面调用的时候传入3个具体的值,1传给参数a2传给参数b3传给参数c。函数的返回值通过赋值符号=传给了变量result。如果函数体内没有return关键字,将返回undefined

对象里定义的函数的调用:

varob= {  

   id:1,  

   getMax:function(a,b) {  

       returna>b?a:b;  

   }  

};  

varresult=ob.getMax(2,1);//result值为2  

varresult1=ob["getMax"](2,1);//result1的值也是2  

与上面的区别是,这里要定位到函数,需要使用对象名.函数名或者对象名["函数名"],其它相同。

4.未定义的实参

在大部分的编程语言里面,都会对调用函数时传入的实参个数和类型进行检查,而JavaScript不检查实参的类型,也不检查实参的个数。JavaScript中的实参会按照顺序从左到右依次匹配上形参,例如:

functionmyFunction(a,b,c) {  

   console.log(a);  

   console.log(b);  

   console.log(c);  

}  

myFunction(1,2,3);  

实参1传入形参a,实参2传入形参b,实参3传入形参c。   当实参个数少于形参时,靠右的形参会被传入值undefined。如:

function myFunction(a,b,c) {  

   console.log(a);  

   console.log(b);  

   console.log(c);  

}  

myFunction(1,2);  

实参1传入形参a,实参2传入形参bundefined传入形参c。   如果只想给右侧的参数传入数据,可以给前几个实参传入undefined。如:

function myFunction(a,b,c){  

console.log(a);  

console.log(b);  

console.log(c);  

}  

myFunction(undefined,1,2);  

上面这两种做法不够严谨,最佳实践是给可能被传入undefined值的形参设定一个默认值。如:

function getSum(a,b,c) {  

   if(c === undefined)  

       c = 0;  

   console.log(a+b+c);  

}  

myFunction(1,2);  

5.实参对象

JavaScript一切都是对象,实参也是一个对象,有一个专门的名字arguments,这个对象可以看成一个数组(类数组,不是真的数组),实参从左到右分别是arguments[0]、arguments[1]...arguments.length表示实参的个数。

//求参数的和  

function getSum() {  

   var aLength = arguments.length;  

   var sum = 0;  

   for(var i = 0;i < aLength;i++) {  

       sum += arguments[i];  

   }  

   return sum;  

}  

console.log(getSum(1,2,3,4,5))//输出15  

这里的形参直接省略,使用arguments[i]表示。

6.对象作为参数

复杂的函数通常多达十几个参数,尽管JavaScript不做参数个数和类型的检查,但是调用时实参的顺序不能乱。开发人员需要检查每一个实参和形参的对应关系,这样效率很低。一种很好的解决方案是使用对象作为参数,函数会根据对象的属性名操作参数。

function myFunction(obj) {  

   console.log(obj.name);  

   obj.number++;  

   return obj.number;  

}  

myObj = {name:"myObj",number:34};  

myFunction(myObj);//输出myObj  

console.log(myObj.number);//输出35  

7.函数对象作为另一个函数的参数

一个函数(为方便行文,称为a函数)可以作为另外一个函数(称为b函数)的参数b函数最终可以返回一个具体的值。

从原理上来说,b函数在自己的函数体内调用了a函数,所以需要把a函数的名字作为实际参数传递给b函数。如下:

//求最大值  

function getMax(a,b) {  

   return a>b?a:b;  

}  

//求最小值  

function getMin(a,b) {  

   return a<b?a:b;  

}  

//下面这个函数以函数作为参数,并最终返回一个值  

function getM(func,num1,num2) {  

   return func(num1,num2);  

}  

getM(getMax,1,2);//返回2  

getM(getMin,1,2);//返回1  

我们把a函数的名字(getMax或者getMin)传给b函数(getM()),然后在b函数内部调用传入的a函数,得到相关的结果。

相关文章
|
1天前
|
JavaScript 前端开发 安全
JavaScript函数详解
JavaScript函数的详细解析,包括函数的定义和调用方式(如一般格式、匿名函数、构造函数、自调用函数、箭头函数和严格模式)、函数参数(arguments对象、可变参数、默认参数值)、闭包的概念和应用实例。
JavaScript函数详解
|
2天前
|
JavaScript 前端开发
js函数调用与定义
js函数调用与定义
|
10天前
|
JSON JavaScript 前端开发
JavaScript第五天(函数,this,严格模式,高阶函数,闭包,递归,正则,ES6)高级
JavaScript第五天(函数,this,严格模式,高阶函数,闭包,递归,正则,ES6)高级
|
3天前
|
JSON JavaScript 数据格式
手写JS实现深拷贝函数
本文介绍了如何实现一个深拷贝函数`deepClone`,该函数可以处理对象和数组的深拷贝,确保拷贝后的对象与原始对象在内存中互不干扰。通过递归处理对象的键值对和数组的元素,实现了深度复制,同时保留了函数类型的值和基础类型的值。
11 3
|
1天前
|
缓存 JavaScript 前端开发
了解js基础知识中的作用域和闭包以及闭包的一些应用场景,浅析函数柯里化
该文章详细讲解了JavaScript中的作用域、闭包概念及其应用场景,并简要分析了函数柯里化的使用。
了解js基础知识中的作用域和闭包以及闭包的一些应用场景,浅析函数柯里化
|
3天前
|
前端开发 数据可视化 开发者
D3.js 内置的动画函数
D3.js 内置的动画函数
|
4天前
|
JavaScript 前端开发
JavaScript 函数参数
JavaScript 函数参数
21 3
|
4天前
|
存储 JavaScript 前端开发
JavaScript 函数定义
JavaScript 函数定义
17 3
|
3天前
|
JavaScript 前端开发
js防抖函数返回值问题解决方案
本文介绍了如何在JavaScript中创建一个带有返回值的防抖函数,通过结合Promise来实现。这种防抖函数可以在事件触发一定时间后再执行函数,并能处理异步操作的返回值。文章提供了防抖函数的实现代码和如何在实际项目中使用该防抖函数的示例。
14 1
|
4天前
|
JavaScript 前端开发
JS 偏函数、函数柯里化~
该文章介绍了JavaScript中偏函数和函数柯里化的概念、实现方法和使用场景,通过代码示例展示了如何创建预设参数的函数以及如何将多参数函数转换成单参数函数的链式调用。
11 0
JS 偏函数、函数柯里化~