20 JS-Abkürzungsfähigkeiten zur Verbesserung der Arbeitseffizienz

20 JS-Abkürzungsfähigkeiten zur Verbesserung der Arbeitseffizienz

Vorwort:

Kürzlich habe ich einige Artikel zum Vereinfachen von JS-Code gelesen. Ich denke, einer davon ist ziemlich gut, aber er ist auf Englisch. Ich habe auch einige chinesische Übersetzungen gelesen. Einer davon ist, dass die Wort-für-Wort-Übersetzung zu steif ist und nicht zu meiner eigenen wird. Der andere ist, dass der Autor neue Inhalte hinzugefügt hat, diese aber nicht rechtzeitig aktualisiert hat. Also habe ich sie in meiner eigenen Sprache in diesen Artikel übersetzt. Die Merkmale dieses Artikels sind hauptsächlich prägnant und prägnant.

Wenn Sie mehrere Variablen gleichzeitig deklarieren, können Sie es auf eine Zeile kürzen:

//Langschrift
lass x;
sei y = 20;
 
//Kurzschrift
sei x, y = 20;


Durch Destrukturierung können mehreren Variablen gleichzeitig Werte zugewiesen werden

//Langschrift
sei a, b, c;

ein = 5;
b = 8;
c = 12;

//Kurzschrift
sei [a, b, c] = [5, 8, 12];


Verwenden des ternären Operators zur Vereinfachung von „if else“

//Langschrift 
sei Mark = 26; 
lass resultieren; 
wenn (Punkte >= 30) {
   Ergebnis = ,Bestanden‘; 
} anders { 
   Ergebnis = ‚Fehlgeschlagen‘; 
} 

//Kurzschrift 
let result = marks >= 30 ? 'Bestanden' : 'Nicht bestanden';


Verwenden Sie den Operator ||, um Variablen Standardwerte zuzuweisen

Das Wesentliche besteht darin, die Eigenschaften des Operators || zu verwenden. Wenn das Ergebnis des vorherigen Ausdrucks in einen Booleschen Wert von false umgewandelt wird, ist der Wert das Ergebnis des folgenden Ausdrucks.

//Langschrift
lass Bildpfad;

let Pfad = getImagePath();

if (Pfad !== null && Pfad !== undefiniert && Pfad !== '') {
    imagePath = Pfad;
} anders {
    Bildpfad = "default.jpg";
}

//Kurzschrift
let imagePath = getImagePath() || 'default.jpg';

Verwenden des &&-Operators zum Vereinfachen von if-Anweisungen

Wenn eine Funktion beispielsweise nur aufgerufen wird, wenn eine bestimmte Bedingung erfüllt ist, kann sie verkürzt werden auf

//Langschrift
if (istangemeldet) {
    geheZuHomepage();
 }

//Kurzschrift
istangemeldet && geheZurHomepage();


Verwenden der Destrukturierung zum Vertauschen der Werte zweier Variablen

sei x = "Hallo", y = 55;

//Langschrift
konstantes Temp = x;
x = y;
y = Temperatur;

//Kurzschrift
[x, y] = [y, x];

Anwenden von Pfeilfunktionen zum Vereinfachen von Funktionen

//Langschrift
Funktion addieren(Zahl1, Zahl2) {
  gibt num1 + num2 zurück;
}

//Kurzschrift
const add = (Zahl1, Zahl2) => Zahl1 + Zahl2;


Beachten Sie den Unterschied zwischen Pfeilfunktionen und normalen Funktionen

Vereinfachen Sie Ihren Code mithilfe von Zeichenfolgenvorlagen

Verwenden Sie Vorlagenzeichenfolgen anstelle der Verkettung von Rohzeichenfolgen.

//Langschrift
console.log('Sie haben einen verpassten Anruf von ' + Nummer + ' um ' + Uhrzeit erhalten);

//Kurzschrift
console.log(`Sie haben um ${time} einen verpassten Anruf von ${number} erhalten`);

Mehrzeilige Zeichenfolgen können auch durch Zeichenfolgenvorlagen vereinfacht werden

