Paramètres par défaut de la fonction ECMAScript6_conseils javascript

Chaque nouvelle fonctionnalité ajoutée lors de la mise à jour du langage est extraite des besoins de millions de développeurs. L'adoption du standard peut réduire la douleur des programmeurs et apporter de la commodité.

On écrit souvent comme ça

function calc(x, y) {
  x = x || 0;
  y = y || 0;
  // to do with x, y
  // return x/y
}

Pour faire simple, x et y fournissent une valeur par défaut de 0. Lorsqu'ils ne sont pas transmis, x et y sont calculés avec la valeur 0. Une fois passée, la valeur réelle sera utilisée pour le calcul.

Un autre exemple est la définition d'un ajax

function ajax(url, async, dataType) {
  async = async !== false
  dataType = dataType || 'JSON'
  // ...
}

Une simple fonction ajax encapsulée avec du JS natif. L'url est obligatoire, async et dataType sont facultatifs. S'ils ne sont pas renseignés, la valeur par défaut est de demander et de renvoyer les données au format JSON de manière synchrone.

Un autre exemple consiste à définir une classe rectangle

function Rectangle(width, height) {
  this.width = width || 200;
  this.height = height || 300;
}

Sans passer aucun paramètre lors de la création, un rectangle avec une largeur et une hauteur par défaut de 200*300 sera créé.

Qu'il s'agisse de calc, d'une fonction ajax ou d'une classe Rectangle, nous devons tous gérer la valeur par défaut dans le corps de la fonction. Ne serait-il pas bien si le langage la gère lui-même ? ES6 fournit cette fonctionnalité (paramètres par défaut). Les éléments suivants sont calc, ajax et Rectangle réécrits avec les nouvelles fonctionnalités d'ES6.

function calc(x=0, y=0) {
  // ...
  console.log(x, y)
}
calc(); // 0 0
calc(1, 4); // 1 4
 
function ajax(url, async=true, dataType="JSON") {
  // ...
  console.log(url, async, dataType)
}
ajax('../user.action'); // ../user.action true JSON
ajax('../user.action', false); // ../user.action false JSON
ajax('../user.action', false, 'XML'); // ../user.action false XML
 
function Rectangle(width=200, height=300) {
  this.width = width;
  this.height = height;
}
var r1 = new Rectangle(); // 200*300的矩形
var r2 = new Rectangle(100); // 100*300的矩形
var r3 = new Rectangle(100, 500); // 100*500矩形

Comme vous pouvez le voir, ES6 a déplacé la partie valeur par défaut des accolades vers les parenthèses, et a également réduit l'opération "||", et le corps de la fonction a depuis été allégé. La valeur par défaut du paramètre doit être à l'endroit où le paramètre est défini, ce qui semble beaucoup plus simple. O(∩_∩)O

Les paramètres par défaut peuvent être définis à n'importe quelle position, par exemple en définissant un

au milieu

function ajax(url, async=true, success) {
  // ...
  console.log(url, async, success)
}

définit un paramètre par défaut async, url et success sont requis. Dans ce cas, vous devez définir le paramètre du milieu sur non défini

.

ajax('../user.action', undefined, function() {
   
})

Remarque, ne le prenez pas pour acquis et remplacez undefined par null Même si null == undefined, après avoir passé null, l'async dans le corps de la fonction sera nul et faux.

Les points suivants doivent être notés :

1. Après avoir défini les paramètres par défaut, l'attribut de longueur de la fonction sera réduit, c'est-à-dire que plusieurs paramètres par défaut ne sont pas inclus dans le calcul de la longueur

function calc(x=0, y=0) {
  // ...
  console.log(x, y)
}
function ajax(url, async=true, dataType="JSON") {
  // ...
  console.log(url, async, dataType)
}
console.log(calc.length); // 0
console.log(ajax.length); // 1

2. Let et const ne peuvent pas être utilisés pour déclarer à nouveau la valeur par défaut, var peut être

function ajax(url="../user.action", async=true, success) {
  var url = ''; // 允许
  let async = 3; // 报错
  const success = function(){}; // 报错
}

Une autre chose intéressante est : le paramètre par défaut ne peut pas être un type valeur, il peut s'agir d'un appel de fonction

function getCallback() {
  return function() {
    // return code
  }
}
 
function ajax(url, async, success=getCallback()) {
  // ...
  console.log(url, async, success)
}

Vous pouvez voir que le paramètre success est ici un appel de fonction. Si le troisième paramètre n'est pas passé lors de l'appel d'ajax, la fonction getCallback sera exécutée, qui renvoie une nouvelle fonction affectée au succès. Il s’agit d’une fonction très puissante qui laisse beaucoup de place à l’imagination des programmeurs.

Par exemple, vous pouvez utiliser cette fonctionnalité pour forcer la transmission d'un certain paramètre, sinon une erreur sera signalée

function throwIf() {
  throw new Error('少传了参数');
}
 
function ajax(url=throwIf(), async=true, success) {
  return url;
}
ajax(); // Error: 少传了参数

Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.