JScript Katana

Guide Underscore.js : Simplifiez les tableaux, objets et fonctions JavaScript

Bibliothèques externes
佐川 直弘 | Naohiro Sagawa
By 佐川 直弘 | Naohiro Sagawa (運営者)
※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　
目次

1. Introduction

JavaScript est un langage de programmation essentiel pour le développement web, mais travailler avec des tableaux et des objets peut souvent rendre le code complexe. Surtout pour des opérations telles que le filtrage et la transformation de données, un code concis et efficace est hautement souhaitable. C’est là que la bibliothèque JavaScript Underscore.js devient utile. En utilisant cette bibliothèque, vous pouvez simplifier la façon dont les manipulations de données complexes sont écrites.

Les Avantages d’Underscore.js

  1. Code Plus Propre
  • Avec JavaScript traditionnel, certains processus ont tendance à devenir verbeux, mais avec Underscore.js, ils peuvent souvent être écrits en seulement quelques lignes.
  1. Ensemble Riche de Fonctions Utilitaires
  • Elle fournit de nombreuses fonctionnalités pour la manipulation de tableaux, la gestion d’objets et le contrôle de fonctions.
  1. Léger et Flexible
  • Vous pouvez utiliser uniquement les fonctions dont vous avez besoin, en gardant la surcharge de performance au minimum.

Ce Que Vous Apprendrez Dans Cet Article

  • Comment configurer Underscore.js
  • Fonctions de base et exemples pratiques
  • Cas d’utilisation réels pour le développement

2. Qu’est-ce qu’Underscore.js ?

Aperçu d’Underscore.js

Underscore.js est une bibliothèque JavaScript légère conçue pour simplifier la manipulation de données. Elle fournit une large gamme de fonctions utilitaires principalement pour travailler efficacement avec des tableaux et des objets, souvent appelée un kit d’outils utilitaires JavaScript. Bien que JavaScript lui-même dispose de fonctionnalités intégrées puissantes, le code peut parfois devenir long ou difficile à lire. En utilisant Underscore.js, vous pouvez résoudre ces problèmes et écrire un code plus propre et plus maintenable.

Fonctionnalités Clés

  1. Fonctions Utilitaires Complètes
  • Elle offre des fonctions pour la manipulation de tableaux, la gestion d’objets et le contrôle de fonctions, entre autres.
  1. Code Simplifié et Lisible
  • Par rapport à JavaScript traditionnel, elle réduit le code boilerplate et améliore la lisibilité.
  1. Aucune Dépendance
  • Elle ne repose pas sur d’autres bibliothèques, ce qui la rend flexible pour l’intégration.
  1. Léger et Rapide
  • Sa petite taille et son impact minimal sur les performances la rendent adaptée même aux applications web modernes.

Underscore.js vs. Lodash

Une bibliothèque souvent comparée à Underscore.js est Lodash. Lodash a été construite sur Underscore.js et étend ses capacités. Voici quelques différences :

FeatureUnderscore.jsLodash
FunctionalityProvides many basic utility functionsExpanded functionality with more features
Modular SupportPartially supportedFully modular
PerformanceFastFast and further optimized

Le choix que vous faites dépend des exigences de votre projet. Si vous avez besoin d’une bibliothèque simple et légère, Underscore.js est plus adaptée.

Quand Underscore.js Est-Utile ?

Underscore.js excelle dans les scénarios suivants :

  1. Travail avec des Tableaux
  • Effectuez le filtrage, le mappage et d’autres opérations sur tableaux avec une syntaxe concise.
  1. Gestion d’Objets
  • Récupérez facilement les clés, les valeurs ou fusionnez les propriétés d’objets.
  1. Contrôle de Fonctions
  • Implémentez l’exécution unique, l’exécution différée et d’autres motifs de contrôle de fonctions avec facilité.
  1. Fonctions Utilitaires
  • Utilisez-la pour le tri, la randomisation ou même comme un simple moteur de templates.

3. Comment Installer

Dans cette section, nous passerons en revue les étapes spécifiques pour ajouter Underscore.js à votre projet. Nous couvrons l’utilisation d’un CDN, l’installation via npm ou yarn, le téléchargement manuel de fichiers et l’intégration avec des bundlers de modules.

1. Utiliser un CDN

Un CDN (Content Delivery Network) vous permet d’utiliser des bibliothèques hébergées sur Internet en ajoutant simplement un lien. Insérez le code suivant dans la balise <head> ou à la fin de la balise <body> de votre fichier HTML :

Exemple : Ajout à un Fichier HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Using Underscore.js</title>
  <!-- Underscore.js CDN Link -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.13.6/underscore-min.js"></script>
</head>
<body>
  <h1>Testing Underscore.js</h1>
  <script>
    // Test code
    const data = [1, 2, 3, 4, 5];
    const evenNumbers = _.filter(data, function(num) {
      return num % 2 === 0;
    });
    console.log(evenNumbers); // [2, 4]
  </script>
</body>
</html>

Lorsqu’il est ouvert dans un navigateur, la console développeur n’affichera que les nombres pairs.

2. Installation dans votre environnement local ou votre projet Node.js.

Utilisation de npm

npm install underscore

Utilisation de yarn

yarn add underscore

Exemple d’importation en JavaScript

import _ from 'underscore';

const data = [10, 20, 30, 40];
const result = _.map(data, (num) => num * 2);
console.log(result); // [20, 40, 60, 80]

3. Télécharger le fichier

  1. Rendez-vous sur le site officiel : underscorejs.org
  2. Téléchargez le dernier fichier JavaScript depuis la section « Download ».
  3. Placez le fichier téléchargé dans le dossier de votre projet (par ex., js/).
  4. Liez‑le dans votre HTML à l’aide d’une balise script.
    <script src="js/underscore-min.js"></script>

4. Utilisation d’un bundler de modules

Si vous utilisez Webpack ou Parcel, c’est tout aussi simple :

Exemple avec Webpack

  1. Installez via npm :
    npm install underscore
  1. Importez dans votre fichier JavaScript :
    import _ from 'underscore';
  1. Regroupez et utilisez selon vos besoins.

Dépannage

1. « Uncaught ReferenceError: _ is not defined »

  • Underscore.js n’est peut‑être pas chargé correctement. Vérifiez votre lien CDN ou le chemin d’importation.

2. Erreurs après l’installation via npm

  • Assurez‑vous que Node.js et npm sont à jour avec la dernière version.

4. Utilisation de base

Dans cette section, nous présenterons certaines des fonctions principales d’Underscore.js avec des exemples. Ces fonctions sont particulièrement utiles pour simplifier les opérations sur les tableaux et les objets.

1. Parcourir les tableaux – _.each()

_.each() parcourt les tableaux ou les objets.

Exemple

const numbers = [1, 2, 3, 4, 5];

// Print each element to the console
_.each(numbers, function(num) {
  console.log(num);
});

Sortie :

1
2
3
4
5

Points clés :

  • Fonctionne avec les tableaux et les objets.
  • Le rappel reçoit l’élément, l’index et la collection entière.

2. Mapper les tableaux – _.map()

_.map() applique une fonction à chaque élément d’un tableau et renvoie un nouveau tableau.

Exemple

const numbers = [1, 2, 3, 4, 5];

// Double each element
const doubled = _.map(numbers, function(num) {
  return num * 2;
});

console.log(doubled);

Sortie :

[2, 4, 6, 8, 10]

3. Trouver le premier élément correspondant – _.find()

_.find() renvoie le premier élément qui correspond à une condition.

Exemple

const numbers = [1, 2, 3, 4, 5];

// Find the first element greater than or equal to 3
const result = _.find(numbers, function(num) {
  return num >= 3;
});

