Partagez 10 façons d'utiliser l'opérateur de propagation JavaScript

Cet article partagera avec vous 10 façons d'utiliser l'opérateur d'expansion de propagation 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.

Recommandations associées : "Tutoriel vidéo javascript"

Copier un tableau

Nous pouvons utiliser l'opérateur spread pour copier Array, mais notez qu'il s'agit d'une 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 des 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 pouvons 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 ]

Nous pouvons également utiliser différents arrangements pour indiquer lequel doit venir 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' ]

Ajouter des attributs à un objet

Hypothèse Vous avez un objet de user, mais il lui manque une propriété 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};

Utilisation de 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 appelons maintenant cela avec plusieurs Pour la fonction de paramètres, vous verrez la situation suivante :

myFunc(1, 'a', new Date());

renvoie :

[
  1,
  'a',
  Date {
    __proto__: Date {}
  }
]

Ensuite, nous pouvons parcourir dynamiquement les paramètres.

Convertir nodeList en Array

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]

Ici, vous pouvez voir ce que nous obtenons du dom Got 3p.

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>

Objet déstructurant

Supposons que nous ayons un objet user:

const user = {
  firstname: 'Chris',
  lastname: 'Bongers',
  age: 31
};

Maintenant, nous pouvons le déconstruire en variables individuelles à l'aide de l'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 d'expansion 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' ]

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 : Enseignement de la 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!