ECMAScript6-Funktion Standardparameter_Javascript-Tipps

Jede neue Funktion, die während des Sprachupdates hinzugefügt wird, basiert auf den Anforderungen von Millionen von Entwicklern. Die Standardeinführung kann den Aufwand für Programmierer verringern und Komfort bieten.

Wir schreiben oft so

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

Vereinfacht ausgedrückt liefern x und y einen Standardwert von 0. Wenn nicht übergeben, werden x und y mit dem Wert 0 berechnet. Nach der Übergabe wird der tatsächliche Wert zur Berechnung verwendet.

Ein weiteres Beispiel ist die Definition eines Ajax

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

Eine einfache Ajax-Funktion, gekapselt mit nativem JS. Die URL ist erforderlich, async und dataType sind optional. Wenn sie nicht ausgefüllt sind, werden Daten im JSON-Format standardmäßig synchron angefordert und zurückgegeben.

Ein weiteres Beispiel ist die Definition einer Rechteckklasse

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

Ohne die Übergabe von Parametern im Neuzustand wird ein Rechteck mit einer Standardbreite und -höhe von 200*300 erstellt.

Ob es sich um eine Calc-, Ajax-Funktion oder eine Rechteckklasse handelt, wir alle müssen den Standardwert im Funktionskörper verarbeiten. Wäre es nicht schön, wenn die Sprache ihn selbst verarbeiten würde? ES6 bietet diese Funktion (Standardparameter). Die folgenden Parameter wurden mit den neuen Funktionen von ES6 neu geschrieben:

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矩形

Wie Sie sehen können, hat ES6 den Standardwertteil von geschweiften Klammern in Klammern verschoben und auch die Operation „||“ reduziert, und der Funktionskörper wurde seitdem verschlankt. Der Standardwert des Parameters sollte sich an der Stelle befinden, an der der Parameter definiert ist, was viel einfacher aussieht. O(∩_∩)O

Standardparameter können an jeder Position definiert werden, beispielsweise durch die Definition eines

in der Mitte

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

definiert einen Standardparameter async, URL und Success sind erforderlich. In diesem Fall müssen Sie den mittleren Parameter auf undefiniert setzen

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

})

Hinweis: Nehmen Sie es nicht als selbstverständlich hin und ändern Sie undefiniert in null. Selbst wenn null == undefiniert ist, ist die Asynchronität im Funktionskörper nach der Übergabe von null null und nicht wahr.

Folgende Punkte sind zu beachten:

1. Nach der Definition der Standardparameter wird das Längenattribut der Funktion reduziert, d. h. mehrere Standardparameter werden nicht in die Berechnung der Länge einbezogen

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 und const können nicht erneut zum Deklarieren des Standardwerts verwendet werden, var kann

sein

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

Eine weitere interessante Sache ist: Der Standardparameter kann kein Werttyp sein, sondern ein Funktionsaufruf

function getCallback() {
  return function() {
    // return code
  }
}

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

Sie können sehen, dass der Parameter success hier ein Funktionsaufruf ist. Wenn der dritte Parameter beim Aufruf von Ajax nicht übergeben wird, wird die Funktion getCallback ausgeführt, die eine neue Funktion zurückgibt, die dem Erfolg zugewiesen ist. Dies ist eine sehr leistungsstarke Funktion, die Programmierern viel Raum für Fantasie lässt.

Mit dieser Funktion können Sie beispielsweise die Übergabe eines bestimmten Parameters erzwingen, andernfalls wird ein Fehler gemeldet

function throwIf() {
  throw new Error('少传了参数');
}

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

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er gefällt Ihnen allen.