Méthodes de tableau JavaScript expliquées à travers des scénarios du monde réel

Avez-vous déjà consulté la documentation des méthodes de tableau JavaScript et vous êtes-vous demandé comment diable fonctionnent-elles dans la vraie vie ?

Je me souviens m'être littéralement cogné la tête contre le mur pour comprendre ces méthodes lorsque j'ai commencé à coder. Croyez-moi, les méthodes de tableau ne sont pas là uniquement pour réussir des entretiens techniques, ce sont vos amis performants au quotidien dans le développement du monde réel.

Aujourd'hui, je vais vous montrer quand et comment utiliser ces méthodes de tableau dans des projets réels.

Au moment où vous aurez fini de lire, vous verrez que les méthodes de tableau donnent à votre code clarté et lisibilité… Et, sans oublier, aident à le garder sain d'esprit et maintenable.

Commençons par les bases

map() et filtre()

Tout d'abord, commençons par quelques méthodes de tableau que vous utiliserez très probablement tous les jours - map() et filter().

Créer un calculateur de prix de produit avec map()

Donc, vous créez un site de commerce électronique et vous avez une liste de produits qui doivent bénéficier d'une remise de 20 %.

Voici à quoi pourraient ressembler vos données produit :

 const products = [
    { name: "Gaming Mouse", price: 59.99 },
    { name: "Mechanical Keyboard", price: 129.99 },
    { name: "4K Monitor", price: 349.99 }
];

Au lieu d'écrire une boucle for compliquée, map() rend cela super propre :

const discountedPrices = products.map(product => ({
    ...product,
    price: (product.price * 0.8).toFixed(2)
}));

Chaque prix est désormais réduit et nous avons conservé toutes nos informations originales sur le produit. Propre et simple.

Création d'une fonctionnalité de recherche intelligente avec filtre()

Créons maintenant quelque chose de plus cool : une recherche intelligente qui fonctionne réellement dans plusieurs champs.

Supposons que nous disposions de ces données utilisateur :

const users = [
    { name: "Sarah Smith", email: "sarah@gmail.com", role: "developer" },
    { name: "John Doe", email: "john@company.com", role: "designer" },
    { name: "Mike Wilson", email: "mike@gmail.com", role: "developer" }
];

Voici comment effectuer une recherche facile avec filter() :

const searchUsers = (query) => {
    return users.filter(user => 
        user.name.toLowerCase().includes(query.toLowerCase()) ||
        user.email.toLowerCase().includes(query.toLowerCase()) ||
        user.role.toLowerCase().includes(query.toLowerCase())
    );
};

C'est vrai, vous pouvez effectuer une recherche par noms, e-mails et rôles. Essayez-le avec searchUsers("dev") et il filtre uniquement les développeurs.

Et si vous pensiez que c'était cool, attendez que nous parvenions à réduire() dans la section suivante.

réduire() - Plus que de simples sommes

La plupart des développeurs utilisent principalement réduire() uniquement pour ajouter des nombres. Mais le fait est qu’il est capable de bien plus – faites-moi confiance là-dessus.

Calcul du total du panier

Un véritable scénario consiste à calculer le coût total des produits dans un panier, en tenant compte des remises et des taxes. Jetez un oeil à ceci :

const cartItems = [
    { name: "Nike Air Max", price: 129.99, quantity: 2, discount: 20 },
    { name: "Adidas Hoodie", price: 89.99, quantity: 1, discount: 0 },
    { name: "Running Socks", price: 12.99, quantity: 3, discount: 10 }
];


const cartTotal = cartItems.reduce((total, item) => {
    const itemTotal = item.price * item.quantity;
    const discount = (itemTotal * item.discount) / 100;
    return total + (itemTotal - discount);
}, 0);

Bien, hein ? Il vous suffit d'implémenter une seule fonction pour les quantités, les remises et le calcul total.

Outil de statistiques de documents

Que diriez-vous de traiter un document texte ? Nous comptons tous les mots, caractères et phrases :

const documentStats = paragraphs.reduce((stats, paragraph) => {
    return {
        words: stats.words + paragraph.split(' ').length,
        characters: stats.characters + paragraph.length,
        sentences: stats.sentences + paragraph.split(/[.!?]+/).length - 1,
        paragraphs: stats.paragraphs + 1
    };
}, { words: 0, characters: 0, sentences: 0, paragraphs: 0 });

