Eine Erklärung gängiger Techniken zur Vereinfachung von Javascript-Code

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

Wir können eine prägnantere Version verwenden

let variable2 = variable1 || '';

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'

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

Optimierter Code:

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

3. Optimierung von if true .. else

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

Vereinfacht:

let big = x > 10 ? true : false;

Dies ist eine ternäre Operation, die verwendet werden kann, wenn nur eine Beurteilungsbedingung und ein einziges Ergebnis vorliegen.

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

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 der Optimierung:

let x, y, z=3;

5. Vereinfachung von Zuordnungsanweisungen

Vor der Vereinfachung:

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

Vereinfacht Nachher: ​​

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

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

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"

Vereinfacht:

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

7. Wenn Zustandsoptimierung

Vor der Vereinfachung:

if (likeJavaScript === true)

Nach der Vereinfachung:

if (likeJavaScript)

Lassen Sie uns ein weiteres Urteil fällen. Unwahres Beispiel :

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

Vereinfacht:

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

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

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

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

Vereinfacht:

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

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

Vereinfacht:

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

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 der Vereinfachung:

Das obige ist der detaillierte Inhalt vonEine Erklärung gängiger Techniken zur Vereinfachung von Javascript-Code. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!