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.

Copier un tableau

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.

Fusionner les tableaux

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

Ajouter des éléments à un tableau

let arr1 = ['this', 'is', 'an'];
arr1 = [...arr1, 'array'];
console.log(arr1);
// [ 'this', 'is', 'an', 'array' ]

À un objet Ajout d'attributs

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

Utilisez la fonction Math()

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.

paramètres de repos

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

Passer des arguments infinis à la fonction

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.

Convertir nodeList en tableau

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>

Déstructuration d'un objet

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.

Développer la chaîne

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!