Einführung in die Definition von Funktionen in JavaScript

In diesem Artikel werden hauptsächlich relevante Informationen zum JavaScriptDefinieren von Funktionen vorgestellt. Freunde, die sie benötigen, können sich auf

In JavaScript beziehen folgt:

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

Die obige abs()-Funktion ist wie folgt definiert:

• function weist darauf hin, dass dies der Fall ist eine Funktionsdefinition;

• abs ist der Name der Funktion;

• (x) Die Parameter der -Funktion sind In Klammern aufgeführt , mehrere Parameter. Getrennt durch,

• { ... } ist der Funktionskörper, der mehrere Anweisungen oder sogar keine Anweisungen enthalten kann.

Bitte beachten Sie, dass bei der Ausführung der Anweisungen im Funktionskörper nach der Ausführung von return die Funktion ausgeführt und das Ergebnis zurückgegeben wird. Daher kann innerhalb der Funktion durch bedingte Beurteilung und Schleifen eine sehr komplexe Logik implementiert werden.

Wenn keine Return-Anweisung vorhanden ist, wird das Ergebnis nach Ausführung der Funktion zurückgegeben, das Ergebnis ist jedoch undefiniert.

Da eine JavaScript-Funktion auch ein Objekt ist, ist die oben definierte abs()-Funktion tatsächlich ein Funktionsobjekt, und der Funktionsname abs kann als Variable betrachtet werden, die auf die Funktion zeigt.

Die zweite Möglichkeit, eine Funktion zu definieren, ist also wie folgt:

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

Auf diese Weise ist Funktion (x) { ... } eine anonyme Funktion, die keinen Funktionsnamen hat. Diese anonyme Funktion wird jedoch der Variablen abs zugewiesen, sodass die Funktion über die Variable abs aufgerufen werden kann.

Beachten Sie, dass die zweite Methode gemäß der vollständigen Syntax das Hinzufügen eines ; am Ende des Funktionskörpers erfordert.

Aufrufen einer Funktion

Wenn Sie eine Funktion aufrufen, übergeben Sie einfach die Parameter in der Reihenfolge:

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

Da JavaScript die Übergabe einer beliebigen Anzahl von Parametern zulässt, ohne den Aufruf zu beeinflussen, ist es kein Problem, mehr Parameter als die definierten Parameter zu übergeben, obwohl diese Parameter innerhalb der Funktion nicht erforderlich sind:

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

Es ist kein Problem, wenn Sie weniger Parameter als definiert übergeben:

abs(); // 返回NaN

Zu diesem Zeitpunkt erhält die abs(x)-Funktion das Argument x undefiniert und wird zu NaN ausgewertet.

Um zu vermeiden, dass Sie undefiniert erhalten, können Sie die Parameter überprüfen:

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

Argumente

JavaScript verfügt außerdem über ein freies Schlüsselwort „Argumente“, das nur innerhalb einer Funktion funktioniert und immer auf alle Parameter verweist, die vom Aufrufer der aktuellen Funktion übergeben werden. arguments ähnelt Array, ist aber kein 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);

Mit Argumenten können Sie alle vom Aufrufer übergebenen Parameter abrufen. Mit anderen Worten: Auch wenn die Funktion keine Parameter definiert, können Sie dennoch den Wert des Parameters abrufen:

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

Tatsächlich werden am häufigsten Argumente verwendet um die Anzahl der eingehenden Parameter zu bestimmen. Möglicherweise sehen Sie Folgendes:

// 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变为默认值
  }
  // ...
}

Um den mittleren Parameter b in einen „optionalen“ Parameter zu ändern, können Sie ihn nur anhand von Argumenten beurteilen und dann erneut Parameter anpassen und Werte zuweisen.

Restparameter

Da JavaScript-Funktionen den Empfang einer beliebigen Anzahl von Parametern ermöglichen, müssen wir Argumente verwenden, um alle Parameter zu erhalten:

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);
}

Um andere Parameter als die definierten Parameter a und b zu erhalten, müssen wir Argumente verwenden und die Schleife muss bei Index 2 beginnen, um die ersten beiden Parameter auszuschließen Schreibweise Sehr umständlich, nur um zusätzliche Restparameter zu erhalten, gibt es einen besseren Weg?

Der ES6-Standard führt den Rest-Parameter ein. Die obige Funktion kann wie folgt umgeschrieben werden:

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 []

Der Rest-Parameter kann nur geschrieben werden am Ende, markiert mit... vorn Aus den laufenden Ergebnissen können wir ersehen, dass die eingehenden Parameter zuerst an a und b gebunden sind und die zusätzlichen Parameter in Form von an an den Variablenrest übergeben werden Array. Daher erhalten wir alle Parameter, ohne dass Argumente erforderlich sind.

Es spielt keine Rolle, ob die übergebenen Parameter nicht einmal mit den normalerweise definierten Parametern gefüllt sind, der restliche Parameter erhält ein leeres Array (beachten Sie, dass es nicht undefiniert ist).

Da es sich bei dem Rest-Parameter um einen neuen ES6-Standard handelt, müssen Sie testen, ob der Browser ihn unterstützt. Bitte schreiben Sie eine sum()-Funktion mit dem Rest-Parameter, die eine beliebige Anzahl von Parametern empfängt und deren Summe zurückgibt:

Top of the form

'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;);
}

Seien Sie vorsichtig mit Ihrer Return-Anweisung

Wir haben bereits erwähnt, dass die JavaScript-Engine über einen Mechanismus verfügt, um automatisch ein Semikolon am Ende der Zeile hinzuzufügen, was zu Problemen führen kann Sie geraten mit der Rückgabeerklärung in eine große Falle:

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

Wenn Sie die Rückgabeerklärung in zwei Zeilen aufteilen:

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

Ja. Seien Sie vorsichtig, da die JavaScript-Engine am Ende der Zeile automatisch Semikolons hinzufügt. Der obige Code lautet tatsächlich:

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

Die richtige Art, mehrere Zeilen zu schreiben, ist also:

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

练习

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

r: 表示圆的半径；

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

Das obige ist der detaillierte Inhalt vonEinführung in die Definition von Funktionen in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!