Lernen Sie diese netten JavaScript-Tricks in weniger als 5 Minuten

Zeitsparende Techniken für Profis

1. Löschen oder Abschneiden eines Arrays

Eine einfache Möglichkeit, ein Array zu löschen oder abzuschneiden, ohne es neu zuzuweisen, besteht darin, seinen lengthEigenschaftswert zu ändern :

const arr = [11, 22, 33, 44, 55, 66];
// truncantingarr.length = 3;console.log(arr); //=> [11, 22, 33]
// clearingarr.length = 0;console.log(arr); //=> []console.log(arr[2]); //=> undefined

2. Simulation benannter Parameter mit Objektzerstörung

Es besteht eine hohe Wahrscheinlichkeit, dass Sie bereits Konfigurationsobjekte verwenden, wenn Sie einen variablen Satz von Optionen an eine Funktion wie die folgende übergeben müssen:

doSomething({ foo: 'Hello', bar: 'Hey!', baz: 42 });
function doSomething(config) { const foo = config.foo !== undefined ? config.foo : 'Hi'; const bar = config.bar !== undefined ? config.bar : 'Yo!'; const baz = config.baz !== undefined ? config.baz : 13; // ...}

Dies ist ein altes, aber effektives Muster, das versucht, benannte Parameter in JavaScript zu simulieren. Der Funktionsaufruf sieht gut aus. Andererseits ist die Logik zur Behandlung von Konfigurationsobjekten unnötig ausführlich. Mit der Objektzerstörung von ES2015 können Sie diesen Nachteil umgehen:

function doSomething({ foo = 'Hi', bar = 'Yo!', baz = 13 }) { // ...}

Und wenn Sie das Konfigurationsobjekt optional machen müssen, ist es auch sehr einfach:

function doSomething({ foo = 'Hi', bar = 'Yo!', baz = 13 } = {}) { // ...}

3. Objektzerstörung für Array-Elemente

Weisen Sie einzelnen Variablen mit Objektzerstörung Array-Elemente zu:

const csvFileLine = '1997,John Doe,US,[email protected],New York';
const { 2: country, 4: state } = csvFileLine.split(',');

4. Wechseln Sie mit Bereichen

HINWEIS: Nach einigen Überlegungen habe ich beschlossen, diesen Trick von den anderen in diesem Artikel zu unterscheiden. Dies ist KEINE zeitsparende Technik, NOR ist für echten Code geeignet. Denken Sie daran: „Wenn“ ist in solchen Situationen immer besser.

Anders als bei den anderen Tipps in diesem Beitrag ist es eher eine Kuriosität als etwas, das man wirklich verwenden kann.

Wie auch immer, ich werde es aus historischen Gründen in diesem Artikel behalten.

Hier ist ein einfacher Trick, um Bereiche in switch-Anweisungen zu verwenden:

function getWaterState(tempInCelsius) { let state; switch (true) { case (tempInCelsius  0 && tempInCelsius < 100): state = 'Liquid'; break; default: state = 'Gas'; }
 return state;}

5. Warten Sie mit async / await auf mehrere asynchrone Funktionen

Es ist möglich, awaitmehrere asynchrone Funktionen zu beenden, indem Sie Folgendes verwenden Promise.all:

await Promise.all([anAsyncCall(), thisIsAlsoAsync(), oneMore()])

6. Reine Objekte erstellen

Sie können ein 100% reines Objekt erstellen, das wird jede Eigenschaft oder Methode nicht erbt Object(zum Beispiel constructor, toString()und so weiter).

const pureObject = Object.create(null);
console.log(pureObject); //=> {}console.log(pureObject.constructor); //=> undefinedconsole.log(pureObject.toString); //=> undefinedconsole.log(pureObject.hasOwnProperty); //=> undefined

7. Formatieren von JSON-Code

JSON.stringifykann mehr als nur ein Objekt stringifizieren. Sie können damit auch Ihre JSON-Ausgabe verschönern:

const obj = { foo: { bar: [11, 22, 33, 44], baz: { bing: true, boom: 'Hello' } } };
// The third parameter is the number of spaces used to // beautify the JSON output.JSON.stringify(obj, null, 4); // =>"{// => "foo": {// => "bar": [// => 11,// => 22,// => 33,// => 44// => ],// => "baz": {// => "bing": true,// => "boom": "Hello"// => }// => }// =>}"

8. Entfernen doppelter Elemente aus einem Array

Mithilfe von ES2015-Sets zusammen mit dem Spread-Operator können Sie problemlos doppelte Elemente aus einem Array entfernen:

const removeDuplicateItems = arr => [...new Set(arr)];
removeDuplicateItems([42, 'foo', 42, 'foo', true, true]);//=> [42, "foo", true]

9. Reduzieren mehrdimensionaler Arrays

Das Reduzieren von Arrays ist mit dem Spread-Operator trivial:

const arr = [11, [22, 33], [44, 55], 66];
const flatArr = [].concat(...arr); //=> [11, 22, 33, 44, 55, 66]

Leider funktioniert der obige Trick nur mit zweidimensionalen Arrays. Mit rekursiven Aufrufen können wir es jedoch für Arrays mit mehr als zwei Dimensionen geeignet machen:

function flattenArray(arr) { const flattened = [].concat(...arr); return flattened.some(item => Array.isArray(item)) ? flattenArray(flattened) : flattened;}
const arr = [11, [22, 33], [44, [55, 66, [77, [88]], 99]]];
const flatArr = flattenArray(arr); //=> [11, 22, 33, 44, 55, 66, 77, 88, 99]

Und da hast du es! Ich hoffe, diese kleinen Tricks helfen Ihnen dabei, besseres und schöneres JavaScript zu schreiben.