Introduction à la définition de fonctions en JavaScript

Cet article présente principalement les informations pertinentes sur JavaScriptdéfinition des fonctions Les amis qui en ont besoin peuvent se référer à

En JavaScript, la façon de définir des fonctions est la suivante. suit :

function abs(x) {
 if (x >= 0) {
  return x;
 } else {
  return -x;
 }
}

La fonction abs() ci-dessus est définie comme suit :

• fonction souligne qu'il s'agit une définition de fonction ;

• abs est le nom de la fonction

• (x) Les paramètres de la fonction sont répertoriés entre parenthèses , plusieurs paramètres Séparés par,

• { ... } est le corps de la fonction, qui peut contenir plusieurs instructions ou même aucune instruction.

Veuillez noter que lorsque les instructions à l'intérieur du corps de la fonction sont exécutées, une fois return exécuté, la fonction sera exécutée et le résultat sera renvoyé. Par conséquent, une logique très complexe peut être implémentée à l'intérieur de la fonction via un jugement conditionnel et des boucles.

S'il n'y a pas d'instruction return, le résultat sera renvoyé une fois la fonction exécutée, mais le résultat ne sera pas défini.

Puisqu'une fonction JavaScript est également un objet, la fonction abs() définie ci-dessus est en fait un objet fonction, et le nom de la fonction abs peut être considéré comme une variable pointant vers la fonction.

Donc la deuxième façon de définir une fonction est la suivante :

var abs = function (x) {
  if (x >= 0) {
    return x;
  } else {
    return -x;
  }
};

De cette façon, la fonction (x) { ... } est une fonction anonyme, qui n'a pas de nom de fonction. Cependant, cette fonction anonyme est affectée à la variable abs, la fonction peut donc être appelée via la variable abs.

Les deux définitions ci-dessus sont complètement équivalentes. Notez que la deuxième méthode nécessite d'ajouter un ; à la fin du corps de la fonction selon la syntaxe complète, indiquant la fin de l'instruction d'affectation.

Appel d'une fonction

Lors de l'appel d'une fonction, transmettez simplement les paramètres dans l'ordre :

abs(10); // 返回10
abs(-9); // 返回9

Étant donné que JavaScript permet de transmettre n'importe quel nombre de paramètres sans affecter l'appel, il n'y a aucun problème à transmettre plus de paramètres que les paramètres définis, bien que ces paramètres ne soient pas requis dans la fonction :

abs(10, 'blablabla'); // 返回10
abs(-9, 'haha', 'hehe', null); // 返回9

Il n'y a aucun problème si vous transmettez moins de paramètres que ceux définis :

abs(); // 返回NaN

À ce stade, la fonction abs(x) L'argument x recevra undéfini et sera évalué à NaN.

Pour éviter de recevoir des indéfinis, vous pouvez vérifier les paramètres :

function abs(x) {
  if (typeof x !== 'number') {
    throw 'Not a number';
  }
  if (x >= 0) {
    return x;
  } else {
    return -x;
  }
}

arguments

JavaScript dispose également d'un mot-clé gratuit, qui ne fonctionne qu'à l'intérieur d'une fonction et pointe toujours vers tous les paramètres transmis par l'appelant de la fonction actuelle. arguments est similaire à Array mais ce n'est pas un Array :

function foo(x) {
  alert(x); // 10
  for (var i=0; i<arguments.length; i++) {
    alert(arguments[i]); // 10, 20, 30
  }
}
foo(10, 20, 30);

En utilisant les arguments, vous pouvez obtenir tous les paramètres transmis par l'appelant. Autrement dit, même si la fonction ne définit aucun paramètre, vous pouvez toujours obtenir la valeur du paramètre :

function abs() {
  if (arguments.length === 0) {
    return 0;
  }
  var x = arguments[0];
  return x >= 0 ? x : -x;
}
abs(); // 0
abs(10); // 10
abs(-9); // 9

En fait, les arguments sont les plus couramment utilisés pour déterminer le nombre de paramètres entrants. Vous pouvez voir écrire comme ceci :

// foo(a[, b], c)
// 接收2~3个参数，b是可选参数，如果只传2个参数，b默认为null：
function foo(a, b, c) {
  if (arguments.length === 2) {
    // 实际拿到的参数是a和b，c为undefined
    c = b; // 把b赋给c
    b = null; // b变为默认值
  }
  // ...
}

