Une explication des techniques courantes pour simplifier le code javascript-js tutoriel-php.cn

Une explication des techniques courantes pour simplifier le code javascript

巴扎黑

Libérer： 2017-08-12 16:22:56

original

1360 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 !== &#39;&#39;){
 let variable2 = variable1;
}

Copier après la connexion

Nous pouvons utiliser une version plus concise

let variable2 = variable1 || &#39;&#39;;

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 || &#39;&#39;;
console.log(variable2);
//输出: ''
//值为undefined的例子
let variable1 = undefined;
let variable2 = variable1 || &#39;&#39;;
console.log(variable2);
//输出: ''
//正常情况
let variable1 = 'hi there';
let variable2 = variable1 || &#39;&#39;;
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 :

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!