JavaScript: 7 nützliche Kleinigkeiten

Der Autor der Notiz, deren Übersetzung wir heute veröffentlichen, sagt, dass Sie in JavaScript wie in jeder anderen Programmiersprache viele kleine Tricks finden können, mit denen eine Vielzahl von einfachen und recht komplexen Problemen gelöst werden können. Einige dieser Techniken sind weithin bekannt, während andere, die nicht so häufig sind, diejenigen angenehm überraschen können, die nichts über sie wissen. Jetzt werden wir uns 7 nützliche JavaScript-Programmiertechniken ansehen.

1. Abrufen eindeutiger Array-Werte

In JavaScript ist das Generieren eines Arrays, das nur eindeutige Werte aus einem anderen Array enthält, wahrscheinlich einfacher als Sie denken:

var j = [...new Set([1, 2, 3, 3])] // [1, 2, 3] 

Mir gefällt, wie dieses Problem mithilfe des Operators ... und des Datentyps Set gelöst werden kann.

2. Arrays und logische Werte

Mussten Sie jemals Werte aus einem Array entfernen , dessen Konvertierung in einen logischen Typ false ergibt? Dies sind beispielsweise Werte wie 0 , undefined , null , false . Möglicherweise haben Sie nicht gewusst, dass Sie dazu Folgendes tun könnten:

 myArray   .map(item => {       // ...   })   //       .filter(Boolean); 

Wie Sie sehen können, übergeben Sie den Boolean Wert einfach an die Array-Methode .filter() , um alle diese Werte zu .filter() .

3. Erstellen Sie wirklich leere Objekte

Ich bin sicher, dass Sie mit der Syntax des Objektliteral {} ein Objekt erstellen können, das leer zu sein scheint. Ein Prototyp ( __proto__ ) wird jedoch einem solchen Objekt zugewiesen. Es verfügt über eine hasOwnProperty() -Methode und andere Objektmethoden. Um ein wirklich leeres Objekt zu erstellen, das beispielsweise als „Wörterbuch“ verwendet werden kann, können Sie Folgendes tun:

 let dict = Object.create(null); // dict.__proto__ === "undefined" //        ,           

Ein auf diese Weise erstelltes Objekt verfügt nicht über Eigenschaften und Methoden, die ihm vom Programmierer nicht hinzugefügt werden.

4. Objekte zusammenführen

Diejenigen, die in JavaScript schreiben, mussten immer solche Objekte erstellen, die den Inhalt anderer Objekte enthalten. Diese Aufgabe wurde besonders dringend, wenn Klassen in JavaScript angezeigt wurden und Programmierer dann mit Widget-Software-Darstellungen arbeiten mussten. So erstellen Sie ein neues Objekt basierend auf mehreren anderen Objekten:

 const person = { name: 'David Walsh', gender: 'Male' }; const tools = { computer: 'Mac', editor: 'Atom' }; const attributes = { handsomeness: 'Extreme', hair: 'Brown', eyes: 'Blue' }; const summary = {...person, ...tools, ...attributes}; /* Object { "computer": "Mac", "editor": "Atom", "eyes": "Blue", "gender": "Male", "hair": "Brown", "handsomeness": "Extreme", "name": "David Walsh", } */ 

Der Operator ... vereinfacht die Lösung der Aufgabe des Zusammenführens von Objekten erheblich.

5. Erforderliche Funktionsparameter

Das Festlegen von Standardfunktionsargumentwerten ist eine hervorragende Erweiterung von JavaScript. Aber so geht's, damit die Funktionen ohne Übergabe einiger erforderlicher Parameter einfach nicht funktionieren:

 const isRequired = () => { throw new Error('param is required'); }; const hello = (name = isRequired()) => { console.log(`hello ${name}`) }; //    ,     name hello(); //     hello(undefined); //        hello(null); hello('David'); 

Vor uns liegt eine zusätzliche Überprüfungsebene dessen, was an Funktionen übergeben wird.

6. Destruktive Zuordnung und neue Namen der extrahierten Eigenschaften von Objekten

Die Destrukturierung ist eine neue nützliche JavaScript-Funktion. Manchmal müssen Eigenschaften, die von Objekten abgerufen werden, andere Namen zugewiesen werden als in diesen Objekten. So geht's:

 const obj = { x: 1 }; //      obj.x   x const { x } = obj; //   obj.x     otherName const { x: otherName } = obj; 

Diese Technik ist nützlich, wenn Sie einen Konflikt zwischen Variablennamen oder Konstanten vermeiden müssen.

7. Analysieren von Abfragezeichenfolgen

Seit vielen Jahren schreiben wir reguläre Ausdrücke, um Abfragezeichenfolgen zu analysieren, aber diese Zeiten sind vergangen. Um dieses Problem zu lösen, können Sie die wunderbare API URLSearchParams verwenden :

 // ,     "?post=1234&action=edit" var urlParams = new URLSearchParams(window.location.search); console.log(urlParams.has('post')); // true console.log(urlParams.get('action')); // "edit" console.log(urlParams.getAll('action')); // ["edit"] console.log(urlParams.toString()); // "?post=1234&action=edit" console.log(urlParams.append('active', '1')); // "?post=1234&action=edit&active=1" 

Die Verwendung der URLSearchParams API URLSearchParams viel einfacher als die Lösung derselben Aufgaben mit regulären Ausdrücken.

Zusammenfassung

Modernes JavaScript entwickelt sich sehr schnell und es erscheinen ständig verschiedene nützliche Verbesserungen. Die Verbesserung der Sprache bedeutet jedoch nicht, dass Programmierer nicht über den Code nachdenken und nach effektiven Lösungen für verschiedene Probleme suchen müssen, mit denen sie konfrontiert sind. Wir hoffen, dass die kleinen JavaScript-Tricks, über die wir heute gesprochen haben, nützlich sind.

Liebe Leser! Kennen Sie nützliche JS-Programmiertricks? Wenn ja, teilen Sie sie bitte.