简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Maison
Article
Questions et réponses
Cours
Sujet
Télécharger
Jeu
Dictionnaire
mises à jour récentes

Maison  >  Article  >  interface Web  >  10 astuces courantes utilisées par les développeurs JavaScript

10 astuces courantes utilisées par les développeurs JavaScript

Guanhui
Guanhuiavant
2020-06-16 17:35:552525parcourir

10 astuces courantes utilisées par les développeurs JavaScript

Nous savons que JavaScript est un langage qui se développe rapidement. Parallèlement à ES2020, de nombreuses fonctionnalités intéressantes ont été ajoutées. Honnêtement, vous pouvez écrire du code de différentes manières. Pour implémenter la même fonction, certains codes sont très longs et d'autres très courts. Il existe quelques astuces que vous pouvez appliquer pour rendre votre code plus propre et plus clair. Les conseils suivants vous seront certainement utiles lors de vos prochains travaux de développement.

Validateur de paramètres de fonction

JavaScript vous permet de définir des valeurs par défaut pour les paramètres de fonction. Avec cette fonctionnalité, nous pouvons implémenter une petite astuce pour vérifier les paramètres de la fonction. 

const isRequired = () => { throw new Error('param is required'); };
const print = (num = isRequired()) => { console.log(`printing ${num}`) };
print(2); //printing 2print(); // errorprint(null); //printing null

Formater le code JSON

Vous devez être très familier avec JSON.stringify, mais saviez-vous que vous pouvez également formater votre code JSON via la méthode stringify ?code. En fait, c'est très simple. La méthode

stringify a trois paramètres, à savoir value replacer et space. Les deux derniers paramètres sont facultatifs, nous ne les utilisons donc généralement pas. Si nous voulons mettre en retrait le code de sortie, nous pouvons utiliser 2 espaces ou 4 espaces. 

console.log(JSON.stringify({ name:"John", Age:23 }, null, '  '));
>>> 
{  "name": "John",  "Age": 23}

Tableaux de déduplication

Dans le passé, nous utilisions la fonction filter pour filtrer les valeurs en double lors de la déduplication des tableaux. Mais nous pouvons désormais filtrer à l'aide de la nouvelle fonctionnalité Set. Très simple : 

let uniqueArray = [...new Set([1, 2, 3, 3, 3, "school", "school", 'ball', false, false, true, true])];
>>> [1, 2, 3, "school", "ball", false, true]

Supprimez la valeur du tableau où Boolean(v) est faux

Parfois, vous souhaitez supprimer la valeur du tableau où Boolean(v) est false . Il n'existe que les 6 types suivants en JavaScript :

  • undefined
  • null
  • NaN
  • 0
  • Chaîne vide
  • false

Le moyen le plus simple de supprimer ces valeurs est d'utiliser la méthode suivante : 

array.filter(Boolean)

Si vous voulez en faire d'abord. Pour modifier puis filtrer, vous pouvez utiliser la méthode suivante. N'oubliez pas que le tableau d'origine array reste inchangé et qu'un nouveau tableau est renvoyé. 

array
  .map(item => {      // Do your changes and return the new item
  })
  .filter(Boolean);

Fusionner plusieurs objets en même temps

Si vous devez fusionner plusieurs objets ou classes en même temps, vous pouvez utiliser la méthode suivante. 

const user = {  name: "John Ludwig",  gender: "Male",
};const college = {  primary: "Mani Primary School",  secondary: "Lass Secondary School",
};const skills = {  programming: "Extreme",  swimming: "Average",  sleeping: "Pro",
};const summary = { ...user, ...college, ...skills };

>>>
{  name: 'John Ludwig',  gender: 'Male',  primary: 'Mani Primary School',  secondary: 'Lass Secondary School',  programming: 'Extreme',  swimming: 'Average',  sleeping: 'Pro'}

Les trois points sont également appelés opérateurs d'expansion.

Trier un tableau de nombres

