Maison  >  Article  >  interface Web  >  Parlons de la définition et de l'utilisation de base des fonctions JavaScript

Parlons de la définition et de l'utilisation de base des fonctions JavaScript

WBOY
WBOYavant
2022-07-01 11:59:041988parcourir

Cet article vous apporte des connaissances pertinentes sur javascript, qui organise principalement les problèmes liés à la définition et à l'utilisation de base des fonctions, y compris les définitions utilisant des instructions de fonction, les appels de fonction, les paramètres réels non définis, etc. j'espère que cela sera utile à tout le monde.

Parlons de la définition et de l'utilisation de base des fonctions JavaScript

[Recommandations associées : Tutoriel vidéo javascript, front-end web]

1 Utilisez les instructions de fonction pour définir

Donnez d'abord un exemple La fonction de cette fonction est de renvoyer la somme de. éléments du tableau ;

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

Il y a un espace après le mot-clé function sumArray est le nom de la fonction. Sa convention de dénomination est la même que celle des noms de variables : 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 ne peut contenir que des lettres, des chiffres, des traits de soulignement et des dollars. Les symboles ne peuvent pas commencer par des chiffres et ne peuvent pas être des mots-clés.

Les paramètres entre parenthèses sont également appelés 🎜paramètres formels🎜 Vous n'avez besoin que du nom du paramètre. Les paramètres peuvent être 0, 1 ou plus, séparés par ,, {} Au milieu se trouve le 🎜 corps de fonction🎜. Contient une ou plusieurs instructions. Le corps de la fonction est utilisé pour implémenter la fonction de la fonction. 🎜🎜Le mot-clé return est suivi de la 🎜valeur de retour🎜 de la fonction. La fonction peut également n'avoir aucune valeur de retour. Une fois l'exécution de la fonction terminée, la phrase return ici quittera l'exécution et l'instruction 🎜sous return ne s'exécutera plus🎜. La valeur de retour est la sortie de la fonction. 🎜🎜Une fonction définie de cette manière peut être appelée 🎜 avant ou après la définition de la fonction, à condition que la fonction et l'instruction appelant la fonction soient dans le même fichier source. 🎜🎜2. Définir à l'aide d'expressions🎜🎜 Définir une fonction à l'aide d'expressions signifie utiliser des expressions d'affectation🎜pour attribuer la fonction à une variable🎜. A ce stade, la fonction peut avoir un nom ou pas de nom. La fonction sans nom est appelée une 🎜fonction anonyme🎜. 🎜
  • With name;
function getSum(a,b,c) {  
    if(c === undefined)   
        c = 0;  
    console.log(a+b+c);  }  myFunction(1,2);
🎜 et 🎜 sont définis avec des instructions de fonction🎜 La différence est que la fonction ne peut être appelée qu'après 🎜instruction de définition de fonction🎜, et lors de l'appel, uniquement Vous pouvez utiliser le nom de variable 🎜funct, mais vous ne pouvez pas utiliser le nom de fonction getMax, tel que : 🎜
//求参数的和  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
  • Fonction anonyme 🎜 Le so ; -appelée fonction anonyme est le mot-clé function se trouve la liste de paramètres :
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
🎜Cette fonction n'a pas de nom. Elle est affectée à la variable funct</. code>, c'est pourquoi on l'appelle une fonction anonyme. De même, 🎜 ne peut appeler cette fonction qu'après cette instruction. 🎜🎜<pre class="brush:php;toolbar:false">//求最大值 function getMax(a,b) { return a&gt;b?a:b;  }  //求最小值  function getMin(a,b) {       return a&lt;b?a:b; } //下面这个函数以函数作为参数,并最终返回一个值 function getM(func,num1,num2) { return func(num1,num2); } getM(getMax,1,2);//返回2 getM(getMin,1,2);//返回1</pre>🎜🎜Résumé : La définition d'une fonction avec une expression est prête à l'emploi. Une fois définie, la fonction ne peut être appelée qu'après cette instruction🎜🎜🎜3. Appeler la fonction🎜🎜Dans la quatrième formation, nous avons Cela a été. introduit que les objets peuvent avoir leurs propres méthodes, et bien sûr ce sont aussi des fonctions. L'appel de cette fonction est légèrement différent des fonctions définies dans les deux niveaux précédents. 🎜rrreee🎜Lors de l'appel d'une fonction, vous devez transmettre le même nombre de valeurs spécifiques que les paramètres formels. La fonction ci-dessus a <code>3 paramètres, donc lors de l'appel ci-dessous, transmettez . 3</ code> une valeur spécifique, <code>1 est passé au paramètre a, 2 est passé au paramètre b , 3 est passé au paramètre c. La valeur de retour de la fonction est transmise à la variable result via le symbole d'affectation =. S'il n'y a pas de mot-clé return dans le corps de la fonction, undefined sera renvoyé. 🎜🎜Appel de fonctions définies dans l'objet : 🎜rrreee🎜La différence avec ce qui précède est que pour localiser la fonction ici, vous devez utiliser nom de l'objet.nom de la fonction ou nom de l'objet[" nom de la fonction" ], les autres sont les mêmes. 🎜🎜4. Paramètres réels non définis🎜🎜Dans la plupart des langages de programmation, le nombre et le type de paramètres réels transmis lors de l'appel d'une fonction sont vérifiés, mais JavaScript non plus 🎜vérifie🎜 Le type des paramètres réels n'est pas vérifié. pas vérifié, ni le nombre de paramètres réels. 🎜Les paramètres réels en JavaScript correspondront aux paramètres formels dans l'ordre 🎜de gauche à droite🎜, par exemple : 🎜rrreee🎜Les paramètres réels 1 sont passés dans les paramètres formels a, le paramètre réel 2 est passé dans le paramètre formel b, le paramètre réel 3 est passé dans le paramètre formel c >. Lorsque le nombre de paramètres réels est inférieur aux paramètres formels, la valeur undefined sera passée au paramètre formel de droite. Par exemple : 🎜rrreee🎜Le paramètre réel 1 est passé dans le paramètre formel a, et le paramètre réel 2 est passé dans le paramètre formel b , undefined passe le paramètre formel c. Si vous souhaitez uniquement transmettre des données aux paramètres de droite, vous pouvez transmettre undefined aux premiers paramètres réels. Par exemple : 🎜rrreee🎜Les deux méthodes ci-dessus ne sont pas assez rigoureuses. La meilleure pratique consiste à définir une 🎜valeur par défaut🎜 pour les paramètres formels qui peuvent être transmis dans des valeurs non définies. Tel que : 🎜
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视频教程web前端

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer