20 compétences JS pour vous aider à améliorer votre efficacité au travail et à ne plus jamais faire d'heures supplémentaires !

Dans nos tâches quotidiennes, nous écrivons des fonctions comme le tri, la recherche, la recherche de valeurs uniques, la transmission de paramètres, l'échange de valeurs, etc., j'ai donc compilé ici une liste de mes conseils abrégés !

JavaScript est vraiment un excellent langage à apprendre et à utiliser. Pour un problème donné, il peut y avoir plusieurs façons d’arriver à la même solution. Dans cet article, nous aborderons uniquement les plus rapides.

Ces méthodes vous aideront certainement :

• réduire le nombre de LOC (lignes de code),
• les concours de codage,
• les hackathons
• ou autres tâches limitées dans le temps.

La plupart de ces hacks JavaScript utilisent ECMAScript6 (ES2015) et des technologies ultérieures, bien que la dernière version soit ECMAScript11 (ES2020).

==Remarque== : Tous les conseils ci-dessous ont été testés sur la console de Google Chrome.

1. Déclarer et initialiser le tableau

Nous pouvons initialiser un tableau d'une taille spécifique en utilisant une valeur par défaut (telle que "", null ou 0). Vous les utilisez peut-être déjà pour des tableaux 1D, mais comment initialiser un tableau/matrice 2D ?

const array = Array(5).fill(''); 
// Sortie(5) ["", "", "", "", ""]

const matrice = Array(5).fill(0).map(()=>Array(5).fill(0)); 
// Sortie (5) [Array(5), Array(5), Array(5), Array(5), Array(5)]
0 : (5) [0, 0, 0, 0, 0]
1 : (5) [0, 0, 0, 0, 0]
2 : (5) [0, 0, 0, 0, 0]
3 : (5) [0, 0, 0, 0, 0]
4 : (5) [0, 0, 0, 0, 0]
longueur : 5

2. Trouver la somme, les valeurs minimales et maximales

Nous devrions utiliser la méthode reduce pour trouver rapidement les opérations mathématiques de base.

const array = [5,4,7,8,9,2];

• et

array.reduce((a,b) => a+b);
// Sortie : 35

• maximum

array.reduce((a,b) => a>b?a:b);
// Sortie : 9

• minimum

array.reduce((a,b) => a<b?a:b);
// Sortie : 2

3. Trier des tableaux de chaînes, de nombres ou d'objets

Nous avons les méthodes intégrées sort() et reverse() pour trier les chaînes, mais qu'en est-il des tableaux de nombres ou d'objets ?

Examinons les techniques de tri ascendant et décroissant des nombres et des objets.

• Tri du tableau de chaînes

const stringArr = ["Joe", "Kapil", "Steve", "Musk"]
stringArr.sort();
// Sortie (4) ["Joe", "Kapil", "Musk", "Steve"]

stringArr.reverse();
// Sortie (4) ["Steve", "Musk", "Kapil", "Joe"]

• tableau de nombres triés

const array = [40, 100, 1, 5, 25, 10];
array.sort((a,b) => ab);
// Sortie (6) [1, 5, 10, 25, 40, 100]

array.sort((a,b) => ba);
// Sortie (6) [100, 40, 25, 10, 5, 1]

• ​​​​tableau d'objets tri

const objectArr = [
     { prénom : "Lazslo", nom : "Jamf" },
     { prénom : 'Cochon', nom_famille : 'Bodine' },    
     { prénom : "Pirate", nom : "Prentice" }
];
objectArr.sort((a, b) => a.last_name.localeCompare(b.last_name));
// Sortie (3) [{…}, {…}, {…}]
0 : {prénom : "Cochon", nom : "Bodine"}
1 : {prénom : "Lazslo", nom : "Jamf"}
2 : {prénom : "Pirate", nom : "Prentice"}
longueur : 3

4. Filtrer les fausses valeurs du tableau

Les valeurs fausses comme 0 , undefined , null , false , "" , '' peuvent être facilement omises par

const array = [3, 0, 6, 7, '' , FAUX];
array.filter(Booléen);
// Sortie (3) [3, 6, 7]

5. Utiliser des opérateurs logiques pour diverses conditions

Si vous souhaitez réduire les if...else imbriqués ou changer de cas, vous pouvez simplement utiliser les opérateurs logiques de base AND/OR .

fonction faireQuelquechose(arg1){ 
    arg1 = arg1 || 10; 
// Définit arg1 sur 10 par défaut s'il n'est pas déjà défini return arg1;
}

soit foo = 10 ;  
foo === 10 && faireQuelquechose(); 
// c'est la même chose que if (foo == 10) then doSomething();
// Sortie : 10

foo === 5 || faireQuelquechose();
// c'est la même chose que if (foo != 5) then doSomething();
// Sortie : 10

6. Supprimer les valeurs en double

Vous avez peut-être utilisé indexOf() avec une boucle for qui renvoie le premier index trouvé ou le plus récent includes() qui renvoie un booléen true/false d'un tableau pour trouver Out/remove des doublons. C'est là que nous disposons de deux méthodes plus rapides.

tableau const = [5,4,7,8,9,2,7,5];
array.filter((item,idx,arr) => arr.indexOf(item) === idx);
// ou
const nonUnique = [...new Set(array)];
// Sortie : [5, 4, 7, 8, 9, 2]

7. Créer un objet compteur ou une carte

La plupart du temps, vous devez résoudre le problème en créant un objet compteur ou une carte qui suit les variables comme clés, et suivre sa fréquence/occurrence sous forme de valeur.

let string = 'kapilalipak';

consttable={}; 
pour (laisser le caractère de la chaîne) {
  table[char]=table[char]+1 || 1;
}
// Sortie {k : 2, a : 3, p : 2, i : 2, l : 2}

et

const countMap = new Map();
  pour (soit i = 0; i < string.length; i++) {
    if (countMap.has(string[i])) {
      countMap.set(string[i], countMap.get(string[i]) + 1);
    } autre {
      countMap.set(string[i], 1);
    }
  }
// Output Map(5) {"k" => 2, "a" => 3, "p" => 2, "i" => 2, "l" => 2}

8. L'opérateur ternaire est très Cool,

vous pouvez éviter les conditions imbriquées en utilisant l'opérateur ternaire if…elseif…elseif.

fonction Fièvre (temp) {
    température de retour > 97 ? « Visitez le médecin ! »
      : temp < 97 ? 'Sortez et jouez !!'
      : temp === 97 ? 'Reposez-vous !';
}

// Sortie Fever(97) : "Prenez du repos !" 
Fever(100) : "Visit Doctor!"

9. La boucle for est plus rapide que l'ancienne

• for et for..in qui vous donne un index par défaut, mais vous pouvez utiliser arr[index].
• for..in accepte également les non-chiffres, alors évitez-le.
• forEach , for...of d'obtenir directement des éléments.
• forEach peut également vous donner un index, mais for...of ne le peut pas.
• for et for...of considérer les trous dans le tableau, mais pas les 2 autres.

10. Fusionner 2 objets

Habituellement, nous devons fusionner plusieurs objets dans les tâches quotidiennes.

utilisateur const = { 
 nom : « Kapil Raghuwanshi », 
 genre : 'Homme' 
 } ;
const collège = { 
 primaire : « École primaire de Mani », 
 secondaire : « École secondaire Lass » 
 } ;
const compétences = { 
 programmation : 'Extrême', 
 natation : 'Moyenne', 
 dormir : 'Pro' 
 } ;

const summary = {...utilisateur, ...université, ...compétences} ;

// Genre de sortie : "Mâle"
nom: "Kapil Raghuwanshi"
primaire : « École primaire de Mani »
programmation : "Extrême"
secondaire : « École secondaire Lass »
dormir : "Pro"
natation : "Moyenne"

11. Fonctions fléchées