Les tableaux JavaScript ont une méthode de tri native arr.sort. Par défaut, cette méthode de tri convertit les éléments du tableau en chaînes et les trie lexicographiquement. Ce comportement par défaut peut entraîner des problèmes lors du tri des tableaux numériques. Voici donc un moyen de résoudre ce problème. 

[0, 10, 4, 9, 123, 54, 1].sort()
>>> [0, 1, 10, 123, 4, 54, 9]

[0, 10, 4, 9, 123, 54, 1].sort((a,b) => a-b);
>>> [0, 1, 4, 9, 10, 54, 123]

Désactiver le clic droit

Parfois, vous souhaiterez peut-être désactiver le clic droit de l'utilisateur. Même si cette exigence est rare, elle peut s’avérer utile. 

<body oncontextmenu="return false">
  <p></p>
  </body>

Ce simple extrait de code peut empêcher les utilisateurs de cliquer avec le bouton droit.

Renommer pendant la déstructuration

L'affectation de déstructuration est une fonctionnalité de JavaScript qui permet d'obtenir des valeurs directement à partir de tableaux ou d'objets sans avoir besoin d'une déclaration fastidieuse de variables et puis affectation. Pour les objets, nous pouvons redéfinir un nom pour le nom de l'attribut de la manière suivante. 

const object = { number: 10 };// Grabbing numberconst { number } = object;// Grabbing number and renaming it as otherNumberconst { number: otherNumber } = object;console.log(otherNumber); // 10

Obtenir le dernier élément du tableau

Si vous souhaitez obtenir le dernier élément du tableau, vous pouvez utiliser la fonction slice avec un nombre négatif comme paramètres. 

let array = [0, 1, 2, 3, 4, 5, 6, 7] 
console.log(array.slice(-1));
>>>[7]console.log(array.slice(-2));
>>>[6, 7]console.log(array.slice(-3));
>>>[5, 6, 7]

Attendre que toutes les promesses soient exécutées

Parfois, vous devrez peut-être attendre que plusieurs promesses soient exécutées avant d'effectuer des opérations ultérieures. Vous pouvez utiliser Promise.all pour exécuter ces promesses en parallèle. 

const PromiseArray = [    Promise.resolve(100),    Promise.reject(null),    Promise.resolve("Data release"),    Promise.reject(new Error(&#39;Something went wrong&#39;))];Promise.all(PromiseArray)
  .then(data => console.log(&#39;all resolved! here are the resolve values:&#39;, data))
  .catch(err => console.log(&#39;got rejected! reason:&#39;, err))

Veuillez noter que tant que l'un des Promise.all est dans l'état rejeté, il arrêtera immédiatement l'exécution et lèvera une exception.

Si vous souhaitez ignorer le statut résolu ou rejeté, vous pouvez utiliser Promise.allSettled. Il s'agit d'une nouvelle fonctionnalité d'ES2020. 

const PromiseArray = [  Promise.resolve(100),  Promise.reject(null),  Promise.resolve("Data release"),  Promise.reject(new Error("Something went wrong")),
];Promise.allSettled(PromiseArray)
  .then((res) => {    console.log("here", res);
  })
  .catch((err) => console.log(err));
>>>
here [
  { status: &#39;fulfilled&#39;, value: 100 },
  { status: &#39;rejected&#39;, reason: null },
  { status: &#39;fulfilled&#39;, value: &#39;Data release&#39; },
  {    status: &#39;rejected&#39;,    reason: Error: Something went wrong
        at Object.<anonymous> 
        at Module._compile (internal/modules/cjs/loader.js:1200:30)
        at Object.Module._extensions..js (internal/modules/cjs/loader.js:1220:10)
        at Module.load (internal/modules/cjs/loader.js:1049:32)
        at Function.Module._load (internal/modules/cjs/loader.js:937:14)
        at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12)
        at internal/main/run_main_module.js:17:47
  }
]

Tutoriel recommandé : "Tutoriel JS"

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!

JavaScript json Boolean Array sort Filter 字符串 JS 对象 promise
Déclaration：
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer
Article précédent：PHP implémente un démon - backendArticle suivant：PHP implémente un démon - backend

Articles Liés

Voir plus