Un article expliquant en détail les paramètres des fonctions JavaScript

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

foo(1, 2); //

fonction foo(a, b) {
    let a = 1; // Erreur, a a été déclaré const b = 1; // Erreur, b a été déclaré}

function add(num) {
    renvoyer num + 1 ;
}

laissez compter = 5 ;
let result = add(count); // Le processus de passage des paramètres ici peut être considéré comme num = count

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

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

laissez personne = {} ;

setName(person); // Le processus de passage des paramètres ici peut être vu comme obj = person;
console.log(person); // {name: "Xiao Ming"}

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

foo(10, 20); // Sortie 10, 20, 2 dans l'ordre.

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

foo(10, 20); // Sortie 10 et 20 dans l'ordre.

function foo(a) {
	arguments[0]++ ;
    console.log(a);
}

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

foo2(10); // Sortie 11

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

foo(1); // Sortie undéfini

foo(1, undéfini); //

laissez foo = () => {
    console.log(arguments[0]);
}foo(); // Erreur, les arguments ne sont pas définis.

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

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

foo({ sex: 'Male', age: 18, name: 'Xiao Ming' }); // Xiao Ming est un homme de 18 ans

function sayHi(name) {
    nom = nom || 'tout le monde';
    
	console.log( 'Bonjour ' + nom + '!');
}

sayHi(); // Affiche 'Bonjour à tous !'

// L'instruction if détermine la fonction sayHi(name) {
	if (nom === non défini) {
		nom = 'tout le monde' ;
	}
    
	console.log( 'Bonjour ' + nom + '!');
}

//Fonction de jugement d'expression ternaire sayHi(name) {
	nom = (nom !== non défini) nom : 'tout le monde';
	
    console.log( 'Bonjour ' + nom + '!');
}

function sayHi(name = 'Everyone') { // Lors de la définition d'une fonction, attribuez directement des valeurs aux paramètres formels console.log( 'Bonjour' + nom + '!');
}

sayHi(); // Sortie 'Bonjour à tous !' 
sayHi('Tony'); // Sortie 'Bonjour Tony !' 
sayHi(undefined); // Sortie 'Bonjour à tous !'

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

sayHi(); // Sortie 'Bonjour à tous !' 
//---------------------------------------------
fonction foo() {
    console.log('Appel de foo');
    retournez « Tony » ;
}

function sayHi(nom = foo()) {
	console.log( 'Bonjour ' + nom + '!');
}
		  
sayHi(); // Sortie 'call foo'
         // Sortie 'Bonjour Tony !' 

sayHi (non défini); // Sortie 'call foo'
                  // Sortie 'Bonjour Tony !' 

sayHi('John'); // Sortie 'Bonjour John!'

Habituellement, nous définissons des valeurs par défaut pour les paramètres afin de pouvoir omettre les paramètres de manière appropriée lors de l'appel de la fonction. Ce qu'il convient de noter ici, c'est que lorsqu'il y a plusieurs paramètres, si le paramètre avec une valeur par défaut n'est pas placé à la fin, il le sera. est en fait impossible à omettre.

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

fn(); // sortie[1, non défini]
fn(2); //sortie[2, non défini]
fn(, 2); // Erreur, erreur de syntaxe (les emplacements vides comme les tableaux ne sont pas pris en charge ici)
fn(undefined, 2); // Sortie [1, 2] (Il vaut mieux passer 1 pour plus de commodité !)

Dans l'exemple ci-dessus, la valeur par défaut définie pour le paramètre formel x semble dénuée de sens. Par conséquent, il est préférable de mettre les paramètres avec des valeurs par défaut à la fin :

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

fn(); // sortie[non défini, 2]
fn(1); //sortie[1, 2]
fn(1, 1) //sortie[1, 1]

Lorsque plusieurs paramètres ont des valeurs par défaut définies, le problème se pose à nouveau. Vous ne pouvez pas omettre les paramètres précédents et transmettre uniquement les paramètres réels au dernier paramètre.

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

fn(1, , 10) // Signaler une erreur

Nous savions plus tôt que nous pouvions éviter la restriction de l'ordre des paramètres en passant des objets. Comment implémenter les valeurs par défaut des paramètres ? Utiliser || , des instructions if ou des expressions ternaires pour juger est également une solution, mais cela semble un peu rétrograde. Viennent ensuite deux autres nouvelles méthodes dans ES6.