console.log(result);

Sortie :

3

4. Filtrer les éléments – _.filter()

_.filter() extrait tous les éléments qui correspondent à une condition dans un nouveau tableau.

Exemple

const numbers = [1, 2, 3, 4, 5];

// Get only even numbers
const evens = _.filter(numbers, function(num) {
  return num % 2 === 0;
});

console.log(evens);

Sortie :

[2, 4]

5. Mélanger les éléments – _.shuffle()

_.shuffle() randomise l’ordre des éléments dans un tableau.

Exemple

const numbers = [1, 2, 3, 4, 5];

// Shuffle the array
const shuffled = _.shuffle(numbers);

console.log(shuffled);

Sortie : (exemple)

[3, 5, 1, 4, 2]

6. Supprimer les doublons – _.uniq()

_.uniq() supprime les éléments dupliqués d’un tableau.

Exemple

const numbers = [1, 2, 2, 3, 4, 4, 5];

// Remove duplicates
const uniqueNumbers = _.uniq(numbers);

console.log(uniqueNumbers);

Sortie :

[1, 2, 3, 4, 5]

Résumé

Jusqu’à présent, nous avons examiné certaines des fonctions fondamentales d’Underscore.js :

  • _.each() pour l’itération
  • _.map() pour créer de nouveaux tableaux
  • _.find() et _.filter() pour le filtrage conditionnel
  • _.shuffle() pour randomiser les éléments
  • _.uniq() pour supprimer les doublons

5. Utilisation avancée

Dans cette section, nous explorerons des fonctions plus avancées d’Underscore.js. Elles permettent une manipulation et une analyse de données plus puissantes.

1. Tri des tableaux – _.sortBy()

_.sortBy() trie un tableau en fonction d’une clé ou d’une condition donnée.

Exemple

const users = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 20 },
  { name: 'Charlie', age: 30 }
];

// Sort by age
const sortedUsers = _.sortBy(users, 'age');

console.log(sortedUsers);

Sortie :

[
  { name: 'Bob', age: 20 },
  { name: 'Alice', age: 25 },
  { name: 'Charlie', age: 30 }
]

2. Regroupement des données – _.groupBy()

_.groupBy() regroupe les éléments d’un tableau selon une clé ou une condition.

Exemple

const numbers = [1.1, 2.3, 2.4, 3.5, 4.7];

// Group by integer part
const grouped = _.groupBy(numbers, function(num) {
  return Math.floor(num);
});

console.log(grouped);

Sortie :

{
  1: [1.1],
  2: [2.3, 2.4],
  3: [3.5],
  4: [4.7]
}

3. Comptage des données – _.countBy()

_.countBy() facilite le comptage des éléments en fonction d’une condition.

Exemple

const words = ['apple', 'banana', 'apricot', 'blueberry'];

// Count by first letter
const counts = _.countBy(words, function(word) {
  return word[0];
});

console.log(counts);

Sortie :

{
  a: 2,
  b: 2
}

Résumé

Dans cette section, nous avons couvert des cas d’utilisation avancés d’Underscore.js :

  • _.sortBy() pour trier les tableaux
  • _.groupBy() et _.countBy() pour regrouper et compter les données

6. Opérations sur les objets

Dans cette section, nous couvrirons des fonctions utiles d’Underscore.js pour travailler avec les objets. Ces fonctions facilitent le traitement efficace des clés, des valeurs et des propriétés d’objet.

1. Récupération des clés et des valeurs

Obtenir les clés – _.keys()

const person = { name: 'Alice', age: 25, city: 'Tokyo' };

const keys = _.keys(person);
console.log(keys);

Sortie :

['name', 'age', 'city']

Obtenir les valeurs – _.()

const values = _.values(person);
console.log(values);

Sortie :

['Alice', 25, 'Tokyo']

2. Clonage d’objets – _.clone()