Alors, ne voyez-vous pas à quel point réduire() gère plusieurs choses à la fois ? C'est bien mieux que d'utiliser des boucles séparées.

Conseil de pro : Si votre rappel de réduction() devient trop volumineux, les petites fonctions sont toujours une solution.

find() et certains()

Abordons deux méthodes qui simplifieront grandement vos systèmes d'authentification et de modération.

Création d'un système d'authentification des utilisateurs

Avez-vous déjà construit un système de connexion ? Voici comment find() simplifie grandement la recherche des utilisateurs :

 const products = [
    { name: "Gaming Mouse", price: 59.99 },
    { name: "Mechanical Keyboard", price: 129.99 },
    { name: "4K Monitor", price: 349.99 }
];

Fini les boucles maladroites ou les instructions if complexes. find() renvoie exactement ce dont vous avez besoin.

Créer un outil de modération de contenu

C'est ici que some() brille : vérifier le contenu par rapport aux mots ou aux modèles interdits :

const discountedPrices = products.map(product => ({
    ...product,
    price: (product.price * 0.8).toFixed(2)
}));

Regardez comment some() nous aide à vérifier plusieurs conditions à la fois. Propre, lisible et maintenable.

Conseil rapide : some() arrête de vérifier dès qu'il trouve une correspondance. Parfait pour les performances lorsque vous traitez de grands ensembles de données.

flat() et flatMap()

L'aplatisseur de tableau

Avez-vous déjà essayé d'aplatir des tableaux imbriqués ? flat() est votre meilleur ami. Il lisse ces tableaux imbriqués en un seul niveau :

const users = [
    { name: "Sarah Smith", email: "sarah@gmail.com", role: "developer" },
    { name: "John Doe", email: "john@company.com", role: "designer" },
    { name: "Mike Wilson", email: "mike@gmail.com", role: "developer" }
];

Vous pouvez même spécifier la profondeur à laquelle vous souhaitez aplatir avec le paramètre de profondeur. S'il n'y a pas de profondeur, la valeur par défaut est 1.

flatMap() - système de commentaires avec réponses multiples

Pensez à flatMap() comme à la combinaison de flat() et map() sur un tableau imbriqué. Il mappe votre tableau ET aplatit le résultat - le tout en une seule fois !

Voici un véritable système de commentaires où chaque commentaire peut avoir plusieurs réponses :

const searchUsers = (query) => {
    return users.filter(user => 
        user.name.toLowerCase().includes(query.toLowerCase()) ||
        user.email.toLowerCase().includes(query.toLowerCase()) ||
        user.role.toLowerCase().includes(query.toLowerCase())
    );
};

flatMap() est parfait lorsque vous devez transformer des éléments ET gérer des résultats imbriqués. C'est comme avoir deux méthodes pour le prix d'une !

Voici un autre exemple pratique : extraire des hashtags à partir de publications sur les réseaux sociaux :

const cartItems = [
    { name: "Nike Air Max", price: 129.99, quantity: 2, discount: 20 },
    { name: "Adidas Hoodie", price: 89.99, quantity: 1, discount: 0 },
    { name: "Running Socks", price: 12.99, quantity: 3, discount: 10 }
];


const cartTotal = cartItems.reduce((total, item) => {
    const itemTotal = item.price * item.quantity;
    const discount = (itemTotal * item.discount) / 100;
    return total + (itemTotal - discount);
}, 0);

Voyez comment flatMap() gère à la fois la transformation ET l'aplatissement des résultats vides potentiels ? Assez élégant !

chaque() et inclut()

Créer un système de validation de formulaire

Essayons de créer quelque chose que nous utilisons quotidiennement : un validateur de formulaire robuste. Voici comment each() le rend propre :

const documentStats = paragraphs.reduce((stats, paragraph) => {
    return {
        words: stats.words + paragraph.split(' ').length,
        characters: stats.characters + paragraph.length,
        sentences: stats.sentences + paragraph.split(/[.!?]+/).length - 1,
        paragraphs: stats.paragraphs + 1
    };
}, { words: 0, characters: 0, sentences: 0, paragraphs: 0 });

