Maison >interface Web >js tutoriel >Explication détaillée de 10 utilisations de l'opérateur de propagation JavaScript (résumé)
Cet article vous présentera 10 façons d'utiliser l'opérateur spread en JavaScript. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.
On peut utiliser l'opérateur spread pour copier un tableau, mais sachez qu'il s'agit d'un Copie superficielle .
const arr1 = [1,2,3]; const arr2 = [...arr1]; console.log(arr2); // [ 1, 2, 3 ]
De cette façon, nous pouvons copier un tableau de base, notez que cela ne fonctionne pas avec des tableaux multi-niveaux ou des tableaux avec des dates ou des fonctions.
Supposons que nous ayons deux tableaux que nous souhaitons fusionner en un seul. Au début, nous pouvions utiliser la méthode concat
, mais maintenant nous le faisons. peut utiliser l'opérateur spread :
const arr1 = [1,2,3]; const arr2 = [4,5,6]; const arr3 = [...arr1, ...arr2]; console.log(arr3); // [ 1, 2, 3, 4, 5, 6 ]
On peut également utiliser différents arrangements pour indiquer lequel doit apparaître en premier.
const arr3 = [...arr2, ...arr1]; console.log(arr3); [4, 5, 6, 1, 2, 3];
De plus, l'opérateur d'expansion convient également pour fusionner plusieurs tableaux :
const output = [...arr1, ...arr2, ...arr3, ...arr4];
let arr1 = ['this', 'is', 'an']; arr1 = [...arr1, 'array']; console.log(arr1); // [ 'this', 'is', 'an', 'array' ]
Supposons que vous ayez un objet de user
, mais qu'il lui manque un attribut age
.
const user = { firstname: 'Chris', lastname: 'Bongers' };
Pour ajouter user
à cet age
objet, nous pouvons à nouveau utiliser l'opérateur spread.
const output = {...user, age: 31};
Supposons que nous ayons un tableau de nombres et que nous voulions obtenir le maximum, le minimum ou la somme de ces nombres.
const arr1 = [1, -1, 0, 5, 3];
Pour obtenir la valeur minimale, on peut utiliser l'opérateur spread et la méthode Math.min
.
const arr1 = [1, -1, 0, 5, 3]; const min = Math.min(...arr1); console.log(min); // -1
De même, pour obtenir la valeur maximale, vous pouvez faire ceci :
const arr1 = [1, -1, 0, 5, 3]; const max = Math.max(...arr1); console.log(max); // 5
Comme vous pouvez le voir, la valeur maximale est 5
, et si on supprime 5
, ce sera reviens 3
.
Vous vous demandez peut-être, que se passe-t-il si nous n'utilisons pas l'opérateur de propagation ?
const arr1 = [1, -1, 0, 5, 3]; const max = Math.max(arr1); console.log(max); // NaN
Cela renvoie NaN car JavaScript ne sait pas quelle est la valeur maximale du tableau.
Supposons que nous ayons une fonction avec trois paramètres.
const myFunc(x1, x2, x3) => { console.log(x1); console.log(x2); console.log(x3); }
Nous pouvons appeler cette fonction comme suit :
myFunc(1, 2, 3);
Mais que se passe-t-il si nous voulons passer un tableau.
const arr1 = [1, 2, 3];
Nous pouvons utiliser l'opérateur spread pour étendre ce tableau dans notre fonction.
myFunc(...arr1); // 1 // 2 // 3
Ici, nous divisons le tableau en trois paramètres distincts et les transmettons à la fonction.
const myFunc = (x1, x2, x3) => { console.log(x1); console.log(x2); console.log(x3); }; const arr1 = [1, 2, 3]; myFunc(...arr1); // 1 // 2 // 3
Supposons que nous ayons une fonction qui accepte des arguments infinis comme suit :
const myFunc = (...args) => { console.log(args); };
Si nous maintenant lors de l'appel de cette fonction avec plusieurs paramètres, vous verrez la situation suivante :
myFunc(1, 'a', new Date());
Retours :
[ 1, 'a', Date { __proto__: Date {} } ]
Ensuite, nous pouvons parcourir dynamiquement les paramètres.
Supposons que nous utilisions l'opérateur spread pour obtenir tous les p
sur la page :
const el = [...document.querySelectorAll('p')]; console.log(el); // (3) [p, p, p]
peut être trouvé ici Voir nous en avons eu 3 p
du dom.
Nous pouvons désormais parcourir facilement ces éléments puisqu'il s'agit de tableaux.
const el = [...document.querySelectorAll('p')]; el.forEach(item => { console.log(item); }); // <p></p> // <p></p> // <p></p>
Supposons que nous ayons un objet user
:
const user = { firstname: 'Chris', lastname: 'Bongers', age: 31 };
Nous pouvons maintenant le déconstruire en objets individuels à l'aide de la variable d'opérateur de propagation.
const {firstname, ...rest} = user; console.log(firstname); console.log(rest); // 'Chris' // { lastname: 'Bongers', age: 31 }
Ici, on déstructure l'objet user
et on déstructure firstname
en une variable firstname
et le reste de l'objet en une variable rest
.
Le dernier cas d'utilisation de l'opérateur spread consiste à diviser une chaîne en mots individuels.
Supposons que nous ayons la chaîne suivante :
const str = 'Hello';
Ensuite, si nous utilisons l'opérateur spread sur cette chaîne, nous obtiendrons un tableau de lettres.
const str = 'Hello'; const arr = [...str]; console.log(arr); // [ 'H', 'e', 'l', 'l', 'o' ]
~ Fin
Adresse originale : https://dev.to/dailydevtips1/10-ways-to-use-the-spread-operator-in-javascript-1imb
Auteur : Chris Bongers
Adresse de traduction : https://segmentfault.com/a/1190000038998504
Pour plus de connaissances liées à la programmation, veuillez visiter : Vidéo de programmation ! !
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!