_.clone() crée une copie superficielle d’un objet.

const original = { name: 'Alice', age: 25 };
const clone = _.clone(original);

clone.age = 30; // Modify the clone
console.log(original.age); // 25
console.log(clone.age);    // 30

Résumé

Dans cette section, nous avons présenté les fonctions liées aux objets dans Underscore.js :

  • _.keys() et _.values() pour récupérer les clés et les valeurs
  • _.clone() pour créer des copies superficielles

7. Opérations sur les fonctions

Dans cette section, nous explorerons comment Underscore.js vous aide à contrôler et optimiser le comportement des fonctions. Ces utilitaires sont particulièrement utiles pour le contrôle d’exécution et l’optimisation des performances.

1. Liaison de fonctions – _.bind()

_.bind() lie une fonction à un objet spécifique, garantissant que this fait toujours référence à cet objet.

Exemple

const person = {
  name: 'Alice',
  greet: function(greeting) {
    return `${greeting}, my name is ${this.name}`;
  }
};

const boundGreet = _.bind(person.greet, person);

console.log(boundGreet('Hello')); // Hello, my name is Alice

2. Retarder l’exécution – _.delay()

_.delay() retarde l’exécution d’une fonction d’une durée spécifiée.

Exemple

_.delay(function(message) {
  console.log(message);
}, 2000, 'Displayed after 2 seconds');

Sortie : (après 2 secondes)

Displayed after 2 seconds

3. Exécution unique – _.once()

_.once() garantit qu’une fonction ne s’exécute que la première fois qu’elle est appelée.

Exemple

const initialize = _.once(function() {
  console.log('Initialization complete');
});

initialize(); // Runs
initialize(); // Ignored

4. Mémoïsation – _.memoize()

_.memoize() met en cache les résultats d’une fonction, évitant la recomputation pour les mêmes entrées.

Exemple

%%CODEBLOCK15%%

const factorial = _.memoize(function(n) {
  return n <= 1 ? 1 : n * factorial(n - 1);
});

console.log(factorial(5)); // Computed
console.log(factorial(5)); // Retrieved from cache

5. Limitation d’exécution – _.throttle()

_.throttle() garantit qu’une fonction est exécutée au plus une fois dans un intervalle de temps donné.

Exemple

const log = _.throttle(function() {
  console.log('Processing...');
}, 2000);

// Simulate rapid events
setInterval(log, 500); // Executes only once every 2 seconds

Résumé

Cette section a introduit les utilitaires liés aux fonctions dans Underscore.js :

  • _.bind() pour fixer this
  • _.delay() pour une exécution différée
  • _.once() pour une initialisation unique
  • _.memoize() pour le cache des résultats
  • _.throttle() pour limiter le taux d’exécution

8. Fonctions utilitaires

Dans cette section, nous couvrirons certaines des fonctions utilitaires pratiques fournies par Underscore.js. Ces fonctions peuvent être appliquées dans une large gamme de situations telles que la génération de valeurs aléatoires, la vérification des états de données, ou le travail avec des templates.

1. Génération de nombres aléatoires – _.random()

_.random() génère un entier ou un nombre à virgule flottante aléatoire dans une plage spécifiée.

Exemple

console.log(_.random(1, 10)); // Integer
console.log(_.random(1, 10, true)); // Floating point

2. Vérification des valeurs vides – _.isEmpty()

_.isEmpty() vérifie si un tableau, un objet ou une chaîne est vide.

Exemple

console.log(_.isEmpty([]));        // true
console.log(_.isEmpty({}));        // true
console.log(_.isEmpty(''));        // true
console.log(_.isEmpty([1, 2, 3])); // false

3. Création de templates – _.template()

_.template() est utilisé pour créer des templates de chaînes simples.

Exemple

const template = _.template('Hello, <%= name %>!');
console.log(template({ name: 'Alice' }));

Sortie :