every() vérifie si TOUTES les règles sont réussies. Vous pouvez voir que c'est parfait pour la validation où vous avez besoin que tout soit vrai.

Créer un vérificateur d'autorisations

Voici comment l'include() rend la vérification des autorisations très facile à effectuer :

const users = [
    { id: 1, email: "alex@tech.com", password: "hashed_password_1", attempts: 0 },
    { id: 2, email: "sam@tech.com", password: "hashed_password_2", attempts: 1 }
];

const authenticateUser = (email, password) => {
    const user = users.find(u => u.email === email);
    if (!user) return { status: "error", message: "User not found" };

    if (user.attempts >= 3) return { status: "error", message: "Account locked" };

    return validatePassword(user, password);
};

includes() permet à notre code de se lire comme un anglais simple. Bien mieux que des instructions if ou des boucles complexes.

Trier vos données (sort())

Avez-vous déjà eu besoin de trier des données au-delà du simple ordre alphabétique de base ? sort() est bien plus puissant que la plupart des développeurs ne le pensent.

Développement d'un trieur de tableaux personnalisé

Voici un trieur de tables réel qui gère différents types de données :

const bannedWords = ["spam", "scam", "inappropriate"];

const moderateContent = (content) => {
    const containsBannedWords = bannedWords.some(word => 
        content.toLowerCase().includes(word)
    );

    const hasSpamPatterns = content.includes("!!!") || content === content.toUpperCase();

    return {
        isSpam: containsBannedWords || hasSpamPatterns,
        reason: containsBannedWords ? "Banned words detected" : "Spam patterns found"
    };
};

Plus de fonctions séparées pour différentes colonnes. Un seul trieur s’occupe de tout !

Créer un système de classement

Découvrez ce trieur de classement qui gère les tie-breaks :

 const products = [
    { name: "Gaming Mouse", price: 59.99 },
    { name: "Mechanical Keyboard", price: 129.99 },
    { name: "4K Monitor", price: 349.99 }
];

Vous voyez comment nous gérons plusieurs critères de tri ? Marquez en premier, puis gagne, puis le temps de jeu le plus bas brise l'égalité.

Conseil rapide : Faites toujours une copie de votre tableau avant de trier si vous devez conserver la commande originale.

Meilleures pratiques et performances

Avant de partir, terminons cela avec un peu de sagesse qui permettra à vos méthodes de tableau de mieux fonctionner.

Quand utiliser quelle méthode

Voici mon guide pratique basé sur ce que vous essayez de faire :

const discountedPrices = products.map(product => ({
    ...product,
    price: (product.price * 0.8).toFixed(2)
}));

Alors, arrêtez de vous soucier des boucles forEach et for. Concentrez-vous plutôt sur ceux-ci.

Faites et ne faites pas cela réellement important

Enfin avant de partir. Cherchez toujours un moyen de faire les choses plus facilement et mieux. Par exemple :

Au lieu de ça :

const users = [
    { name: "Sarah Smith", email: "sarah@gmail.com", role: "developer" },
    { name: "John Doe", email: "john@company.com", role: "designer" },
    { name: "Mike Wilson", email: "mike@gmail.com", role: "developer" }
];

Faites toujours ceci :

const searchUsers = (query) => {
    return users.filter(user => 
        user.name.toLowerCase().includes(query.toLowerCase()) ||
        user.email.toLowerCase().includes(query.toLowerCase()) ||
        user.role.toLowerCase().includes(query.toLowerCase())
    );
};

C'est ça ! Vous disposez désormais d'une connaissance pratique et concrète des méthodes de tableau JavaScript. Utilisez-les à bon escient !

Rappelez-vous : La lisibilité du code est meilleure que les micro-optimisations. Choisissez en premier la méthode qui rend votre code le plus clair.

Des questions ? Contactez-moi dans les commentaires ci-dessous ! ?

---

Suivez-moi sur X (anciennement Twitter) pour découvrir la sagesse JavaScript quotidienne ! Je partage de petites astuces de code, je débogue des problèmes du monde réel et je m'intéresse au développement Web.

Restez curieux et rappelez-vous : les développeurs intelligents copient-collent, mais les plus brillants comprennent ce qu'ils copient. Rendez-vous dans le prochain post ! ✨

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!