//Langschrift
console.log('JavaScript, oft als JS abgekürzt, ist ein\n' + 
            'Programmiersprache, die konform ist mit \n' + 
            'ECMAScript-Spezifikation. JavaScript ist hochrangig,\n' + 
            „Oft just-in-time kompiliert und multiparadigmatisch.“
            );


//Kurzschrift
console.log(`JavaScript, oft als JS abgekürzt, ist ein
            Programmiersprache, die den
            ECMAScript-Spezifikation. JavaScript ist hochrangig,
            oft Just-in-Time kompiliert und multiparadigmatisch.`
            );


Für das Multi-Value-Matching können alle Werte in einem Array platziert und mithilfe von Array-Methoden vereinfacht werden

//Langschrift
wenn (Wert === 1 || Wert === 'eins' || Wert === 2 || Wert === 'zwei') {
  // Code ausführen
}

// Kurzschrift 1
if ([1, 'eins', 2, 'zwei'].indexOf(Wert) >= 0) {
   // Führe Code aus
}

// Kurzschrift 2
if ([1, 'eins', 2, 'zwei'].includes(Wert)) { 
    // Code ausführen 
}

Verwenden der prägnanten Syntax von ES6-Objekten

Beispiel: Wenn Attributname und Variablenname gleich sind, können sie zu einem abgekürzt werden.

lass Vorname = "Amitav";
let Nachname = "Misha";

//Langschrift
let obj = {Vorname: Vorname, Nachname: Nachname};

//Kurzschrift
let obj = {Vorname, Nachname};


Verwenden von unären Operatoren zum Vereinfachen der Konvertierung von Zeichenfolgen in Zahlen

//Langschrift
lass total = parseInt('453');
lass Durchschnitt = parseFloat('42.6');

//Kurzschrift
sei total = +'453';
sei Durchschnitt = +'42,6';


Verwenden Sie die Methode repeat(), um die Wiederholung einer Zeichenfolge zu vereinfachen

//Langschrift
lass str = '';
für(lass i = 0; i < 5; i++) {
  str += 'Hallo ';
}
console.log(str); // Hallo, Hallo, Hallo, Hallo, Hallo

// Kurzschrift
'Hallo '.repeat(5);

// Ich möchte mich 100 Mal bei dir entschuldigen!
'Entschuldigung\n'.repeat(100);


Verwenden Sie doppelte Sternchen anstelle von Math.pow()

//Langschrift
const power = Math.pow(4, 3); // 64

// Kurzschrift
Konstante Leistung = 4**3; // 64


Verwenden Sie den doppelten Tilde-Operator (~~) anstelle von Math.floor()

//Langschrift
const floor = Math.floor(6.8); // 6

// Kurzschrift
const Boden = ~~6,8; // 6


Beachten Sie, dass ~~ nur auf Zahlen kleiner als 2147483647 anwendbar ist

Verwenden des Spread-Operators (...) zur Vereinfachung von Code

Vereinfachung der Array-Zusammenführung

sei arr1 = [20, 30];

//Langschrift
lass arr2 = arr1.concat([60, 80]); // [20, 30, 60, 80]

//Kurzschrift
lass arr2 = [...arr1, 60, 80]; // [20, 30, 60, 80]


Kopieren eines einschichtigen Objekts

sei obj = {x: 20, y: {z: 30}};

//Langschrift
const makeDeepClone = (obj) => {
  lass neuesObjekt = {};
  Objekt.Schlüssel(Objekt).Map(Schlüssel => {
      wenn(Typ von Objekt[Schlüssel] === 'Objekt'){
          neuesObjekt[Schlüssel] = makeDeepClone(Objekt[Schlüssel]);
      } anders {
          neuesObjekt[Schlüssel] = Objekt[Schlüssel];
      }
});

gib neues Objekt zurück;
}

const cloneObj = makeDeepClone(obj);



//Kurzschrift
: Konstanten cloneObj = JSON.parse(JSON.stringify(obj));

//Abkürzung für ein einstufiges Objekt
let obj = {x: 20, y: 'hallo'};
const cloneObj = {...obj};

Finden der Maximal- und Minimalwerte in einem Array

// Kurzschrift
const arr = [2, 8, 15, 4];
Math.max(...arr); // 15
Math.min(...arr); // 2


