一起聊聊JavaScript函数的定义与基本使用

一起聊聊JavaScript函数的定义与基本使用

浏览次数:701次
信息来源: 银河系资源网
更新日期: 2022-09-19
文章简介

本篇文章给大家带来了关于javascript的知识,其中主要整理了函数的定义与基本使用的问题,包括了用函数语句定义、函数的调用、未定义的实参等等内容,下面一起来看一下,希望对大家有帮助。1.用函数语句定义先给一个...

本篇文章给大家带来了关于javascript的知识,其中主要整理了函数的定义与基本使用的问题,包括了用函数语句定义、函数的调用、未定义的实参等等内容,下面一起来看一下,希望对大家有帮助。

1.用函数语句定义

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

function sumArray(arr) {  
    var sum = 0;  
    for(var i = 0,aLength = arr.length;i < aLength;i++) {  
        sum += arr[i];  
    }  
    return sum;  }

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

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

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

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

2.用表达式定义

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

  • 带名字的;

var funct = function getMax(a,b) {  
    return a>b?a:b;  };//注意这后面的分号不能少,因为我们定义的是一个变量!

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

var funct = function getMax(a,b) {  
    return a>b?a:b;  
};  
console.log(funct(1,2));//输出2
  • 匿名函数;
    所谓匿名函数就是关键字function之后直接是参数列表:

var funct = function(a,b) {  
    return a>b?a:b;  };

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

var funct = function(a,b) {  
    return a>b?a:b;  };  console.log(funct(1,2));//输出2

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

3.函数的调用

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

//函数的定义:求三个数的最大值  
function max(a,b,c) {  
    if(a > b) {  
        if(a > c)  
            return a;  
        else   
            return c;  
    }  
    else {  
        if(b > c)  
            return b;  
        else   
            return c;  
    }  
}  
//调用该函数  
var result = max(1,2,3);//result为3  
console.log(result);//输出3

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

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

var ob = {  
    id:1,  
    getMax:function(a,b) {  
        return a>b?a:b;  
    }  };  var result = ob.getMax(2,1);//result值为2  var result1 = ob["getMax"](2,1);//result1的值也是2

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

4.未定义的实参

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

function myFunction(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函数,得到相关的结果。

标签: javascript
javascript是否属于html5
« 上一篇
javascript中有没有多态
下一篇 »
  • react-dnd怎么实现拖拽
    1774阅读
    实现方法:1、利用“import{DndProvider}from &#39;react-dnd&#39;”定义一个可拖拽的范围;2、利用“import{useDrag}from &#39;react-dnd&#39;”将DragSource包裹住组件,使其可以拖动即可。本教程操作环境:Window...
  • 引入Css样式中link和rel是什么意思
    1010阅读
    引入Css样式中的link和rel:1、link是html中用于定义文档与外部资源关系的标签,最常见的用途就是连接css样式表;2、rel是规定当前文档与被链接文档或者资源之间关系的属性,引入样式语法为“<link rel="stylesheet"...
  • 浅析Node中Express的错误处理中间件
    992阅读
    本篇文章带大家了解一下Node中Express的错误处理中间件,介绍一下定义错误处理中间件、与 async/await 一起使用的方法,希望对大家有所帮助!Express 的错误处理中间件可帮助您处理错误,而无需重复同样的工作。假设...
  • jquery中prev的含义是什么
    938阅读
    在jquery中,prev的含义是返回前一个同级元素;该方法用于返回前一个共享相同父元素的元素,并且该方法只返回一个元素,会沿着DOM元素的前一个同级元素向后遍历,语法为“元素对象.prev(搜索前一个同级元素范围的选择...
  • javascript怎么修改元素的style属性
    930阅读
    在javascript中,可以利用setAttribute()方法来修改style属性,该方法可以为一个已存在的指定属性修改属性值,语法“元素对象.setAttribute("style","样式代码");”。本教程操作环境:windows7系统、javascript1.8.5...
  • jquery怎么增加一个li元素
    855阅读
    增加li元素的方法:1、用“$("ul").append(li元素)”;2、用“$(li元素).appendTo("ul")”;3、用“$("ul").prepend(li元素)”;4、用“$(li元素).prependTo("ul")”。本教程操作环境:windows7系统、jquery1.10.2版...
  • jquery怎么移除多个class
    853阅读
    在jquery中,可以使用removeClass()方法来移除多个class类,只需要给该方法传入类名作为参数即可,语法“$(selector).removeClass("类名列表")”,多个类名间使用空格分隔;若省略参数,则会移除所有类。本教程操作环...
  • es6中引入了什么作用域
    842阅读
    es6中引入了“块级作用域”;es5中只有全局作用域和函数作用域,es6中由一对大括号包裹形成的作用域就是块级作用域,并明确允许在块级作用域中声明函数,函数声明语句的行为类似于let,在块级作用域之外不可引用。本...
  • web前端笔试题库之CSS篇
    828阅读
    之前的文章《web前端笔试题库之HTML篇》中,我们分享了一些关于HTML的前端面试题。下面本篇文章就接着上一篇,分享css部分的笔试题(附答案),大家快看看能答对几个!1、Q: CSS 属性是否区分大小写? ``` ul { ...
  • jquery怎么根据id改变元素值
    814阅读
    jquery根据id改变值的方法:1、给元素设置id属性;2、使用“$("#id属性值")”语句获取指定元素对象;3、使用“元素对象.html("新值")”、“元素对象.text("新值")”或“元素.val("新值")”语句来修改元素值。本教程操...

如本文对您有帮助,随意赞赏一下!