Les valeurs par défaut des paramètres sont utilisées conjointement avec Object.assign()

 fonction fn(obj = {}) {
    laissez defaultObj = {
        x : non défini,
        oui : 2,
        z : 3
    }
    
    soit result = Object.assign(defaultObj, obj);
    
	console.log([result.x, result.y, result.z]);
}

fn(); // sortie [non défini, 2, 3]
fn({ x : 1, z : 10 }); // Sortie [1, 2, 10]

Dans l'exemple ci-dessus, un objet defaultObj est défini dans la fonction et les propriétés qu'il contient sont utilisées comme valeurs par défaut des paramètres. Ensuite, Object.assagin() est utilisé pour fusionner l'objet entrant et l'objet par défaut. les propriétés dans defaultObj seront Les mêmes attributs de obj sont remplacés. S'il y a d'autres attributs dans obj, ils seront attribués à defaultObj. Ici, une variable est utilisée pour recevoir l'objet fusionné renvoyé.

Dans le même temps, la valeur par défaut du paramètre formel obj est également définie sur un objet vide pour empêcher qu'aucun paramètre ne soit transmis lorsque la fonction est appelée, car cela entraînerait la undefined du deuxième paramètre reçu par Object.assign(). , ce qui entraîne une erreur.

Les valeurs par défaut des paramètres et les affectations de déstructuration sont utilisées ensemble

Lorsqu'une fonction est appelée, la correspondance des paramètres réels et des paramètres formels est en fait un processus d'affectation implicite. Par conséquent, le passage des paramètres peut également être déconstruit et affecté :

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

fn({}); // Sortie [non défini, 2, 3]
fn({ x : 1, z : 10 }); // Sortie [1, 2, 10]

Dans cet exemple, seule la valeur par défaut de l'affectation de déstructuration de l'objet est utilisée et la valeur par défaut du paramètre de fonction n'est pas utilisée. Si aucun paramètre n'est transmis lors de l'appel de la fonction, une erreur sera également signalée, car cela entraînera l'échec de l'affectation de déstructuration lors de l'initialisation des paramètres, ce qui équivaut à l'exécution de code tel que {x, y = 2, z = 3} = undefined .

De même, vous pouvez utiliser la syntaxe des valeurs par défaut des paramètres pour définir un objet de déstructuration par défaut pour {x, y = 2, z = 3} , afin que les fonctions sans passer de paramètres puissent être exécutées en douceur :

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

fn(); // sortie [non défini, 2, 3]

Il y a ici des valeurs par défaut doubles, ce qui peut être un peu déroutant. Utilisez donc un morceau de pseudo-code pour expliquer le processus d'initialisation des paramètres ci-dessus :

 if(paramètres réels=== {...}) { // quand fn({...});     
    {x, y = 2, z = 3 } = {...} ;
                        
} else if (paramètre réel === non défini){ // when fn();
    {x, y = 2, z = 3 } = {} ;

}

Il existe un détail qui nécessite une attention particulière aux valeurs par défaut doubles, à savoir la différence entre la valeur par défaut de l'affectation de déstructuration et la valeur par défaut du paramètre de fonction. Voir l'exemple suivant :

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

fn(); // Sortie 1 2
fn({ x : 10 }, { y : 20 }); // Sortie 10 20
fn({},{}); // 1 non défini

Dans cette fonction, il existe deux ensembles de paramètres qui utilisent l'affectation de déstructuration. Il semble que x et y aient tous deux des valeurs par défaut. Bien qu'il s'agisse de deux formes différentes, les résultats ne sont évidemment pas les mêmes dans tous les cas. Lorsque le paramètre transmis est {} , y n'obtient pas la valeur par défaut 2. Pourquoi ? Combiné avec l'exemple de pseudocode précédent :

 fn({ x : 10 }, { y : 20 }); // Pendant l'initialisation : { x = 1 } = { x : 10 }, { y } = { y : 20 }

fn({},{}); // Pendant l'initialisation : { x = 1 } = {}, { y } = {}

Lorsque le paramètre transmis est {} , le paramètre de fonction n'est ni manquant ni undefined , donc la valeur par défaut du paramètre de fonction n'a aucun effet. En même temps, il n'y a pas de valeurs correspondantes pour x et y dans {} . Le 1 obtenu par x est la valeur par défaut de l'affectation de déstructuration, et y n'a pas de valeur par défaut pour l'affectation de déstructuration, donc par défaut, il est undefined .