Verwenden Sie for in und for of, um die normale for-Schleife zu vereinfachen

sei arr = [10, 20, 30, 40];

//Langschrift
für (sei i = 0; i < arr.length; i++) {
  Konsole.log(arr[i]);
}

//Kurzschrift
//für die Schleife
für (const val of arr) {
  konsole.log(Wert);
}

//für in Schleife
für (const index in arr) {
  Konsole.log(arr[index]);
}


Vereinfachen Sie das Abrufen eines Zeichens in einer Zeichenfolge

let str = "jscurious.com";

//Langschrift
str.charAt(2); // c

//Kurzschrift
str[2]; // c


Entfernen von Objekteigenschaften

sei obj = {x: 45, y: 72, z: 68, p: 98};

// Langschrift
obj.x löschen;
lösche obj.p;
console.log(obj); // {y: 72, z: 68}

// Kurzschrift
sei {x, p, ...neuesObjekt} = Objekt;
console.log(neuesObj); // {y: 72, z: 68}


Verwenden Sie arr.filter(Boolean), um den Wert falsey des Array-Mitglieds herauszufiltern

let arr = [12, null, 0, 'xyz', null, -25, NaN, '', undefiniert, 0,5, falsch];

//Langschrift
let filterArray = arr.filter(Funktion(Wert) {
    wenn (Wert) Rückgabewert;
});
// FilterArray = [12, "xyz", -25, 0,5]

// Kurzschrift
Lassen Sie filterArray = arr.filter(Boolean);
// FilterArray = [12, "xyz", -25, 0,5]

Damit ist dieser Artikel über 20 Tipps zur JS-Abkürzung zur Verbesserung der Arbeitseffizienz abgeschlossen. Weitere relevante Tipps zur JS-Abkürzung finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

Das könnte Sie auch interessieren:
  • Teilen Sie 5 Tipps zum Schreiben von JavaScript
  • Allgemeine Kenntnisse zu Array-Operationen in JavaScript (Teil 2)
  • Allgemeine Array-Operationstechniken in JavaScript
  • Ein praktischer Leitfaden zur Destrukturierungszuweisung in JavaScript
  • Einführung und Tipps zur Verwendung der interaktiven Visualisierungs-JS-Bibliothek gojs
  • 3 Tipps, die Sie beim Erlernen von JavaScript kennen müssen
  • Neunundvierzig JavaScript-Tipps und Tricks
  • Teilen Sie 7 Killer-JS-Tipps

<<:  Erstellen Sie einen hochverfügbaren MySQL-Cluster mit Dual-VIP

>>:  In der HTML-Tabelle wird nur der äußere Rand der Tabelle angezeigt

Artikel empfehlen

Detaillierte Erklärung zur korrekten Verwendung der if-Funktion in MySQL

Für das, was ich heute schreiben werde, lief das ...

So implementieren Sie eine automatische Remote-Sicherung von MongoDB unter Linux

Vorwort Nachdem ich den vorherigen Artikel über d...

Kleines Problem mit dem Abstand zwischen Label und Eingabe im Google Browser

Erst Code, dann Text Code kopieren Der Code lautet...

Detaillierte Erklärung der Set-Datenstruktur von JavaScript

Inhaltsverzeichnis 1. Was ist Set 2. Konstruktor ...

SASS Style Programmierhandbuch für CSS

Da immer mehr Entwickler SASS verwenden, müssen w...

So löschen Sie Ordner, Dateien und Dekomprimierungsbefehle auf Linux-Servern

1. Ordner löschen Beispiel: rm -rf /usr/java Das ...

js, um eine einfache Produkt-Screening-Funktion zu erreichen

In diesem Artikelbeispiel wird der spezifische JS...

So verwenden Sie das Schreiben von Dateien zum Debuggen einer Linux-Anwendung

Unter Linux ist alles eine Datei, daher besteht d...

Fallstricke bei der neueren Version des IDEA2021 Tomcat10-Servlets

Da die Version, die ich beim Lernen verwendet hab...

So beheben Sie den PyCurl-Fehler unter Linux

Lösung für „Curl-config konnte nicht ausgeführt w...