Maison > interface Web > js tutoriel > le corps du texte

12 techniques courantes pour réduire la quantité de code en JavaScript

黄舟
Libérer: 2017-08-11 10:40:21
original
1551 Les gens l'ont consulté

Cet article partage principalement avec vous 12 techniques couramment utilisées pour l'abréviation javascript. Grâce à ces 12 techniques, vous pouvez réduire considérablement la quantité de votre code js. Comprendre un débutant est un maître. tu sais? Du drap de laine? Amis qui en ont besoin, veuillez suivre l'éditeur pour apprendre ensemble.

Avant-propos

Cet article partage principalement 12 techniques couramment utilisées pour l'abréviation javascript. Que vous soyez débutant ou vétéran, cela en vaut la peine. Lisez-le ! Pas grand chose à dire ci-dessous, jetons un œil à l'introduction détaillée :

1. Vérification vide (nulle, non définie)

Lorsque nous créons une nouvelle variable, nous vérifions généralement si la valeur de la variable est nulle ou indéfinie. Il s'agit d'une vérification qui doit souvent être prise en compte pour la programmation JavaScript.


Si écrit directement, comme ceci :


if (variable1 !== null || variable1 !== undefined || variable1 !== ''){
 let variable2 = variable1;
}
Copier après la connexion
Nous pouvons utiliser une version plus concise


let variable2 = variable1 || '';
Copier après la connexion
Si vous n'y croyez pas, vous pouvez l'essayer dans la console en mode développeur de Google Chrome !


//值为null的例子
let variable1 = null;
let variable2 = variable1 || '';
console.log(variable2);
//输出: ''
//值为undefined的例子
let variable1 = undefined;
let variable2 = variable1 || '';
console.log(variable2);
//输出: ''
//正常情况
let variable1 = 'hi there';
let variable2 = variable1 || '';
console.log(variable2);
//输出: 'hi there'
Copier après la connexion
Ce qu'il faut noter ici, c'est qu'après avoir débogué un ensemble de codes, vous devez actualiser la page ou définir différentes variables, sinon une erreur sera signalée :

2. Tableau

Cela semble relativement simple !


Code non optimisé :


let a = new Array(); a[0] = "myString1"; a[1] = "myString2"; a[2] = "myString3";
Copier après la connexion
Code optimisé :


let a = ["myString1", "myString2", "myString3"];
Copier après la connexion

3. Optimisation de si vrai .. sinon


let big;
if (x > 10) {
big = true;
}
else {
big = false;
}
Copier après la connexion
Simplifié :


let big = x > 10 ? true : false;
Copier après la connexion
Il s'agit d'une opération ternaire, qui peut être utilisée lorsqu'il n'y a qu'une seule condition de jugement et un seul résultat.


Simplifie grandement la quantité de code !


let big = (x > 10);
let x = 3,
big = (x > 10) ? "greater 10" : (x < 5) ? "less 5" : "between 5 and 10";
console.log(big); //"less 5"
let x = 20,
big = {true: x>10, false : x< =10};
console.log(big); //"Object {true=true, false=false}"
Copier après la connexion

4. Déclaration des variables

Bien que JavaScript déclare automatiquement les variables ( hoist), en utilisant cette méthode, toutes les variables peuvent être saisies sur une seule ligne en tête de la fonction.


Argent optimisé :


let x;
let y;
let z = 3;
Copier après la connexion
Après optimisation :


let x, y, z=3;
Copier après la connexion

5. Simplification des relevés d'affectation

Avant simplification :


x=x+1;
minusCount = minusCount - 1;
y=y*10;
Copier après la connexion
Simplifié Après :


x++;
minusCount --;
y*=10;
Copier après la connexion
En supposant x=10, y=5, alors les opérations arithmétiques de base peuvent utiliser l'abréviation suivante :


x += y // x=15
x -= y // x=5
x *= y // x=50
x /= y // x=2
x %= y // x=0
Copier après la connexion

6. Évitez d'utiliser des objets RegExp

Avant la simplification :


var re = new RegExp("\d+(.)+\d+","igm"),
result = re.exrc("padding 01234 text text 56789 padding");
console.log(result);//"01234 text text 56789"
Copier après la connexion
Simplifié :


var result = /d+(.)+d+/igm.exec("padding 01234 text text 56789 padding");
console.log(result); //"01234 text text 56789"
Copier après la connexion

7. Si optimisation des conditions

Avant simplification :


if (likeJavaScript === true)
Copier après la connexion
Après simplification :


if (likeJavaScript)
Copier après la connexion
Faisons un autre jugement Faux exemple :


let c;
if ( c!= true ) {
// do something...
}
Copier après la connexion
Simplifié :


let c;
if ( !c ) {
// do something...
}
Copier après la connexion

9. Optimisation des paramètres de fonction

Personnellement, j'ai tendance à utiliser la méthode d'obtention d'éléments d'objet pour accéder aux paramètres de fonction. Bien sûr, c'est une question d'opinion !


Version habituellement utilisée :


function myFunction( myString, myNumber, myObject, myArray, myBoolean ) {
// do something...
}
myFunction( "String", 1, [], {}, true );
Copier après la connexion
Ma version préférée :


function myFunction() {
/* 注释部分
console.log( arguments.length ); // 返回 5
for ( i = 0; i < arguments.length; i++ ) {
console.log( typeof arguments[i] ); // 返回 string, number, object, object, boolean
}
*/
}
myFunction( "String", 1, [], {}, true );
Copier après la connexion
Note du traducteur : il y a un commentaire sous l'article original indiquant qu'il n'est pas recommandé d'utiliser la méthode de l'affiche originale. L'ordre des paramètres de fonction peut être modifié en utilisant la première méthode, mais vous devez être prudent avec la seconde méthode.


10. Alternatives à charAt()

Avant simplification :


"myString".charAt(0);
Copier après la connexion
Simplifié :


"myString"[0];//返回&#39;m&#39;
Copier après la connexion
Note du traducteur : je crois qu'il n'y a plus beaucoup de gens qui utilisent la première méthode !


11. Les appels de fonctions peuvent être plus courts

Avant la simplification :


function x() {console.log(&#39;x&#39;)};function y() {console.log(&#39;y&#39;)};
let z = 3;
if (z == 3)
{
x();
} else
{
y();
}
Copier après la connexion
Simplifié :


function x() {console.log(&#39;x&#39;)};function y() {console.log(&#39;y&#39;)};let z = 3;
(z==3?x:y)();
Copier après la connexion

12. Comment exprimer de grands nombres avec élégance

En JavaScript, il existe un moyen d'abréger les nombres, peut-être l'avez-vous oublié. 1e7 signifie 1 000 000.


Avant simplification :


for (let i = 0; i < 10000; i++) {
Copier après la connexion
Après simplification :


for (let i = 0; i < 1e7; i++) {
Copier après la connexion

Résumé

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal