10 conseils utiles pour les développeurs JavaScript

Vous avez peut-être manqué ces conseils très utiles.

Traduit de 10 astuces super utiles pour les développeurs JavaScript par Mahdhi Rezvi.

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 2
print(); // error
print(null); //printing null

Formatage du code JSON

Vous devez être très familier avec JSON.stringify, mais saviez-vous que vous pouvez également formater votre code via la méthode stringify. 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 les tableaux numériques

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 des utilisateurs. Même si cette exigence est rare, elle peut s’avérer utile.

<body oncontextmenu="return false">
  <div></div>
</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 puis d'une affectation. Pour les objets, nous pouvons redéfinir un nom pour le nom d'attribut de la manière suivante.

const object = { number: 10 };
// Grabbing number
const { number } = object;
// Grabbing number and renaming it as otherNumber
const { 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ètre.

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]

Attendez 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('Something went wrong'))];
Promise.all(PromiseArray)
  .then(data => console.log('all resolved! here are the resolve values:', data))
  .catch(err => console.log('got rejected! reason:', 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: 'fulfilled', value: 100 },
  { status: 'rejected', reason: null },
  { status: 'fulfilled', value: 'Data release' },
  {
    status: 'rejected',
    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!