Portée et zone morte temporaire des valeurs par défaut des paramètres

Il y a un autre petit détail une fois que les paramètres sont définis sur les valeurs par défaut, ils formeront leur propre portée (encapsulée dans (...) ), de sorte que les variables dans le corps de la fonction ne peuvent pas être référencées :

 fonction foo(a = b) {
    soit b = 1;
}

foo(); // Erreur, b n'est pas défini

Mais cette portée n’est que temporaire. Une fois les paramètres initialisés, cette portée n’existera plus.

Il suit également les règles des périmètres ordinaires :

 soit b = 2;

fonction foo(a = b) {
    soit b = 1;
    renvoyer un ;
}

foo(); // 2

Dans l'exemple ci-dessus, il existe une variable globale b, alors le paramètre formel a obtiendra la valeur de la variable globale b.

Bien entendu, s'il existe un paramètre formel b dans la portée du paramètre formel, il obtiendra d'abord la portée actuelle :

 soit b = 2;

fonction foo(b = 3,a = b) {
    renvoyer un ;
}

foo(); // 3

Définissez des valeurs par défaut pour plusieurs paramètres, ils seront initialisés dans l'ordre, en suivant les règles de "zone morte temporaire", c'est-à-dire que les paramètres précédents ne peuvent pas faire référence aux paramètres ultérieurs :

 fonction foo(a = b, b = 2) {
    renvoyer a + b ;
}

foo(); // Erreur, b n'est pas accessible avant l'initialisation

6. Collecte et expansion des paramètres

paramètres restants

ES6 fournit la syntaxe **paramètres restants (rest)** ( ...变量名), qui peut collecter les paramètres réels redondants de la fonction (c'est-à-dire les paramètres réels qui ne correspondent pas aux paramètres formels), de sorte qu'il n'y ait pas besoin d'utiliser arguments . Si le paramètre formel est utilisé avec l'opérateur ... , il deviendra un tableau et les paramètres réels redondants seront placés dans ce tableau.

Utilisation de base des paramètres restants :

 fonction somme (a, ... valeurs) {
 
    pour (laisser val des valeurs) {
        une +=val;
    }
    
    renvoyer un ;
}

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

Dans l'exemple ci-dessus, lors de l'initialisation des paramètres, la correspondance est d'abord effectuée en fonction de la position du paramètre, 0 est attribué à a, puis les paramètres restants 1, 2 et 3 seront placés dans les valeurs du tableau.

Ce qui suit est un exemple comparatif de l'utilisation d'objets arguments et des paramètres restants pour obtenir des paramètres :

 // Comment écrire des arguments function sortNumbers() {
	return Array.prototype.slice.call(arguments).sort();
}

// Comment écrire les paramètres restants const sortNumbers = (...numbers) => {
    retourner les nombres.sort();
}

On peut voir que les paramètres restants sont écrits de manière plus concise. Bien que arguments soit un objet de type tableau et un objet itérable, ce n'est pas un tableau après tout. Il ne prend pas en charge les méthodes de tableau. Lorsque nous utilisons arguments , si nous voulons appeler une méthode de tableau, nous devons d'abord utiliser Array.prototype.slice.call pour la convertir en tableau.

Les paramètres restants sont différents de l'objet arguments . Ce sont de véritables instances Array et peuvent facilement utiliser la méthode array. Et les fonctions fléchées prennent également en charge les paramètres restants.

De plus, l'utilisation des paramètres restants n'affecte pas la fonctionnalité de l'objet arguments , il peut toujours refléter les paramètres transmis lors de l'appel de la fonction.

• La position des paramètres restants

Le paramètre restant doit être le dernier paramètre formel, sinon une erreur sera signalée.

 // Fonction de rapport d'erreurs fn1(a, ...rest, b) {
	console.log([a, b, rest]);
} 

// Manière correcte d'écrire la fonction fn2(a, b, ...rest) {
    console.log([a, b, rest]);
}

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

Développer la syntaxe

Auparavant, nous savions comment collecter les paramètres redondants dans un tableau, mais parfois nous devons faire le contraire, comme transmettre les éléments d'un tableau à une fonction séparément au lieu de passer dans un tableau, comme ceci :

 fonction somme(...valeurs) {
    soit somme = 0 ;
    
    pour (laisser val des valeurs) {
        somme += val;
    }
    
    retourner la somme ;
}

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

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

