Renvoyer plusieurs valeurs en JavaScript
- Retourner plusieurs valeurs à partir d’une fonction avec un tableau en JavaScript
- Renvoyer plusieurs valeurs à partir d’une fonction avec des objets en JavaScript
![Renvoyer plusieurs valeurs en JavaScript](/img/JavaScript/feature-image---return-multiple-values-in-javascript.webp)
Habituellement, une fonction se termine par un cas de retour. Le cas de retour peut avoir une valeur ou n’avoir rien à transmettre.
En JavaScript, une fonction n’est pas prise en charge pour renvoyer plusieurs valeurs. Ainsi, pour permettre de regrouper plusieurs valeurs et de les transmettre via une fonction, nous prenons l’aide de tableaux et d’objets.
Ici, nous allons démontrer l’utilisation d’un tableau pour stocker plusieurs valeurs de fonction. Et plus tard, nous verrons également comment vous pouvez utiliser un objet pour rassembler les valeurs de la fonction.
En outre, nous verrons également comment décompresser les valeurs de la fonction avec une affectation destructrice
et une déclaration de variables générales.
Retourner plusieurs valeurs à partir d’une fonction avec un tableau en JavaScript
Dans cet exemple, la fonction getValue
a deux variables, et nous les transmettrons sous forme de tableau à renvoyer.
La déclaration de la nouvelle variable feature
permettra de stocker les retours de la fonction sous la forme d’un tableau. Comme pour toute autre traversée de tableau, nous pouvons accéder aux valeurs avec des index.
Plus simplement, la fonctionnalité
ici est un autre tableau qui récupère les valeurs de synchronisation renvoyées par la fonction getValues
sous la forme d’un tableau.
Extrait de code:
function getValues() {
var hair = 'Short', color = 'Black';
return [hair, color];
}
var feature = getValues();
var x = feature[0];
var y = feature[1];
console.log(x + ' ' + y + ' Hair');
Production :
Utilisez Destructing Assignment
pour décompresser le tableau
Généralement, nous pouvons facilement déclarer des variables ou des objets pour stocker les éléments du tableau. Mais il est fastidieux de définir var
à chaque fois pour des données volumineuses.
Vous pouvez également parcourir un tableau pour accéder aux valeurs. En dehors de cela, ES6 a un nouvel ajout pour décompresser les éléments de tableau comme dans l’exemple ci-dessous.
Extrait de code:
function getValues() {
var hair = 'Short', color = 'Black';
return [hair, color];
}
var [x, y] = getValues();
console.log(x + ' ' + y + ' Hair');
Production :
Renvoyer plusieurs valeurs à partir d’une fonction avec des objets en JavaScript
Vous pouvez facilement disposer d’un couple key-value
pour structurer vos données avec des objets. Pour cet exemple de drive, nous allons à nouveau initialiser la fonction getValues
, et cette fois le cas de retour sera au format objet.
Extrait de code:
function getValues() {
var hair = 'Long', color = 'Brown';
return {hair, color};
}
var feature = getValues();
var x = feature.hair;
var y = feature.color;
console.log(x + ' ' + y + ' Hair');
Production :
Le bloc de code a ici une variable feature
qui fonctionne comme un objet. Plus tard avec la méthode dot(.)
, nous appelons les keys
pour accéder aux valeurs.
Cette map
nécessite explicitement les noms de clé, de sorte que les valeurs correspondantes obtiennent le plancher.
Utilisez Destructing Assignment
pour décompresser l’objet
Un objet qui a été passé depuis une fonction peut être décompressé en déclarant la convention ES6 : destructing assignment
.
Ici, nous allons déclarer explicitement les keys
, mais la déclaration accédera aux paires de valeurs directement depuis la fonction. Vérifions le bloc de code.
Extrait de code:
function getValues() {
var hair = 'Long', color = 'Brown';
return {hair, color};
}
var {hair, color} = getValues();
console.log(hair + ' ' + color + ' Hair');
Production :
Comme vous pouvez le voir, nous venons de passer les keys
de la fonction, et lorsque nous les déballons avec les noms des clés, la sortie affiche également les valeurs correspondantes.