Pour changer le paramètre du milieu b en un paramètre "facultatif", vous ne pouvez le juger qu'à travers des arguments, puis re- Ajustez les paramètres et attribuez des valeurs.

paramètres de repos

Étant donné que les fonctions JavaScript permettent de recevoir n'importe quel nombre de paramètres, nous devons utiliser des arguments pour obtenir tous les paramètres :

function foo(a, b) {
  var i, rest = [];
  if (arguments.length > 2) {
    for (i = 2; i<arguments.length; i++) {
      rest.push(arguments[i]);
    }
  }
  console.log(&#39;a = &#39; + a);
  console.log(&#39;b = &#39; + b);
  console.log(rest);
}

Afin d'obtenir des paramètres autres que les paramètres définis a et b, nous devons utiliser des arguments, et la boucle doit partir de l'index 2 pour exclure les deux premiers paramètres. façon d'écrire Très gênante, juste pour obtenir des paramètres de repos supplémentaires, existe-t-il une meilleure façon ?

La norme ES6 introduit le paramètre rest. La fonction ci-dessus peut être réécrite comme :

function foo(a, b, ...rest) {
  console.log('a = ' + a);
  console.log('b = ' + b);
  console.log(rest);
}
foo(1, 2, 3, 4, 5);
// 结果:
// a = 1
// b = 2
// Array [ 3, 4, 5 ]
foo(1);
// 结果:
// a = 1
// b = undefined
// Array []

Le paramètre rest ne peut être écrit que à la fin, marqué de... devant. D'après les résultats d'exécution, nous pouvons voir que les paramètres entrants sont d'abord liés à a et b, et les paramètres supplémentaires sont donnés à la variable rest sous la forme d'un. array. Par conséquent, nous obtenons tous les paramètres sans avoir besoin d’arguments.

Peu importe si les paramètres transmis ne sont même pas remplis avec les paramètres normalement définis, le paramètre rest recevra un tableau vide (notez qu'il n'est pas indéfini).

Étant donné que le paramètre rest est une nouvelle norme ES6, vous devez tester si le navigateur le prend en charge. Veuillez écrire une fonction sum() en utilisant le paramètre rest, qui reçoit un nombre quelconque de paramètres et renvoie leur somme :

Haut du formulaire

'use strict';
// 测试:
var i, args = [];
for (i=1; i<=100; i++) {
  args.push(i);
}
if (sum() !== 0) {
  alert(&#39;测试失败: sum() = &#39; + sum());
} else if (sum(1) !== 1) {
  alert(&#39;测试失败: sum(1) = &#39; + sum(1));
} else if (sum(2, 3) !== 5) {
  alert(&#39;测试失败: sum(2, 3) = &#39; + sum(2, 3));
} else if (sum.apply(null, args) !== 5050) {
  alert(&#39;测试失败: sum(1, 2, 3, ..., 100) = &#39; + sum.apply(null, args));
} else {
  alert(&#39;测试通过!&#39;);
}

Soyez prudent avec votre déclaration de retour

Nous avons mentionné plus tôt que le moteur JavaScript dispose d'un mécanisme pour ajouter automatiquement un point-virgule à la fin de la ligne, ce qui peut entraîner vous tombez dans un gros piège avec la déclaration return :

function foo() {
  return { name: 'foo' };
}
foo(); // { name: 'foo' }

Si vous divisez la déclaration return en deux lignes :

function foo() {
  return
    { name: 'foo' };
}
foo(); // undefined

Oui Attention, car le moteur JavaScript ajoute automatiquement des points-virgules en fin de ligne, le code ci-dessus devient en réalité :

function foo() {
  return; // 自动添加了分号，相当于return undefined;
    { name: 'foo' }; // 这行语句已经没法执行到了
}

Donc, la bonne façon d'écrire plusieurs lignes est :

function foo() {
  return { // 这里不会自动加分号，因为{表示语句尚未结束
    name: 'foo'
  };

练习

定义一个计算圆面积的函数area_of_circle()，它有两个参数：

r: 表示圆的半径；

pi: 表示π的值，如果不传，则默认3.14

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!