Les expressions de fonctions fléchées sont des alternatives compactes aux expressions de fonctions traditionnelles, mais ont des limites et ne peuvent pas être utilisées dans toutes les situations. Puisqu'ils ont une portée lexicale (la portée parent) et n'ont pas leur propre portée, this arguments font donc référence à l'environnement dans lequel ils sont définis.

const personne = {
nom: 'Kapil',
direNom() {
    renvoie this.name ;
    }
}
personne.sayName();
// Sortie "Kapil"

mais

const person = {
nom: 'Kapil',
direNom : () => {
    renvoie this.name ;
    }
}
personne.sayName();
// Sortie ""

12.

Chaînage facultatif Chaînage facultatif ?. Arrête l'évaluation si la valeur précède ?. est indéfini ou nul et renvoie

undéfini.
utilisateur const = {
  employé: {
    nom: "Kapil"
  }
} ;
utilisateur.employé?.nom;
// Sortie : "Kapil"
utilisateur.emploi?.nom;
// Sortie : non défini
utilisateur.emploi.nom
// Sortie : VM21616:1 Uncaught TypeError : Impossible de lire la propriété 'nom' de undefined

13.

Utilisez la méthode Math.random() intégrée pour brouiller le tableau.

liste const = [1, 2, 3, 4, 5, 6, 7, 8, 9] ;
liste.sort(() => {
    return Math.random() - 0,5 ;
});
// Sortie (9) [2, 5, 1, 6, 9, 8, 4, 3, 7]
//Appelle-le à nouveau
(9) [4, 1, 7, 5, 3, 8, 2, 9, 6]

14. Opérateur de coalescence nul

L'opérateur de coalescence nul (??) est un opérateur logique, lorsque son opérande de gauche est vide ou indéfini, renvoie son opérande droit, sinon renvoie son opérande gauche.

const foo = null ?? 'mon école';
// Sortie : "mon école"

const baz = 0 ??
// Sortie : 0

15. Opérateur Rest & Spread

Ces mystérieux 3 points ... peuvent se reposer ou se propager ! ?

fonction myFun(a, b, ...manyMoreArgs) {
   renvoie arguments.longueur ;
}
myFun("un", "deux", "trois", "quatre", "cinq", "six");

// Sortie : 6

et

const parts = ['épaules', 'genoux']; 
const paroles = ['tête', ... parties, 'et', 'orteils']; 

paroles;
//sortir: 
(5) ["tête", "épaules", "genoux", "et", "orteils"]

16. Paramètre par défaut

const search = (arr, low=0,high=arr.length-1) => {
    revenir haut;
}
recherche([1,2,3,4,5]);

// Sortie : 4

17. Convertir le décimal en binaire ou hexadécimal

Lors de la résolution du problème, nous pouvons utiliser certaines méthodes intégrées telles que .toPrecision() ou .toFixed() pour implémenter de nombreuses fonctions d'assistance.

nombre const = 10 ;

num.toString(2);
// Sortie : "1010"
num.toString(16);
// Sortie : "a"
num.toString(8);
// Sortie : "12"

18. Utilisez la déstructuration pour échanger simplement deux valeurs

soit a = 5 ;
soit b = 8 ;
[une,b] = [b,une]

[une,b]
// Output(2) [8, 5]

19. Vérification du palindrome sur une seule ligne

Eh bien, ce n'est pas une astuce complète, mais cela vous donnera une bonne idée de la façon d'utiliser les chaînes.

fonction checkPalindrome(str) {
  return str == str.split('').reverse().join('');
}
checkPalindrome('naman');
// Sortie : true

20. Convertissez les propriétés d'objet en tableaux de propriétés

à l'aide de Object.entries(), Object.keys() et Object.values()
const obj = { a : 1, b : 2, c : 3 } ;

Objet.entries(obj);
// Sortie (3) [Tableau (2), Tableau (2), Tableau (2)]
0 : (2) ["une", 1]
1 : (2) ["b", 2]
2 : (2) ["c", 3]
longueur : 3

Objet.keys(obj);
(3) ["a", "b", "c"]

Objet.values(obj);
(3) [1, 2, 3]