La fonction dans l'exemple ci-dessus accumulera toutes les valeurs transmises. Si nous la passons directement dans un tableau, nous n'obtiendrons pas le résultat souhaité.

Dans l'exemple, si un tableau est transmis, la valeur des valeurs deviendra [[1, 2, 3, 4]] , ce qui donnera un seul élément dans les valeurs du tableau, et le type de cet élément est un tableau . Ensuite, la valeur de retour de la fonction est le résultat de l'ajout de la valeur 0 et du tableau [1, 2, 3, 4] . Les deux types sont implicitement convertis en chaînes, puis additionnés. C'est un effet de concaténation de chaînes.

Pour démonter le tableau et le passer dans la fonction, il est d'abord impossible de passer les paramètres un par un - sum(arr[0], arr[1], arr[2], arr[3]); car cela n'est pas toujours possible. Vous savez combien d'éléments il y a dans le tableau, et il peut y avoir beaucoup d'éléments dans le tableau. Il n'est pas judicieux de le transmettre manuellement.

Il est plus faisable d'utiliser la méthode apply() :

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

Mais ce n’est pas encore la solution optimale, alors voici le point clé !

La nouvelle **syntaxe élargie (spread)** dans ES6 peut nous aider à faire face à cette situation. Il utilise également la syntaxe ...变量名. Bien qu'elle soit la même que la syntaxe des paramètres restants, son objectif est complètement opposé. Elle peut diviser un objet itérable en une séquence de paramètres séparés par des virgules.

Lorsque la fonction est appelée, son application est la suivante :

 somme(...arr); // 10

// Équivalent à sum(1,2,3,4);

Il peut même être utilisé avec des valeurs régulières à volonté, il n'y a aucune restriction sur les positions avant et arrière, et plusieurs objets itérables peuvent être transmis en même temps :

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

L'opérateur d'expansion ... équivaut pour nous à terminer l'opération de transmission manuelle des paramètres séparément. La fonction sait seulement que les paramètres réels reçus sont des valeurs individuelles et n'auront pas d'autres effets en raison de l'existence de l'opérateur d'expansion.

Bien que les exemples ci-dessus concernent tous des tableaux, la syntaxe d'expansion peut faire plus que cela. D'autres objets itérables tels que des chaînes et des objets littéraux peuvent être développés. Pour plus d'informations, veuillez consulter → Syntaxe d'expansion.

Résumer

• Les paramètres formels sont des variables locales déclarées dans la fonction. Les paramètres réels transmis à la fonction seront affectés aux paramètres formels. Le passage des paramètres de la fonction est en fait un processus d'affectation implicite.

• Le nombre de paramètres formels et de paramètres réels peut ne pas être égal :

  ● Les paramètres formels avec des paramètres réels manquants obtiendront la valeur par défaut undefined .

  ● Des paramètres réels supplémentaires sont accessibles via l'objet arguments , à l'exception des fonctions fléchées.

• Vous pouvez transmettre l'objet afin que l'ordre de passage des paramètres ne soit plus important et laisser les propriétés de l'objet être utilisées comme paramètres réels.

• Valeur par défaut du paramètre ES6 : la valeur par défaut sera obtenue uniquement si la valeur du paramètre est manquante ou undefined lors de l'appel de la fonction.

  ● Les paramètres qui définissent les valeurs par défaut peuvent être omis uniquement s'ils sont placés en dernière position.

  ● La valeur par défaut du paramètre formel ne peut pas faire référence aux variables du corps de la fonction, mais elle peut faire référence aux paramètres formels précédents et aux variables externes.

  ● L'implémentation de valeurs par défaut via Object.assign() ou une affectation de déstructuration peut rendre la méthode de transmission des paramètres plus flexible.

• La principale différence entre les paramètres et arguments restants :

  ● Les paramètres restants contiennent uniquement les paramètres réels qui n'ont pas de paramètres formels correspondants, tandis que arguments contient tous les paramètres réels transmis à la fonction.

  ● Les paramètres restants sont de véritables instances Array , tandis que arguments sont simplement des objets de type tableau.

• Les paramètres restants ainsi que la syntaxe d'expansion utilisent ... , dans les scénarios liés aux fonctions :

  ● Apparaît à la fin de la liste des paramètres de fonction et constitue le paramètre restant.

  ● Apparaît dans les appels de fonction, il s'agit d'une syntaxe d'expansion.

Ce qui précède est un article qui explique les détails des paramètres dans les fonctions JavaScript. Pour plus d'informations, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !