10 JavaScript-Tricks, die Sie nicht kennen, um Ihren Code eleganter zu machen!

---

Vorwort

Wenn Sie Frontend-Entwickler werden, wird JavaScript ein wesentlicher Bestandteil Ihrer Arbeit sein. Während des Entwicklungsprozesses können viele heikle Probleme auftreten, z. B. Leistungsprobleme, Lesbarkeit des Codes, Codekomplexität usw. In diesem Artikel stellen wir 10 JavaScript-Tricks vor, die Ihnen helfen, diese Probleme besser zu lösen und Ihren Code eleganter zu gestalten.

1. Verwenden Sie eine Destrukturierungszuweisung, um die Lesbarkeit und Wartbarkeit des Codes zu verbessern.

Destrukturierende Zuweisung ist eine in ES6 eingeführte Syntax, mit der der Wert in einem Objekt oder Array destrukturiert und einer Variablen zugewiesen werden kann. Dies kann den Code prägnanter und verständlicher machen und die Lesbarkeit und Wartbarkeit des Codes verbessern.
Wir haben zum Beispiel ein Objekt, das Benutzerinformationen wie dieses enthält:

const user = {
    
    
  name: 'Tom',
  age: 18,
  sex: 'male',
  address: 'Beijing'
};

Wenn wir den Namen und das Alter des Benutzers ermitteln möchten, können wir eine destrukturierende Zuweisung verwenden:

const {
    
     name, age } = user;
console.log(name, age); // 输出：Tom 18

2. Die Verwendung von Vorlagenzeichenfolgen zur Verarbeitung des Zeichenfolgenspleißens kann den Code klarer und verständlicher machen.

Vor ES6 verwenden wir normalerweise das Pluszeichen oder die Methode concat() für die Zeichenfolgenverkettung. Diese Methode ist jedoch umständlich und die Lesbarkeit des Codes ist schlecht. In ES6 können wir Vorlagenzeichenfolgen verwenden, um die Zeichenfolgenverkettung zu handhaben, wodurch der Code klarer und verständlicher wird.
Eine Vorlagenzeichenfolge ist eine in Backticks (`) eingeschlossene Zeichenfolge, die Variablen, Ausdrücke und mehr enthalten kann. Zum Beispiel:

const name = 'Tom';
const age = 18;
const message = `My name is ${
      
      name}, I am ${
      
      age} years old.`;
console.log(message); // 输出：My name is Tom, I am 18 years old.

3. Verwenden Sie Pfeilfunktionen, um den Code zu verkürzen und die Lesbarkeit des Codes zu verbessern.

Die Pfeilfunktion ist eine in ES6 eingeführte Syntax, die die Codelänge der Funktion verkürzen und gleichzeitig die Lesbarkeit des Codes verbessern kann.
Wir haben zum Beispiel eine normale Funktion:

function add(a, b) {
    
    
  return a + b;
}

Es kann mit einer Pfeilfunktion definiert werden:

const add = (a, b) => a + b;

4. Die Verwendung von Object.assign() zum Zusammenführen von Objekten kann den Code prägnanter machen.

Im Entwicklungsprozess müssen wir häufig zwei oder mehr Objekte zusammenführen, was mit der Methode Object.assign() erreicht werden kann. Diese Methode kann alle Attribute eines oder mehrerer Quellobjekte auf das Zielobjekt kopieren, um so die Zusammenführung von Objekten zu realisieren.
Zum Beispiel:

const obj1 = {
    
     a: 1, b: 2 };
const obj2 = {
    
     c: 3, d: 4 };
const obj3 = Object.assign({
    
    }, obj1, obj2);
console.log(obj3); // 输出：{a: 1, b: 2, c: 3, d: 4}

5. Verwenden Sie die Kartendatenstruktur, um Daten zu verwalten und die Lesbarkeit des Codes zu verbessern.

Die Verwendung der Map-Datenstruktur zum Verwalten von Daten ist eine gängige Programmiertechnik, die die Lesbarkeit und Wartbarkeit des Codes verbessert.
Map ist eine neue Datenstruktur in ES6, die zum Speichern von Schlüssel-Wert-Paaren verwendet werden kann. Im Vergleich zu herkömmlichen Objekten besteht der Vorteil von Map darin, dass jeder Typ als Schlüsselname verwendet werden kann, die Reihenfolge der Schlüssel-Wert-Paare sich nicht ändert und die Größeninformationen schnell abgerufen werden können.
In der Frontend-Entwicklung können Sie Map verwenden, um Daten wie Listen, Formulare usw. auf der Seite zu verwalten. Durch die Verwendung von Map können Daten in Form von Schlüssel-Wert-Paaren gespeichert werden, was die Lesbarkeit und Wartbarkeit des Codes verbessern kann. Wenn Sie beispielsweise auf einer Seite die Werte mehrerer Formularelemente verwalten müssen, können Sie Map zum Speichern dieser Werte verwenden. Auf diese Weise kann der Wert jedes Formularelements über den entsprechenden Schlüsselnamen abgerufen werden, der Code ist besser lesbar und bequem zu ändern und zu warten.

// 创建一个Map对象
const formData = new Map();

// 添加表单元素的值到Map中
formData.set('username', 'John');
formData.set('password', '123456');

// 获取表单元素的值
const username = formData.get('username');
const password = formData.get('password');

Durch die Verwendung von Map zum Verwalten von Daten kann der Code präziser und einfacher zu warten sein. Gleichzeitig bietet Map auch einige praktische Methoden wie set (), get (), has (), delete () usw., mit denen die Daten problemlos bearbeitet werden können.
Hier sind einige häufige Nutzungsszenarien:

1. Formulardaten verwalten
Wenn es auf der Seite mehrere Formularelemente gibt, die eine Dateninteraktion erfordern, können Sie Map zum Speichern von Formulardaten verwenden. Zum Beispiel:

const formData = new Map();
formData.set('username', 'John');
formData.set('password', '123456');

Auf diese Weise können wir den Wert des entsprechenden Formularelements über die Methode get() abrufen:

const username = formData.get('username');
const password = formData.get('password');

2. Seitenstatus verwalten
Wenn es einige Status auf der Seite gibt, die verwaltet werden müssen, kann Map zum Speichern des Status verwendet werden. Zum Beispiel:

const state = new Map();
state.set('loading', false);
state.set('error', null);

Auf diese Weise können wir die Methode set() verwenden, um den Wert des entsprechenden Status zu aktualisieren:

state.set('loading', true);
state.set('error', '请求失败');

3. Listendaten verwalten
Wenn es auf der Seite eine Liste gibt, die verwaltet werden muss, können Sie Map verwenden, um die Listendaten zu speichern. Zum Beispiel:

const list = new Map();
list.set(1, {
    
     id: 1, name: 'John' });
list.set(2, {
    
     id: 2, name: 'Mike' });

Auf diese Weise können wir die Methode get() verwenden, um den Wert des entsprechenden Elements zu erhalten:

const item = list.get(1);

4. Zwischengespeicherte Daten verwalten
Wenn wir einige Daten zwischenspeichern müssen, können wir Map verwenden, um die zwischengespeicherten Daten zu speichern. Zum Beispiel:

const cache = new Map();
cache.set('key1', 'value1');
cache.set('key2', 'value2');

Auf diese Weise können wir die Methode get() verwenden, um die entsprechenden Cache-Daten abzurufen:

const value = cache.get('key1');

Kurz gesagt, Map ist eine sehr praktische Datenstruktur, die in der Front-End-Entwicklung häufig verwendet wird. Durch die Verwendung von Map zum Verwalten von Daten kann der Code prägnanter und einfacher zu warten sein. Gleichzeitig bietet Map auch einige praktische Methoden wie set (), get (), has (), delete () usw., mit denen die Daten problemlos bearbeitet werden können.

6. Verwenden Sie die Datenstruktur festlegen, um doppelte Elemente zu entfernen und den Code prägnanter zu gestalten.

Set ist eine neue Datenstruktur, die in ES6 eingeführt wurde. Es handelt sich um eine Sammlung, die jede Art von Daten speichern kann und garantiert, dass der Wert jedes Elements in der Sammlung eindeutig ist. Durch die Verwendung der Set-Datenstruktur können wiederholte Elemente im Array oder Objekt leicht entfernt und die Einfachheit des Codes verbessert werden.

Im Folgenden finden Sie einen Beispielcode für die Deduplizierung mit Set:

const arr = [1, 2, 3, 2, 1];
const set = new Set(arr);
const uniqueArr = Array.from(set); // [1, 2, 3]

Im obigen Code definieren wir zunächst ein Array arr, das wiederholte Elemente enthält. Verwenden Sie dann new Set(arr), um eine Set-Sammlung zu erstellen, die wiederholten Elemente im Array zu entfernen und eine Sammlung zu erhalten, die nur nicht wiederholte Elemente enthält. Schließlich verwenden wir Array.from, um die Sammlung in ein Array umzuwandeln, was zu einem Array uniqueArr führt, das keine doppelten Elemente enthält.
Diese Methode kann nicht nur für die Array-Deduplizierung, sondern auch für die Objekt-Deduplizierung verwendet werden. Beispielsweise können wir Set verwenden, um doppelte Objekte aus einem Array zu entfernen:

const arr = [{
    
     id: 1 }, {
    
     id: 2 }, {
    
     id: 1 }, {
    
     id: 3 }];
const set = new Set(arr.map(item => item.id));
const uniqueArr = Array.from(set, id => ({
    
     id }));
console.log(uniqueArr); // [{ id: 1 }, { id: 2 }, { id: 3 }]

Im obigen Code verwenden wir zunächst Array.map, um die Objekte im Array ihren ID-Werten zuzuordnen, und verwenden dann new Set, um doppelte ID-Werte zu entfernen. Schließlich konvertieren wir die Sammlung mithilfe von Array.from in ein Array von Objekten und erstellen für jeden ID-Wert ein neues Objekt, sodass ein Array entsteht, das nur eindeutige Objekte enthält.

7. Die Verwendung von async/await zur Verarbeitung asynchroner Vorgänge kann die Lesbarkeit und Wartbarkeit des Codes verbessern.

Asynchrone Vorgänge sind ein gängiges Programmiermuster in JavaScript, z. B. das Abrufen von Daten von einem Server oder das Ausführen lang andauernder Aufgaben usw. Asynchrone Vorgänge umfassen häufig Rückruffunktionen oder Promise-Objekte, was zu komplexem und schwer lesbarem Code führen kann. Um dieses Problem zu lösen, führt ES2017 den syntaktischen Zucker „async/await“ ein, der eine intuitivere und leichter verständliche Möglichkeit zur Handhabung asynchroner Vorgänge bietet.
Der syntaktische Zucker „async/await“ ist sehr einfach zu verwenden. Fügen Sie einfach das Schlüsselwort „async“ vor der Funktion hinzu und verwenden Sie das Schlüsselwort „await“, wenn Sie auf den Abschluss des asynchronen Vorgangs warten müssen. Hier ist beispielsweise ein asynchroner Vorgang mit Promise-Objekten:

function getData() {
    
    
  return new Promise((resolve, reject) => {
    
    
    setTimeout(() => {
    
    
      resolve('data');
    }, 1000);
  });
}

getData().then((data) => {
    
    
  console.log(data);
});

Mit der Async/Await-Syntax kann Sugar wie folgt umgeschrieben werden:

async function getData() {
    
    
  return new Promise((resolve, reject) => {
    
    
    setTimeout(() => {
    
    
      resolve('data');
    }, 1000);
  });
}

async function fetchData() {
    
    
  const data = await getData();
  console.log(data);
}

fetchData();

In diesem Beispiel gibt die Funktion getData() ein Promise-Objekt zurück, die Funktion fetchData() wird mit dem Schlüsselwort async als asynchrone Funktion deklariert und das Schlüsselwortawait wartet auf das Ergebnis des Promise-Objekts und speichert das Ergebnis dann im variable Daten. Auf diese Weise wird der Code durch die Verwendung von async/await syntaktischem Zucker prägnanter und leichter lesbar.

8. Verwenden Sie Promise.all (), um mehrere asynchrone Vorgänge abzuwickeln und die Codeeffizienz zu verbessern.

Bei der Front-End-Entwicklung ist es häufig erforderlich, mehrere asynchrone Vorgänge gleichzeitig zu verarbeiten, z. B. das Abrufen von Daten von mehreren API-Schnittstellen zur Anzeige. Zu diesem Zeitpunkt kann Promise.all () verwendet werden, um mehrere asynchrone Vorgänge gleichzeitig zu verarbeiten und so die Effizienz des Codes zu verbessern.
Promise.all() ist eine statische Methode, die ein Array als Parameter empfängt und jedes Element im Array ein Promise-Objekt ist. Wenn alle Promise-Objekte aufgelöst wurden, gibt die Promise.all()-Methode ein neues Promise-Objekt zurück, dessen Status aufgelöst ist, und der Rückgabewert ist ein Array der Ergebnisse aller Promise-Objekte; wenn eines der Promise-Objekte abgelehnt wird, Der Status des von der Promise.all()-Methode zurückgegebenen Promise-Objekts wird abgelehnt und das Ergebnis des ersten abgelehnten Promise-Objekts wird zurückgegeben.
Hier ist ein Beispielcode, der Promise.all() verwendet, um mehrere asynchrone Vorgänge abzuwickeln:

const fetchData1 = fetch('https://api.example.com/data1');
const fetchData2 = fetch('https://api.example.com/data2');
const fetchData3 = fetch('https://api.example.com/data3');

Promise.all([fetchData1, fetchData2, fetchData3])
  .then(responses => Promise.all(responses.map(res => res.json())))
  .then(dataArray => {
    
    
    // 在此处对数据进行处理和展示
  })
  .catch(error => console.log(error));

In diesem Beispiel werden zunächst drei asynchrone Vorgänge erstellt, und jeder Vorgang verwendet die fetch()-Methode, um Daten von der API-Schnittstelle abzurufen. Anschließend werden diese drei asynchronen Vorgänge in ein Array von Promise-Objekten gekapselt und zur Verarbeitung an die Promise.all()-Methode übergeben. Nachdem alle asynchronen Vorgänge ausgeführt wurden, verwenden Sie die Methode .then(), um die Ergebnisse jeder asynchronen Operation abzurufen, und verwenden Sie die Methode Promise.all(), um alle Ergebnisse zu verarbeiten und in JSON-formatierte Daten zu konvertieren. Abschließend erfolgt eine Anzeige oder sonstige Verarbeitung der verarbeiteten Daten. Wenn während eines asynchronen Vorgangs ein Fehler auftritt, wird dieser mithilfe der Methode .catch() abgefangen und behandelt.

9. Durch die Verwendung von const und let anstelle von var können die Probleme der Variablenförderung und globaler Variablen vermieden werden.

Vor ES6 war die einzige Möglichkeit, Variablen in JavaScript zu deklarieren, das Schlüsselwort var. Var weist jedoch einige Probleme auf, z. B. variable Hebevorgänge und globale Umweltverschmutzung, die bei großen Projekten zu unvorhersehbaren Problemen führen können.
ES6 führt zwei neue Schlüsselwörter ein, const und let, zum Deklarieren von Variablen. Im Vergleich zu var verfügen sie über eine bessere Semantik und strengere Bereichsregeln, wodurch einige potenzielle Probleme vermieden werden können.
Verwenden Sie const, um Konstanten zu deklarieren. Konstanten können nach der Deklaration nicht neu zugewiesen werden. Dadurch wird sichergestellt, dass sich der Wert der Konstante nicht versehentlich ändert, und die Lesbarkeit des Codes verbessert. Zum Beispiel:

const PI = 3.14159;
const url = 'https://example.com/api';

Verwenden Sie let, um variable Variablen zu deklarieren. Der Gültigkeitsbereich liegt nur innerhalb des deklarierten Blockbereichs. Let ermöglicht eine bessere Kontrolle über den Umfang von Variablen als der Umfang von var auf Funktionsebene. Zum Beispiel:

for (let i = 0; i < 10; i++) {
    
    
  console.log(i);
}

console.log(i); // ReferenceError: i is not defined

Im obigen Beispiel ist die Variable i nur im Blockebenenbereich der for-Schleife sichtbar und wird außerhalb dieses Bereichs zerstört, wodurch die Probleme der Variablenverschmutzung und Namenskonflikte vermieden werden können.

Im Allgemeinen kann die Verwendung von const und let anstelle von var die Lesbarkeit, Wartbarkeit und Sicherheit des Codes verbessern und einige unnötige Probleme vermeiden.

10. Die Verwendung von Try/Catch zur Fehlerbehandlung kann den Code robuster machen.

Beim Schreiben von Code ist es unvermeidlich, dass verschiedene Fehler auftreten, z. B. Syntaxfehler, Typfehler, Netzwerkfehler usw. Um den Code robuster zu machen, können wir Try/Catch zur Fehlerbehandlung verwenden.
Der try/catch-Anweisungsblock wird verwendet, um die Ausnahme im Codeblock abzufangen und eine Möglichkeit zur Behandlung der Ausnahme bereitzustellen. Wenn im Try-Anweisungsblock eine Ausnahme auftritt, springt das Programm sofort zum Catch-Anweisungsblock und führt den Code im Catch-Anweisungsblock aus.
Hier ist ein einfaches Beispiel für die Verwendung von Try/Catch zur Behandlung von Fehlern in Netzwerkanfragen:

async function fetchData() {
    
    
  try {
    
    
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    return data;
  } catch (error) {
    
    
    console.log('Error fetching data:', error);
    return null;
  }
}

In diesem Beispiel verwendet die Funktion fetchData() async/await, um asynchrone Vorgänge abzuwickeln, die Funktion fetch() wird zum Senden von Netzwerkanforderungen verwendet und die Methode Response.json() wird zum Konvertieren der Antwort in JSON-formatierte Daten verwendet.
Im try-Anweisungsblock verwenden wir das Schlüsselwort „await“, um darauf zu warten, dass die Methoden „fetch()“ und „response.json()“ Daten zurückgeben. Wenn ein Netzwerkfehler oder ein JSON-Parsing-Fehler auftritt, springt der Code sofort zum Catch-Block.
Im Catch-Block geben wir die Fehlermeldung aus und geben null zurück. Auf diese Weise können wir Fehler in Netzwerkanfragen in unserem Code behandeln und verhindern, dass das Programm abstürzt.

Zusammenfassen

Durch das Erlernen dieser JavaScript-Tipps können Sie die im Entwicklungsprozess auftretenden Probleme besser lösen und Ihren Code eleganter, prägnanter und einfacher zu warten gestalten.
Das Obige ist der gesamte Inhalt dieses Kapitels. Vielen Dank für das Lesen, ich hoffe, es kann Ihnen helfen.