JavaScript: 7 petites choses utiles

L'auteur de la note, dont nous publions la traduction aujourd'hui, dit qu'en JavaScript, comme dans tout autre langage de programmation, vous pouvez trouver de nombreuses petites astuces conçues pour résoudre une variété de problèmes, à la fois simples et assez complexes. Certaines de ces techniques sont largement connues, tandis que d'autres, moins courantes, peuvent agréablement surprendre ceux qui ne les connaissent pas. Nous allons maintenant examiner 7 techniques de programmation JavaScript utiles.

1. Obtention de valeurs de tableau uniques

En JavaScript, générer un tableau contenant uniquement des valeurs uniques à partir d'un autre tableau est probablement plus facile que vous ne le pensez:

var j = [...new Set([1, 2, 3, 3])] // [1, 2, 3] 

J'aime la façon dont ce problème peut être résolu en utilisant l'opérateur ... et le type de données Set .

2. Tableaux et valeurs logiques

Avez-vous déjà eu besoin de supprimer des valeurs d'un tableau dont la conversion en type logique donne false ? Par exemple, ce sont des valeurs telles que 0 , undefined , null , false . Vous ne saviez peut-être pas que pour ce faire, vous pouvez le faire:

 myArray   .map(item => {       // ...   })   //       .filter(Boolean); 

Comme vous pouvez le voir, pour vous débarrasser de toutes ces valeurs, passez simplement le Boolean à la méthode du tableau .filter() .

3. Créer des objets vraiment vides

Je suis sûr que vous pouvez créer un objet qui semble vide en utilisant la syntaxe de l'objet littéral: {} . Mais un prototype ( __proto__ ) sera assigné à un tel objet, il aura une méthode hasOwnProperty() et d'autres méthodes objet. Afin de créer un objet vraiment vide , qui, par exemple, peut être utilisé comme un «dictionnaire», vous pouvez faire ceci:

 let dict = Object.create(null); // dict.__proto__ === "undefined" //        ,           

Un objet créé de cette manière n'a pas de propriétés et de méthodes qui ne lui sont pas ajoutées par le programmeur.

4. Fusion d'objets

Ceux qui écrivent en JavaScript ont toujours eu besoin de créer de tels objets qui incluraient le contenu d'autres objets. Cette tâche est devenue particulièrement urgente lorsque les classes sont apparues en JavaScript, puis lorsque les programmeurs ont dû travailler avec quelque chose comme des représentations de logiciels de widgets. Voici comment créer un nouvel objet basé sur plusieurs autres objets:

 const person = { name: 'David Walsh', gender: 'Male' }; const tools = { computer: 'Mac', editor: 'Atom' }; const attributes = { handsomeness: 'Extreme', hair: 'Brown', eyes: 'Blue' }; const summary = {...person, ...tools, ...attributes}; /* Object { "computer": "Mac", "editor": "Atom", "eyes": "Blue", "gender": "Male", "hair": "Brown", "handsomeness": "Extreme", "name": "David Walsh", } */ 

L'opérateur ... simplifie considérablement la solution de la tâche de fusion des objets.

5. Paramètres de fonction requis

La définition des valeurs par défaut des arguments de fonction est une excellente extension de JavaScript. Mais voici comment faire en sorte que sans passer certains paramètres requis, les fonctions refusent simplement de fonctionner:

 const isRequired = () => { throw new Error('param is required'); }; const hello = (name = isRequired()) => { console.log(`hello ${name}`) }; //    ,     name hello(); //     hello(undefined); //        hello(null); hello('David'); 

Nous avons devant nous un niveau supplémentaire de vérification de ce qui est transmis aux fonctions.

6. Affectation destructive et nouveaux noms des propriétés extraites des objets

La déstructuration est une nouvelle fonctionnalité JavaScript utile, mais parfois les propriétés récupérées à partir des objets doivent se voir attribuer des noms différents de ceux qu'elles ont dans ces objets. Voici comment procéder:

 const obj = { x: 1 }; //      obj.x   x const { x } = obj; //   obj.x     otherName const { x: otherName } = obj; 

Cette technique est utile dans les cas où vous devez éviter un conflit de noms de variables ou de constantes.

7. Analyse des chaînes de requête

Pendant de nombreuses années, nous avons écrit des expressions régulières pour analyser les chaînes de requête, mais ces temps sont passés. Maintenant, pour résoudre ce problème, vous pouvez utiliser la merveilleuse API URLSearchParams :

 // ,     "?post=1234&action=edit" var urlParams = new URLSearchParams(window.location.search); console.log(urlParams.has('post')); // true console.log(urlParams.get('action')); // "edit" console.log(urlParams.getAll('action')); // ["edit"] console.log(urlParams.toString()); // "?post=1234&action=edit" console.log(urlParams.append('active', '1')); // "?post=1234&action=edit&active=1" 

L'utilisation de l'API URLSearchParams beaucoup plus facile que la résolution des mêmes tâches à l'aide d'expressions régulières.

Résumé

Le JavaScript moderne évolue très rapidement, avec diverses améliorations utiles qui y apparaissent constamment. Mais l'amélioration du langage ne signifie pas que les programmeurs n'ont pas besoin de penser au code et de chercher des solutions efficaces aux divers problèmes auxquels ils sont confrontés. Nous espérons que les petites astuces JavaScript dont nous avons parlé aujourd'hui vous seront utiles.

Chers lecteurs! Connaissez-vous des astuces de programmation JS utiles? Si oui, merci de les partager.