Heim > Web-Frontend > js-Tutorial > 12 gängige Techniken zur Reduzierung der Codemenge in JavaScript

12 gängige Techniken zur Reduzierung der Codemenge in JavaScript

黄舟
Freigeben: 2017-08-11 10:40:21
Original
1558 Leute haben es durchsucht

In diesem Artikel werden hauptsächlich 12 häufig verwendete Techniken zur Javascript-Abkürzung vorgestellt. Mit diesen 12 Techniken können Sie den Umfang Ihres JS-Codes erheblich reduzieren Weißt du? Wolltuch? Freunde, die es brauchen, folgen Sie bitte dem Herausgeber, um gemeinsam zu lernen.

Vorwort

In diesem Artikel werden hauptsächlich 12 häufig verwendete Techniken zur Javascript-Abkürzung vorgestellt, es lohnt sich Probieren Sie es aus! Im Folgenden gibt es nicht viel zu sagen. Werfen wir einen Blick auf die ausführliche Einführung:

1. Leere (null, undefinierte) Überprüfung

Wenn wir eine neue Variable erstellen, überprüfen wir normalerweise, ob der Wert der Variablen null oder undefiniert ist. Dies ist eine Überprüfung, die bei der JavaScript-Programmierung häufig berücksichtigt werden muss.

Wenn es direkt geschrieben wird, so:


if (variable1 !== null || variable1 !== undefined || variable1 !== ''){
 let variable2 = variable1;
}
Nach dem Login kopieren

Wir können eine prägnantere Version verwenden


let variable2 = variable1 || '';
Nach dem Login kopieren

Wenn Sie es nicht glauben, können Sie es in der Konsole im Google Chrome-Entwicklermodus ausprobieren!


//值为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'
Nach dem Login kopieren

Hier ist zu beachten, dass Sie nach dem Debuggen einer Reihe von Codes die Seite aktualisieren oder andere Variablen definieren müssen, andernfalls wird ein Fehler gemeldet:

2. Array

Das scheint relativ einfach zu sein!

Nicht optimierter Code:


let a = new Array(); a[0] = "myString1"; a[1] = "myString2"; a[2] = "myString3";
Nach dem Login kopieren

Optimierter Code:


let a = ["myString1", "myString2", "myString3"];
Nach dem Login kopieren

3. Optimierung von if true .. else


let big;
if (x > 10) {
big = true;
}
else {
big = false;
}
Nach dem Login kopieren

Vereinfacht:


let big = x > 10 ? true : false;
Nach dem Login kopieren

Dies ist eine ternäre Arithmetik, die verwendet werden kann, wenn es nur eine Beurteilungsbedingung und ein einziges Ergebnis gibt.

Vereinfacht die Codemenge erheblich!


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}"
Nach dem Login kopieren

4. Variablendeklaration

Obwohl JavaScript automatisch Variablen deklariert ( Hoist) Mit dieser Methode können alle Variablen in einer Zeile am Kopf der Funktion ausgeführt werden.

Optimiertes Geld:


let x;
let y;
let z = 3;
Nach dem Login kopieren

Nach der Optimierung:


let x, y, z=3;
Nach dem Login kopieren

5. Vereinfachung von Zuordnungsanweisungen

Vor der Vereinfachung:


x=x+1;
minusCount = minusCount - 1;
y=y*10;
Nach dem Login kopieren

Vereinfacht Nachher: ​​


x++;
minusCount --;
y*=10;
Nach dem Login kopieren

Angenommen x=10, y=5, dann können die Grundrechenoperationen die folgende Abkürzung verwenden:


x += y // x=15
x -= y // x=5
x *= y // x=50
x /= y // x=2
x %= y // x=0
Nach dem Login kopieren

6. Vermeiden Sie die Verwendung von RegExp-Objekten

Vor der Vereinfachung:


var re = new RegExp("\d+(.)+\d+","igm"),
result = re.exrc("padding 01234 text text 56789 padding");
console.log(result);//"01234 text text 56789"
Nach dem Login kopieren

Vereinfacht:


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

7. Wenn Zustandsoptimierung

Vor der Vereinfachung:


if (likeJavaScript === true)
Nach dem Login kopieren
Nach der Vereinfachung:


if (likeJavaScript)
Nach dem Login kopieren
Lassen Sie uns ein weiteres Urteil fällen. Unwahres Beispiel :


let c;
if ( c!= true ) {
// do something...
}
Nach dem Login kopieren
Vereinfacht:


let c;
if ( !c ) {
// do something...
}
Nach dem Login kopieren

9. Optimierung der Funktionsparameter

Ich persönlich neige dazu, die Methode zum Abrufen von Objektelementen zu verwenden, um auf Funktionsparameter zuzugreifen. Das ist natürlich Ansichtssache!


Normalerweise verwendete Version:


function myFunction( myString, myNumber, myObject, myArray, myBoolean ) {
// do something...
}
myFunction( "String", 1, [], {}, true );
Nach dem Login kopieren
Meine Lieblingsversion:


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 );
Nach dem Login kopieren
Anmerkung des Übersetzers: Unter dem Originalartikel befindet sich ein Kommentar, der besagt, dass die Verwendung der Methode des Originalposters nicht empfohlen wird. Die Reihenfolge der Funktionsparameter kann mit der ersten Methode geändert werden, Sie sollten jedoch mit der zweiten Methode vorsichtig sein.


10. Alternativen zu charAt()

Vor der Vereinfachung:


"myString".charAt(0);
Nach dem Login kopieren
Vereinfacht:


"myString"[0];//返回&#39;m&#39;
Nach dem Login kopieren
Anmerkung des Übersetzers: Ich glaube, dass es nicht mehr viele Menschen gibt, die die erste Methode anwenden!


11. Funktionsaufrufe können kürzer sein

Vor der Vereinfachung:


function x() {console.log(&#39;x&#39;)};function y() {console.log(&#39;y&#39;)};
let z = 3;
if (z == 3)
{
x();
} else
{
y();
}
Nach dem Login kopieren
Vereinfacht:


function x() {console.log(&#39;x&#39;)};function y() {console.log(&#39;y&#39;)};let z = 3;
(z==3?x:y)();
Nach dem Login kopieren

12. Wie man große Zahlen elegant ausdrückt

In JavaScript gibt es eine Möglichkeit, Zahlen abzukürzen, vielleicht haben Sie das übersehen. 1e7 bedeutet 10000000.


Vor der Vereinfachung:


for (let i = 0; i < 10000; i++) {
Nach dem Login kopieren
Nach der Vereinfachung:


for (let i = 0; i < 1e7; i++) {
Nach dem Login kopieren

Zusammenfassung

Das obige ist der detaillierte Inhalt von12 gängige Techniken zur Reduzierung der Codemenge in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage