Ein Artikel, der die Parameter in JavaScript-Funktionen ausführlich erklärt

Funktion foo(a, b) {
    console.log([a, b]);
}

foo(1, 2); //

Funktion foo(a, b) {
    let a = 1; // Fehler, a wurde deklariert const b = 1; // Fehler, b wurde deklariert}

function add(num) {
    Rückgabenummer + 1;
}

lass zählen = 5;
let result = add(count); // Der Prozess der Parameterübergabe kann hier als num = count betrachtet werden

console.log(count); // 5
console.log(result); // 6

function setName(obj) {
    obj.name = "Xiao Ming";
}

let person = {};

setName(person); // Der Prozess der Parameterübergabe kann hier als obj = person;
console.log(person); // {name: „Xiao Ming“}

Funktion foo(a, b) {
	console.log(arguments[0]);
    console.log(arguments[1]);
    console.log(arguments.length);
}

foo(10, 20); // 10, 20, 2 nacheinander ausgeben

Funktion foo() {
	console.log(arguments[0]);
    console.log(arguments[1]);
}

foo(10, 20); // 10 und 20 nacheinander ausgeben.

Funktion foo(a) {
	Argumente[0]++;
    console.log(a);
}

foo(10); // Ausgabe 11
//--------------------------
Funktion foo2(a) {
	a++;
    console.log(arguments[0]);
}

foo2(10); // Ausgabe 11

function foo(a,b) {
    Argumente[1] = 2;
    console.log(b);
}

foo(1); // Ausgabe undefiniert

foo(1, undefiniert); //

let foo = () => {
    console.log(arguments[0]);
}foo(); // Fehler, Argumente sind undefiniert.

function fn1(){
    sei fn2 = () => {
    	console.log(arguments[0]);
    }
    
    fn2();
}fn1(5);

Funktion foo(obj) {
    console.log(obj.name, obj.sex, obj.age);
}

foo({ sex: 'Male', age: 18, name: 'Xiao Ming' }); // Xiao Ming ist männlich 18

function sayHi(name) {
    name = name ||. 'jeder';
    
	console.log( 'Hallo ' + Name + '!');
}

sayHi(); // „Hallo alle zusammen!“ ausgeben

// if-Anweisung bestimmt die Funktion sayHi(name) {
	if (name === undefiniert) {
		name = 'jeder';
	}
    
	console.log( 'Hallo ' + Name + '!');
}

//Beurteilungsfunktion für ternäre Ausdrücke sayHi(name) {
	name = (name !== undefiniert) ? name : 'everyone';
	
    console.log( 'Hallo ' + Name + '!');
}

function sayHi(name = 'everyone') { // Weisen Sie beim Definieren einer Funktion den formalen Parametern direkt Werte zu console.log( ' Hallo ' + Name + '!');
}

sayHi(); // Ausgabe „Hallo zusammen!“ 
sayHi('Tony'); // Ausgabe 'Hallo Tony!' 
sayHi(undefiniert); // Ausgabe „Hallo alle zusammen!“

function sayHi(name = 'every'+'one') {
	console.log( 'Hallo ' + Name + '!');
}

sayHi(); // Ausgabe „Hallo zusammen!“ 
//-------------
Funktion foo() {
    console.log('Foo wird aufgerufen');
    gib 'Tony' zurück;
}

Funktion sayHi(name = foo()) {
	console.log( 'Hallo ' + Name + '!');
}
		  
sayHi(); // Ausgabe von 'call foo'
         // Ausgabe 'Hallo Tony!' 

sayHi(undefiniert); // Ausgabe 'call foo'
                  // Ausgabe 'Hallo Tony!' 

sayHi('John'); // Ausgabe 'Hallo John!'

Normalerweise legen wir Standardwerte für Parameter fest, damit wir die Parameter beim Aufrufen der Funktion entsprechend weglassen können. Hierbei ist zu beachten, dass bei mehreren Parametern der Parameter mit einem Standardwert nicht am Ende platziert wird ist eigentlich unmöglich wegzulassen.

 Funktion fn(x = 1, y) {
	console.log([x, y]);
}

fn(); // Ausgabe[1, undefiniert]
fn(2); //Ausgabe[2, undefiniert]
fn(, 2); // Fehler, Syntaxfehler (leere Slots wie Arrays werden hier nicht unterstützt)
fn(undefiniert, 2); // Ausgabe [1, 2] (Der Einfachheit halber ist es besser, 1 zu übergeben!)

Im obigen Beispiel scheint der für den formalen Parameter x festgelegte Standardwert bedeutungslos zu sein. Daher ist es am besten, Parameter mit Standardwerten am Ende einzufügen:

 Funktion fn(x, y = 2) {
	console.log([x, y]);
}

fn(); // Ausgabe[undefiniert, 2]
fn(1); //Ausgabe[1, 2]
fn(1, 1) //Ausgabe[1, 1]

Wenn für mehrere Parameter Standardwerte festgelegt sind, tritt das Problem erneut auf. Sie können die vorherigen Parameter nicht weglassen und nur die tatsächlichen Parameter an den letzten Parameter übergeben.

 Funktion fn(x, y = 2, z = 3) {
	console.log([x, y, z]);
}

fn(1, , 10) // Fehler melden

Wir wussten zuvor, dass wir die Einschränkung der Parameterreihenfolge durch die Übergabe von Objekten vermeiden können. Wie implementiert man Parameter-Standardwerte? Die Verwendung von || . if -Anweisungen oder ternären Ausdrücken zur Beurteilung ist ebenfalls eine Lösung, aber das scheint etwas rückständig zu sein. Als nächstes folgen zwei weitere neue Methoden in ES6.

Parameter-Standardwerte werden in Verbindung mit Object.assign() verwendet

 Funktion fn(obj = {}) {
    sei defaultObj = {
        x: undefiniert,
        y: 2,
        z: 3
    }
    
    let result = Object.assign(defaultObj, obj);
    
	console.log([result.x, result.y, result.z]);
}

fn(); // Ausgabe [undefiniert, 2, 3]
fn({ x: 1, z: 10 }); // Ausgabe [1, 2, 10]

Im obigen Beispiel wird ein Objekt defaultObj definiert und die darin enthaltenen Eigenschaften werden als Standardwerte der Parameter verwendet. Dann wird Object.assagin() verwendet, um das eingehende Objekt und das Standardobjekt zusammenzuführen Eigenschaften in defaultObj werden dieselben Attribute wie obj überschrieben. Wenn es andere Attribute in obj gibt, werden diese defaultObj zugewiesen. Hier wird eine Variable verwendet, um das zurückgegebene zusammengeführte Objekt zu empfangen.

Gleichzeitig wird auch der Standardwert des formalen Parameters obj auf ein leeres Objekt gesetzt, um zu verhindern, dass beim Aufruf der Funktion keine Parameter übergeben werden, da dies dazu führt, dass der zweite von Object.assign() empfangene Parameter undefined ist , was zu einem Fehler führt.

Parameter-Standardwerte und destrukturierende Zuweisungen werden zusammen verwendet

Beim Aufruf einer Funktion handelt es sich bei der Zuordnung tatsächlicher Parameter und formaler Parameter tatsächlich um einen impliziten Zuweisungsprozess. Daher kann die Parameterübergabe auch dekonstruiert und zugewiesen werden:

 Funktion fn({ x, y = 2, z = 3 }) {
    console.log([x, y, z]);
}

fn({}); // Ausgabe [undefiniert, 2, 3]
fn({ x: 1, z: 10 }); // Ausgabe [1, 2, 10]

In diesem Beispiel wird nur der Standardwert der Destrukturierungszuweisung des Objekts verwendet und der Standardwert des Funktionsparameters wird nicht verwendet. Wenn beim Aufruf der Funktion keine Parameter übergeben werden, wird ebenfalls ein Fehler gemeldet, da dies dazu führt, dass die Destrukturierungszuweisung während der Parameterinitialisierung fehlschlägt, was der Ausführung von Code wie {x, y = 2, z = 3} = undefined entspricht. {x, y = 2, z = 3} = undefined .

Ebenso können Sie die Syntax der Parameter-Standardwerte verwenden, um ein Standard-Destrukturierungsobjekt für {x, y = 2, z = 3} festzulegen, sodass Funktionen ohne Parameterübergabe reibungslos ausgeführt werden können:

 Funktion fn({ x, y = 2, z = 3 } = {}) {
    console.log([x, y, z]);
}

fn(); // Ausgabe [undefiniert, 2, 3]

Hier gibt es doppelte Standardwerte, was etwas verwirrend sein kann. Verwenden Sie daher einen Pseudocode, um den obigen Parameterinitialisierungsprozess zu erklären:

 if(aktuelle Parameter=== {...}) { // when fn({...});     
    { x, y = 2, z = 3 } = {...};
                        
} else if (aktueller Parameter === undefiniert){ // when fn();
    { x, y = 2, z = 3 } = {};

}

Es gibt ein Detail, das bei doppelten Standardwerten besondere Aufmerksamkeit erfordert, nämlich die Differenz zwischen dem Standardwert der Destrukturierungszuweisung und dem Standardwert des Funktionsparameters. Siehe das folgende Beispiel:

 Funktion fn ({ x = 1 } = {}, { y } = { y: 2 }){
    console.log(x, y);
}

fn(); // Ausgabe 1 2
fn({ x: 10 }, { y: 20 }); // Ausgabe 10 20
fn({},{}); // 1 undefiniert

In dieser Funktion gibt es zwei Parametersätze, die eine destrukturierende Zuweisung verwenden. Es scheint, dass sowohl für x als auch für y Standardwerte festgelegt sind. Obwohl es sich um zwei unterschiedliche Formen handelt, sind die Ergebnisse offensichtlich nicht in jedem Fall gleich. Wenn der übergebene Parameter {} ist, erhält y nicht den Standardwert 2. Warum ist das so? Kombiniert mit dem vorherigen Pseudocode-Beispiel:

 fn({ x: 10 }, { y: 20 }); // Während der Initialisierung: { x = 1 } = { x: 10 }, { y } = { y: 20 }

fn({},{}); // Während der Initialisierung: { x = 1 } = {}, { y } = {}

Wenn der übergebene Parameter {} ist, fehlt der Funktionsparameter nicht oder ist undefined , sodass der Standardwert des Funktionsparameters keine Auswirkung hat. Gleichzeitig gibt es in {} keine entsprechenden Werte für x und y. Die von x erhaltene 1 ist der Standardwert für die Destrukturierungszuweisung, und y hat keinen Standardwert für die Destrukturierungszuweisung, sodass der Standardwert undefined ist .

Umfang und temporäre Totzone der Parameter-Standardwerte

Es gibt noch ein weiteres kleines Detail: Sobald Parameter auf Standardwerte gesetzt sind, bilden sie ihren eigenen Bereich (umschlossen in (...) ), sodass auf Variablen im Funktionskörper nicht verwiesen werden kann:

 Funktion foo(a = b) {
    sei b = 1;
}

foo(); // Fehler, b ist undefiniert

Dieser Bereich ist jedoch nur vorübergehend. Nach der Initialisierung der Parameter ist dieser Bereich nicht mehr vorhanden.

Es folgt auch den Regeln gewöhnlicher Bereiche:

 sei b = 2;

Funktion foo(a = b) {
    sei b = 1;
    gib a zurück;
}

foo(); // 2

Im obigen Beispiel gibt es eine globale Variable b, dann erhält der formale Parameter a den Wert der globalen Variablen b.

Wenn sich im formalen Parameterbereich ein formaler Parameter b befindet, erhält dieser natürlich zunächst den aktuellen Bereich:

 sei b = 2;

Funktion foo(b = 3,a = b) {
    gib a zurück;
}

foo(); // 3

Legen Sie Standardwerte für mehrere Parameter fest. Sie werden der Reihe nach initialisiert und folgen den Regeln der „vorübergehenden Totzone“, dh die vorherigen Parameter können nicht auf die späteren Parameter verweisen:

 Funktion foo(a = b, b = 2) {
    gib a + b zurück;
}

foo(); // Fehler, auf b kann vor der Initialisierung nicht zugegriffen werden

6. Sammlung und Erweiterung von Parametern

verbleibende Parameter

ES6 stellt die **verbleibende Parameter (Rest)**-Syntax ( ...变量名) bereit, mit der redundante tatsächliche Parameter der Funktion (dh tatsächliche Parameter, die nicht den formalen Parametern entsprechen) erfasst werden können, sodass keine vorhanden sind Ich muss arguments verwenden. Wenn der formale Parameter mit dem ... Operator verwendet wird, wird er zu einem Array und die redundanten tatsächlichen Parameter werden in dieses Array eingefügt.

Grundlegende Verwendung der verbleibenden Parameter:

 Funktion sum(a, ...values) {
 
    for (sei es ein Wert von Werten) {
        a += val;
    }
    
    gib a zurück;
}

Summe(0, 1, 2, 3); // 6

Im obigen Beispiel wird während der Parameterinitialisierung zunächst ein Abgleich basierend auf der Parameterposition durchgeführt, a wird 0 zugewiesen und dann werden die verbleibenden Parameter 1, 2 und 3 in die Array-Werte eingefügt.

Das Folgende ist ein Vergleichsbeispiel für die Verwendung von arguments und verbleibenden Parametern zum Abrufen von Parametern:

 // So schreiben Sie Argumente function sortNumbers() {
	return Array.prototype.slice.call(arguments).sort();
}

// So schreiben Sie die restlichen Parameter const sortNumbers = (...numbers) => {
    return zahlen.sort();
}

Es ist ersichtlich, dass die übrigen Parameter prägnanter geschrieben sind. Obwohl arguments ein Array-ähnliches Objekt und ein iterierbares Objekt ist, ist es doch kein Array. Wenn wir arguments verwenden und eine Array-Methode aufrufen möchten, müssen wir sie zuerst mit Array.prototype.slice.call in ein Array konvertieren.

Die übrigen Parameter unterscheiden sich vom arguments . Sie sind echte Array Instanzen und können problemlos die Array-Methode verwenden. Und Pfeilfunktionen unterstützen auch die restlichen Parameter.

Darüber hinaus hat die Verwendung der verbleibenden Parameter keinen Einfluss auf die Funktionalität des arguments , sondern kann dennoch die beim Aufruf der Funktion übergebenen Parameter widerspiegeln.

• Die Position der übrigen Parameter

Der verbleibende Parameter muss der letzte formale Parameter sein, andernfalls wird ein Fehler gemeldet.

 // Fehlerberichtsfunktion fn1(a, ...rest, b) {
	console.log([a, b, rest]);
} 

//Korrekte Schreibweise der Funktion fn2(a, b, ...rest) {
    console.log([a, b, rest]);
}

fn2(1, 2, 3, 4) // Ausgabe [1, 2, [3, 4]]

Erweitern Sie die Syntax

Früher wussten wir, wie man redundante Parameter in einem Array sammelt, aber manchmal müssen wir das Gegenteil tun, z. B. die Elemente in einem Array separat an eine Funktion übergeben, anstatt ein Array zu übergeben, wie folgt:

 Funktion sum(...values) {
    sei Summe = 0;
    
    for (sei es ein Wert von Werten) {
        Summe += Wert;
    }
    
    Rückgabesumme;
}

sei arr = [1, 2, 3, 4];

sum(arr); // "01,2,3,4"

Die Funktion im obigen Beispiel akkumuliert alle übergebenen Werte. Wenn wir sie direkt in einem Array übergeben, erhalten wir nicht das gewünschte Ergebnis.

Wenn im Beispiel ein Array übergeben wird, wird der Wert der Werte zu [[1, 2, 3, 4]] , was zu nur einem Element in den Array-Werten führt und der Typ dieses Elements ein Array ist . Dann ist der Rückgabewert der Funktion das Ergebnis der Addition des Werts 0 und des Arrays [1, 2, 3, 4] Die beiden Typen werden implizit in Zeichenfolgen umgewandelt und dann addiert.

Um das Array zu zerlegen und an die Funktion zu übergeben, ist es zunächst unmöglich, die Parameter einzeln zu übergeben - sum(arr[0], arr[1], arr[2], arr[3]); ist nicht immer möglich. Sie wissen, wie viele Elemente das Array enthält, und es kann sein, dass es viele Elemente im Array gibt. Es ist unklug, es manuell zu übergeben.

Es ist praktikabler, die Methode apply() zu verwenden:

 sum.apply(null, arr); // 10

Aber das ist noch nicht die optimale Lösung, also kommt hier der entscheidende Punkt!

Die neue **Expand-Syntax (Spread)** in ES6 kann uns helfen, dieser Situation zu begegnen. Es verwendet auch die Syntax ...变量名. Obwohl sie mit der übrigen Parametersyntax identisch ist, ist ihr Zweck völlig entgegengesetzt. Sie kann ein iterierbares Objekt in eine durch Kommas getrennte Parametersequenz aufteilen.

Wenn die Funktion aufgerufen wird, ist ihre Anwendung wie folgt:

 sum(...arr); // 10

// Entspricht sum(1,2,3,4);

Es kann sogar nach Belieben mit regulären Werten verwendet werden, es gibt keine Einschränkung für die vordere und hintere Position und es können mehrere iterierbare Objekte gleichzeitig übergeben werden:

 sum(-1, ...arr); // 9
sum(...arr, 5); // 15
sum(-1, ...arr, 5); // 14
sum(-1, ...arr, ...[5, 6, 7]); // 27

Der Erweiterungsoperator ... entspricht für uns dem Abschluss des Vorgangs der manuellen Übergabe von Parametern. Die Funktion weiß nur, dass es sich bei den tatsächlich empfangenen Parametern um Einzelwerte handelt, und hat aufgrund der Existenz des Erweiterungsoperators keine anderen Auswirkungen.

Obwohl sich die obigen Beispiele ausschließlich auf Arrays beziehen, kann die Erweiterungssyntax noch mehr. Weitere Informationen finden Sie unter → Erweiterungssyntax

Zusammenfassen

• Formale Parameter sind in der Funktion deklarierte lokale Variablen. Die an die Funktion übergebenen tatsächlichen Parameter werden den formalen Parametern zugewiesen. Die Übergabe von Funktionsparametern ist eigentlich ein impliziter Zuweisungsprozess.

• Die Anzahl der formalen Parameter und der tatsächlichen Parameter ist möglicherweise nicht gleich:

  ● Formale Parameter mit fehlenden Aktualparametern erhalten den Standardwert undefined .

  ● Über das arguments -Objekt kann auf weitere Aktualparameter zugegriffen werden, mit Ausnahme von Pfeilfunktionen.

• Sie können das Objekt so übergeben, dass die Reihenfolge der Parameterübergabe keine Rolle mehr spielt, und die Eigenschaften im Objekt als echte Parameter verwenden.

• Standardwert des ES6-Parameters – der Standardwert wird nur abgerufen, wenn der Parameterwert beim Aufruf der Funktion fehlt oder undefined ist.

  ● Parameter, die Standardwerte festlegen, können nur weggelassen werden, wenn sie an der letzten Position platziert werden.

  ● Der Standardwert der formalen Parametereinstellung kann sich nicht auf die Variablen im Funktionskörper beziehen, er kann sich jedoch auf die vorherigen formalen Parameter und externen Variablen beziehen.

  ● Die Implementierung von Standardwerten über Object.assign() oder die Destrukturierung der Zuweisung kann die Methode zur Parameterübergabe flexibler machen.

• Der Hauptunterschied zwischen den übrigen Parametern und arguments :

  ● Die übrigen Parameter enthalten nur die tatsächlichen Parameter, die keine entsprechenden formalen Parameter haben, während arguments alle an die Funktion übergebenen tatsächlichen Parameter enthält.

  ● Die übrigen Parameter sind echte Array Instanzen, während arguments nur Array-ähnliche Objekte sind.

• Sowohl die übrigen Parameter als auch die Erweiterungssyntax verwenden in funktionsbezogenen Szenarien ... Operator:

  ● Erscheint am Ende der Funktionsparameterliste und ist der verbleibende Parameter.

  ● Kommt in Funktionsaufrufen vor und ist eine Erweiterungssyntax.

Der obige Artikel erläutert die Details der Parameter in JavaScript-Funktionen. Weitere Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.