Une explication des techniques courantes pour simplifier le code javascript

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;
}

Nous pouvons utiliser une version plus concise

let variable2 = variable1 || '';

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'

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";

Code optimisé :

let a = ["myString1", "myString2", "myString3"];

3. Optimisation de si vrai .. sinon

let big;
if (x > 10) {
big = true;
}
else {
big = false;
}

Simplifié :

let big = x > 10 ? true : false;

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}"

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;

Après optimisation :

let x, y, z=3;

5. Simplification des relevés d'affectation

Avant simplification :

x=x+1;
minusCount = minusCount - 1;
y=y*10;

Simplifié Après :

x++;
minusCount --;
y*=10;

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

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"

Simplifié :

var result = /d+(.)+d+/igm.exec("padding 01234 text text 56789 padding");
console.log(result); //"01234 text text 56789"

7. Si optimisation des conditions

Avant simplification :

if (likeJavaScript === true)

Après simplification :

if (likeJavaScript)

Faisons un autre jugement Faux exemple :

let c;
if ( c!= true ) {
// do something...
}

Simplifié :

let c;
if ( !c ) {
// do something...
}

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 );

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 );

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);

Simplifié :

"myString"[0];//返回'm'

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('x')};function y() {console.log('y')};
let z = 3;
if (z == 3)
{
x();
} else
{
y();
}

Simplifié :

function x() {console.log('x')};function y() {console.log('y')};let z = 3;
(z==3?x:y)();

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++) {

Après simplification :

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!