8 trucs et astuces pour écrire un excellent code JS (Partager)

La colonne tutoriel js suivante vous présentera 8 trucs et astuces pour écrire du code javascript. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Tutoriel recommandé : "Tutoriel vidéo JavaScript"

1. Générer des nombres dans la plage spécifiée

Parfois, il est nécessaire de créer un tableau dans une certaine plage de nombres. Par exemple, lors du choix d'un anniversaire. Voici la façon la plus simple de procéder.

let start = 1900,
    end = 2000;
[...new Array(end + 1).keys()].slice(start);
// [ 1900, 1901, ..., 2000]

// 也可以这样，但是大范围结果不稳定
Array.from({ length: end - start + 1 }, (_, i) => start + i);

2. Utilisez les valeurs du tableau de valeurs comme paramètres de la fonction

Parfois, nous devons d'abord mettre les valeurs dans le tableau, puis ensuite utilisez-les comme paramètres du transfert de fonction. En utilisant la syntaxe ES6, vous pouvez extraire les valeurs d'un tableau en utilisant uniquement l'opérateur de propagation (...) : [arg1，arg2] => (arg1，arg2).

const parts = {
  first: [0, 2],
  second: [1, 3],
};

["Hello", "World", "JS", "Tricks"].slice(...parts.second);
// ["World", "JS", "Tricks"]

Cette astuce fonctionne dans n'importe quelle fonction, veuillez passer au point 3.

3. Utilisez les valeurs du tableau de valeurs comme paramètres de la méthode mathématique

Lorsque vous devez trouver la valeur maximale ou minimale d'un nombre dans le tableau, vous pouvez faire comme suit :

// 查到元素中的 y 位置最大的那一个值
const elementsHeight =  [...document.body.children].map(
  el => el.getBoundingClientRect().y
);
Math.max(...elementsHeight);
// 输出最大的那个值

const numbers = [100, 100, -1000, 2000, -3000, 40000];
Math.min(...numbers);
// -3000

4. Aplatir les tableaux imbriqués

Array a une méthode nommée Array.flat, qui nécessite un paramètre représentant la profondeur à aplatir. le tableau d'imbrication (la valeur par défaut est 1). Mais que se passe-t-il si vous ne connaissez pas la profondeur ? Pour le moment, il vous suffit d'utiliser Infinity comme paramètre. Il existe également une méthode flatMap utile.

const arrays = [[10], 50, [100, [2000, 3000, [40000]]]];
arrays.flat(Infinity);
// [ 10, 50, 100, 2000, 3000, 40000 ]

5. Prévenir les plantages de code

S'il y a un comportement imprévisible dans le code, les conséquences sont imprévisibles, il faut donc y faire face.

Par exemple, lorsque l'attribut que vous souhaitez obtenir est undefined ou null, vous obtiendrez l'erreur TypeError.

Si le code de votre projet ne prend pas en charge le chaînage optionnel, vous pouvez faire ceci :

const found = [{ name: "Alex" }].find(i => i.name === 'Jim');
console.log(found.name);
// TypeError: Cannot read property 'name' of undefined

Cela peut être évité

const found = [{ name: "Alex" }].find(i => i.name === 'Jim') || {};
console.log(found.name);
// undefined

Mais cela dépend de la situation, il n'y a pas de problème pas du tout pour traiter du code à petite échelle. Il ne faut pas beaucoup de code pour le gérer.

6. Un bon moyen de transmettre des paramètres

Dans ES6, vous pouvez traiter le Modèle littéral comme des paramètres de fonction sans parenthèses. Ceci est utile lors du formatage ou de la conversion de texte.

const makeList = (raw) =>
  raw
    .join()
    .trim()
    .split("\n")
    .map((s, i) => `${i + 1}. ${s}`)
    .join("\n");

makeList`
Hello, World
Hello, World
`;

// 1. Hello
// 2. World

7. Échangez les valeurs des variables comme par magie

Les variables peuvent être échangées facilement en déstructurant la syntaxe d'affectation.

let a = "hello";
let b = "world";

// 错误 ❌
a = b
b = a
// { a: 'world', b: 'world' }

// 正确 ✅
[a, b] = [b, a];
// { a: 'world', b: 'hello' }

8. Chaînes de masquage

Parfois, nous devons masquer une partie de la chaîne, bien sûr, pas seulement pour les mots de passe. Dans le code ci-dessous, utilisez substr(-3) pour avancer une partie de la chaîne, c'est-à-dire 3 caractères en avant de la fin de la chaîne, puis remplissez les positions restantes avec vos caractères préférés (par exemple, utilisez *)

const password = "hackme";
password.substr(-3).padStart(password.length, "*");
// ***kme

Conclusion

Lors du codage, vous devez également garder le code propre, faire attention à l'accumulation de compétences utilisées dans le codage et faire attention aux nouvelles fonctionnalités de JavaScript.

Adresse originale : https://dev.to/gigantz/9-javascript-tips-tricks-to-code-like-a-wizard-559i

Auteur : Orkhan Jafarov

Adresse de traduction : https://segmentfault.com/a/1190000030697379

Pour plus de connaissances liées à la programmation, veuillez visiter : Cours de programmation ! !

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!