Hello, Alice!

Résumé

Voici les fonctions utilitaires que nous avons introduites :

  • _.random() pour générer des nombres aléatoires
  • _.isEmpty() pour vérifier si les structures de données sont vides
  • _.template() pour créer des templates simples

9. Conclusion

Dans cet article, nous avons exploré Underscore.js des bases aux cas d’utilisation plus avancés. Cette bibliothèque est hautement efficace pour simplifier la manipulation de données et écrire du code JavaScript efficace et maintenable.

Récapitulatif

  1. Utilisation de base – Appris les fonctions de base pour travailler avec des tableaux et des objets.
  2. Utilisation avancée – Couvert la classification, le tri et l’agrégation de données.
  3. Opérations sur les fonctions – Expliqué l’optimisation avec le contrôle d’exécution et la mémorisation.
  4. Fonctions utilitaires – Introduit la randomisation, les vérifications de vide et la création de templates.

Pensées finales

Underscore.js est un outil puissant qui rend le développement JavaScript plus efficace et plus facile à gérer. Utilisez cet article comme guide pour l’intégrer dans vos projets. Continuez à pratiquer pour affiner vos compétences.

Questions fréquemment posées (FAQ)

Q1 : Underscore.js est-il gratuit à utiliser ?

R : Oui. Underscore.js est fourni sous la licence MIT, et il est gratuit pour un usage personnel et commercial.

Q2 : Quelle est la différence entre Underscore.js et Lodash ?

R : Underscore.js est une bibliothèque utilitaire simple et légère. Lodash est basé sur Underscore.js mais étend la fonctionnalité, offrant de meilleures performances et une modularité complète. Le choix dépend des exigences du projet.

Q3 : Underscore.js est-il inutile avec le JavaScript moderne (ES6+) ?

R : Bien que ES6+ inclue des méthodes puissantes pour les tableaux et les objets, Underscore.js reste utile pour la compatibilité cross-browser, la syntaxe concise et le travail avec du code legacy.

Q4 : Quels types de projets sont les mieux adaptés pour Underscore.js ?

R : Les projets de petite à moyenne taille ou les applications qui priorisent la simplicité du code. Il est particulièrement utile lorsque vous voulez des utilitaires légers pour des opérations de données rapides.

Q5 : Comment installer Underscore.js ?

A: Vous pouvez l’installer de plusieurs façons :

  1. Lien CDN :
    <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.13.6/underscore-min.js"></script>
  1. npm :
    npm install underscore
  1. yarn :
    yarn add underscore

Q6 : Où puis-je trouver la documentation officielle ?

A: La documentation officielle est disponible ici : Site officiel d’Underscore.js

Q7 : Underscore.js peut-il être utilisé dans de grands projets ?

A: Oui, bien que pour les projets plus grands, Lodash soit souvent recommandé en raison de sa modularisation et de ses optimisations de performance. Néanmoins, Underscore.js fonctionne bien pour les besoins de petite et moyenne envergure.

Q8 : Y a-t-il d’autres façons de contrôler l’exécution des fonctions ?

A: Oui. JavaScript moderne prend en charge setTimeout(), setInterval(), Promise et async/await. Cependant, Underscore.js fournit _.throttle() et _.debounce() pour des implémentations concises et efficaces.

Q9 : Y a-t-il des précautions à prendre lors de l’utilisation d’Underscore.js ?

A:

  1. Soyez attentif à ne pas l’utiliser excessivement là où les fonctionnalités natives ES6 sont suffisantes.
  2. Utilisez toujours la dernière version pour éviter les problèmes de sécurité.
  3. Pour les projets plus grands, envisagez Lodash comme alternative.

Q10 : _.template() est-il recommandé comme moteur de templates ?

A: _.template() est pratique pour le templating simple. Pour des besoins avancés, envisagez des bibliothèques dédiées telles que Handlebars.js ou EJS.

広告