Capacités JavaScript que vous ne connaissez peut-être pas. Partie 1

Cet article partagera certaines compétences JavaScript pour vous aider à mieux comprendre les subtilités de cette langue et à améliorer votre code. L'article est principalement destiné aux développeurs juniors et intermédiaires. ?

N'oubliez pas de vous abonner à ma chaîne télégramme, je partagerai des articles intéressants sur le développement avant! ?

Commencez!

1. Symboles de segmentation numérique

En nombre, vous pouvez utiliser

pour améliorer la lisibilité du code. _

<code class="language-javascript">const sixBillion = 6000000000;

// 难以阅读
const sixBillion2 = 6000_000_000;

// 更易于阅读
console.log(sixBillion2); // 6000000000

// 也可用于计算
const sum = 1000 + 6000_000_000; // 6000001000</code>

2. Simplifiez l'opérateur de chaîne en option

   et le caractère informatique ternaire &&

Par exemple, nous voulons simplifier le code suivant:

<code class="language-javascript">const obj = null;
console.log(obj && obj.name);
const title1 = document.querySelector('.title');
const title = title1 ? title.innerText : undefined;</code>

Utilisez l'opérateur de chaîne en option pour réécrire le code:

<code class="language-javascript">const obj = null;
console.log(obj?.name);
const title1 = document.querySelector('.title');
const title = title1?.innerText;</code>

Les opérations de chaîne facultatives rendent le code plus concis et plus facile à lire.

3. Utilisation de BigInt pour résoudre le problème des grands calculs entiers

Malheureusement, l'exactitude du calcul numérique de

(9007199254740991) dans JS ne peut être garantie, ce qui est frustrant. Number.MAX_SAFE_INTEGER

par exemple:

Afin de calculer le grand nombre, il est recommandé d'utiliser BigInt. Cela aidera à éviter de calculer les erreurs.

<code class="language-javascript">Math.pow(2, 53) === Math.pow(2, 53) + 1; // true

// Math.pow(2, 53) => 9007199254740992

// Math.pow(2, 53) + 1 => 9007199254740992</code>

<code class="language-javascript">BigInt(Math.pow(2, 53)) === BigInt(Math.pow(2, 53)) + BigInt(1); // false</code>

L'alternative de l'opérateur

4. in

   Afin de vérifier si les attributs de l'objet, nous utilisons généralement l'opérateur
, mais vous pouvez également utiliser

.

in Les deux ont leurs lacunes: obj.hasOwnProperty()

Les attributs existants de la vérification des caractères informatiques, y compris les attributs de l'héritage du prototype. Si vous voulez simplement vérifier les attributs de l'objet lui-même, pas l'attribut de son prototype, cela peut conduire à des résultats inattendus.

La méthode vérifie uniquement les attributs de l'objet lui-même, à l'exclusion des attributs de l'héritage du prototype. Cependant, si l'objet réécrit la méthode , cette méthode ne fonctionnera pas correctement. Dans ce cas, appeler peut entraîner des erreurs ou des résultats incorrects.
• in
Aucune de ces méthodes n'a considéré les attributs accessibles via la chaîne prototype. Si vous devez vérifier les attributs de l'objet, y compris son prototype, vous devez utiliser d'autres méthodes, telles que
• ou obj.hasOwnProperty(). hasOwnProperty obj.hasOwnProperty() Lors du traitement de gros objets ou des structures de données imbriquées,
et

peuvent être gênantes et inefficaces. Cela peut nécessiter plusieurs inspections et appels de méthode pour ralentir l'exécution du programme.

Object.getPrototypeOf() Exemple simple: Object.prototype.isPrototypeOf()

Il existe également un opérateur plus pratique et plus sûr in. obj.hasOwnProperty()

<code class="language-javascript">const sixBillion = 6000000000;

// 难以阅读
const sixBillion2 = 6000_000_000;

// 更易于阅读
console.log(sixBillion2); // 6000000000

// 也可用于计算
const sum = 1000 + 6000_000_000; // 6000001000</code>

5. Utilisez # pour déclarer des propriétés privées

Dans le passé, afin d'indiquer qu'un champ est privé, nous avions l'habitude d'ajouter un trait de soulignement (_) avant le nom de l'attribut. Mais maintenant, nous pouvons utiliser # pour déclarer des propriétés véritablement privées :

<code class="language-javascript">const obj = null;
console.log(obj && obj.name);
const title1 = document.querySelector('.title');
const title = title1 ? title.innerText : undefined;</code>

6. Utilisez ?? au lieu de ||

Utilisez l'opérateur ?? au lieu de || pour vérifier si la valeur sur le côté gauche de l'opérateur est nulle ou indéfinie et renvoie la valeur sur le côté droit.

Exemple :

<code class="language-javascript">const obj = null;
console.log(obj?.name);
const title1 = document.querySelector('.title');
const title = title1?.innerText;</code>

Dans l'exemple ci-dessus, l'opérateur ?? renvoie la valeur de sa variable de gauche si la valeur de la variable de gauche n'est pas nulle ou indéfinie.

Sinon, si la valeur de la variable de gauche est nulle ou indéfinie, l'opérateur renvoie la valeur de la variable de droite.

7. Convertir la chaîne en nombre

De nombreux développeurs utilisent la fonction parseInt() pour convertir des chaînes en nombres, mais vous pouvez utiliser l'opérateur pour obtenir le même résultat, qui est plus concis :

<code class="language-javascript">Math.pow(2, 53) === Math.pow(2, 53) + 1; // true

// Math.pow(2, 53) => 9007199254740992

// Math.pow(2, 53) + 1 => 9007199254740992</code>

Les deux méthodes fonctionnent, mais l'opérateur est plus simple et plus clair.

8. Une méthode abrégée pour arrondir les nombres, en remplaçant Math.floor()

Au lieu d'utiliser la fonction Math.floor() pour arrondir un nombre inférieur, utilisez l'opérateur bit à bit non ~~ comme raccourci :

<code class="language-javascript">BigInt(Math.pow(2, 53)) === BigInt(Math.pow(2, 53)) + BigInt(1); // false</code>

Je ne vous recommande pas d'utiliser toutes les techniques décrites dans cet article. Certaines méthodes peuvent endommager votre code, mais il est important de les connaître.

Merci d’avoir lu cet article ! J'espère que vous avez appris quelque chose d'utile. Restez à l'écoute pour la deuxième partie ! ?

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!