12 technieken voor het werken met JavaScript die niet in de meeste tutorials staan

Toen ik begon met het leren van JavaScript, maakte ik als eerste een lijst van technieken die me hielpen tijd te besparen. Ik heb ze afgekeken van andere programmeurs, op verschillende websites en in handleidingen.

In dit artikel laat ik 12 geweldige manieren zien om je JavaScript-code te verbeteren en te versnellen. In de meeste gevallen zijn ze universeel.

Ter herinnering: voor alle lezers van «Habr» — een korting van 10.000 roebel bij inschrijving voor elke cursus van Skillbox met de promocode «Habr».

Skillbox raadt aan: Praktische cursus ‘Mobiele Ontwikkelaar PRO’.

Unieke waarden filteren

ARRAYS

Het objecttype Set werd geïntroduceerd in ES6, samen met de …, spread-operator, waarmee we een nieuwe array kunnen maken die alleen unieke waarden bevat.

const array = [1, 1, 2, 3, 5, 5, 1]
const uniqueArray = [...new Set(array)];
 
console.log(uniqueArray); // Resultaat: [1, 2, 3, 5]

In een normale situatie zou het veel meer code vereisen om dezelfde operatie uit te voeren.

Deze techniek werkt voor arrays met primitieve types: undefined, null, boolean, string en number. Als je werkt met een array van objecten, functies of andere arrays, heb je een andere aanpak nodig.

De lengte van een array in lussen cache

LUSSEN

Wanneer je for gebruikt voor lussen, volg je de standaardprocedure:

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

Bij deze syntaxis controleert de for-lus echter opnieuw de lengte van de array bij elke iteratie.

Soms kan dit handig zijn, maar in de meeste gevallen is het efficiënter om de lengte van de array te cachen, wat één oproep vereist. We kunnen dit doen door een lengtevariabele te definiëren en de variabele i als volgt in te stellen:

for (let i = 0, length = array.length; i < length; i++){
  console.log(i);
}

In principe is het bijna hetzelfde als hierboven, maar bij het verhogen van de grootte van de lus besparen we aanzienlijk tijd.

Korte-circuit evaluatie (McCarthy evaluatie)

VOORWAARDEN

De ternary operator is een snelle en efficiënte manier om eenvoudige (en soms ook minder eenvoudige) voorwaardelijke statements te schrijven:

x > 100 ? "meer dan 100" : "minder dan 100";
x > 100 ? (x > 200 ? "meer dan 200" : "tussen 100-200") : "minder dan 100";

Maar soms is zelfs de ternary operator complexer dan nodig. In plaats daarvan kunnen we 'and' && en 'or' || logische operators gebruiken om sommige expressies nog beknopter te evalueren. Het wordt vaak kortsluiting of korte-circuit evaluatie genoemd.

Hoe het werkt

Laten we zeggen dat we slechts één van twee of meer voorwaarden willen teruggeven.

Het gebruik van && retourneert de eerste false waarde. Als elke operand als true wordt beoordeeld, wordt de laatste berekende uitdrukking teruggegeven.

let one = 1, two = 2, three = 3;
console.log(one && two && three); // Resultaat: 3
 
console.log(0 && null); // Resultaat: 0

Het gebruik van || zal de eerste true waarde retourneren. Als elke operand als false wordt beoordeeld, wordt de laatste berekende waarde teruggegeven.

let one = 1, two = 2, three = 3;
console.log(one || two || three); // Resultaat: 1
 
console.log(0 || null); // Resultaat: null

Voorbeeld 1

Stel dat we de length van een variabele willen retourneren, maar we weten haar type niet.

In dat geval kunnen we if/else gebruiken om te controleren of foo een geschikt type is, maar deze manier kan te tijdrovend zijn. Daarom gebruiken we beter onze 'short-circuiting'.

return (foo || []).length;

Als de variabele foo een geschikte length heeft, wordt deze teruggegeven. Anders ontvangen we 0.

Voorbeeld 2

Heeft u problemen gehad met het verkrijgen van toegang tot een genest object? U weet mogelijk niet of het object of een van zijn subeigenschappen bestaat, en dit kan problemen veroorzaken.

Bijvoorbeeld, we wilden toegang krijgen tot de eigenschap data in this.state, maar data is niet gedefinieerd totdat ons programma de fetch-aanroep retourneert.

Afhankelijk van waar we het gebruiken, kan de oproep this.state.data de uitvoering van de applicatie in gevaar brengen. Om het probleem op te lossen, zouden we dit in een voorwaardelijke uitdrukking kunnen wikkelen:

if (this.state.data) {
  return this.state.data;
} else {
  return 'Gegevens ophalen';
}

Een geschiktere optie zou zijn om de 'or'-operator te gebruiken.

return (this.state.data || 'Gegevens ophalen');

We kunnen de bovenstaande code niet wijzigen om && te gebruiken. De 'Gegevens ophalen'-operator && this.state.data retourneert this.state.data, ongeacht of deze undefined is of niet.

Optionele keten

Het kan nuttig zijn om optionele ketens te gebruiken wanneer je probeert een eigenschap diep in een boomstructuur terug te geven. Het vraagteken? kan worden gebruikt om een eigenschap alleen op te halen als deze niet null is.

Bijvoorbeeld, we zouden het bovenstaande voorbeeld kunnen refactoren naar this.state.data?.. (). Dat wil zeggen, data wordt alleen geretourneerd als de waarde niet null is.

Of, als het belangrijk is of state gedefinieerd is of niet, zouden we this.state?.data kunnen retourneren.

Omzetten naar Boolean

TYPECONVERSIE

Naast de gebruikelijke logische waarden true en false beschouwt JavaScript ook alle andere waarden als truthy of falsy.

Tenzij anders aangegeven, zijn alle waarden in JavaScript truthy, met uitzondering van 0, "", null, undefined, NaN en natuurlijk false. Laatstgenoemden zijn falsy.

We kunnen eenvoudig schakelen tussen de twee door de !-operator te gebruiken, die ook het type in boolean omzet.

const isTrue  = !0;
const isFalse = !1;
const alsoFalse = !!0;
 
console.log(true); // Resultaat: true
console.log(typeof true); // Resultaat: "boolean"

Omzetten naar string

TYPECONVERSIE

Een snelle conversie van een geheel getal naar een string kan als volgt worden uitgevoerd.

const val = 1 + "";
 
console.log(val); // Resultaat: "1"
console.log(typeof val); // Resultaat: "string"

Omzetten naar geheel getal

TYPECONVERSIE

De omgekeerde conversie doen we zo.

let int = "15";
int = +int;
 
console.log(int); // Resultaat: 15
console.log(typeof int); // Resultaat: "number"

Deze methode kan ook worden gebruikt om de boolean typegegevens om te zetten naar gewone numerieke waarden, zoals hieronder weergegeven:

console.log(+true); // Resultaat: 1
console.log(+false); // Resultaat: 0

Er kunnen situaties zijn waarin + wordt geïnterpreteerd als een concatenatieoperator in plaats van als optelling. Om dit te voorkomen, is het beter om tildes te gebruiken: ~~. Deze operator is gelijk aan de uitdrukking -n-1. Bijvoorbeeld, ~ 15 is gelijk aan -16.

Het gebruik van twee tildes achter elkaar annuleert de operatie, omdat — (- — n — 1) — 1 = n + 1 — 1 = n. Met andere woorden, ~ -16 is gelijk aan 15.

const int = ~~"15"
console.log(int); // Resultaat: 15
console.log(typeof int); // Resultaat: "number"

<Quick Powers

OPERATIES

Sinds ES7 kan de exponentiële operator ** worden gebruikt als een verkorting voor machten. Dit is veel sneller dan het gebruik van Math.pow (2, 3). Het lijkt eenvoudig, maar dit punt is opgenomen in de lijst van trucs, omdat het niet overal wordt vermeld.

console.log(2 ** 3); // Resultaat: 8

Verwar het niet met het symbool ^, dat meestal wordt gebruikt voor het verheffen tot een macht. Maar in JavaScript is dit een XOR-operator.

Tot ES7 kon de verkorting ** alleen worden toegepast voor machten met een basis van 2 met behulp van de bitwise verschuiving operator <<:

Math.pow(2, n);
2 << (n - 1);
2**n;

Bijvoorbeeld, 2 << 3 = 16 is gelijk aan de uitdrukking 2 ** 4 = 16.

Float naar geheel getal

OPERATIES / TYPECONVERSIE

Indien nodig kan een float naar een geheel getal worden geconverteerd met Math.floor(), Math.ceil() of Math.round(). Maar er is ook een snellere manier, waarbij we | gebruiken, dat wil zeggen de OR-operator.

console.log(23.9 | 0); // Resultaat: 23
console.log(-23.9 | 0); // Resultaat: -23

Gedrag | hangt in belangrijke mate af van of je met positieve of negatieve getallen werkt, dus deze methode is alleen geschikt als je zeker weet wat je doet.

n | 0 verwijdert alles na de decimale scheidingsteken, waardoor het drijvende-komma getal tot een geheel getal wordt afgerond.

Je kunt hetzelfde afrondingseffect bereiken met ~~. Na de gedwongen conversie naar een geheel getal blijft de waarde onveranderd.

Verwijder sluitende cijfers

De OR-operator kan worden gebruikt om een willekeurige hoeveelheid cijfers uit een getal te verwijderen. Dit betekent dat we geen typeconversies hoeven uit te voeren zoals hier:

let str = "1553";
Number(str.substring(0, str.length - 1));

In plaats daarvan schrijven we gewoon:

console.log(1553 / 10   | 0)  // Resultaat: 155
console.log(1553 / 100  | 0)  // Resultaat: 15
console.log(1553 / 1000 | 0)  // Resultaat: 1

Automatische binding

KLASSEN

ES6-pijlfuncties kunnen worden gebruikt in klassenmethods, waarbij binding wordt verondersteld. Hierdoor kun je afscheid nemen van herhalende uitdrukkingen, zoals this.myMethod = this.myMethod.bind(this)!

import React, { Component } from 'react';
 
export default class App extends Component {
  constructor(props) {
  super(props);
  this.state = {};
  }
 
myMethod = () => {
    // Deze methode is impliciet gebonden!
  }
 
render() {
    return (
      <>
        <div>
          {this.myMethod()}
        </div>
      </>
    )
  }
};

Array verkleinen

ARRAYS

Als je waarden uit een array moet verwijderen, zijn er snellere methoden dan splice().

Bijvoorbeeld, als je de grootte van de originele array kent, kun je de eigenschap length als volgt overschrijven:

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array.length = 4;

console.log(array); // Resultaat: [0, 1, 2, 3]

Maar er is ook een andere methode, die bovendien sneller is. Als snelheid belangrijk voor je is, is dit onze keuze:

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array = array.slice(0, 4);

console.log(array); // Resultaat: [0, 1, 2, 3]

Het weergeven van de laatste waarde(s) van een array

ARRAYS
Deze techniek vereist het gebruik van de slice()-methode.

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

console.log(array.slice(-1)); // Resultaat: [9]
console.log(array.slice(-2)); // Resultaat: [8, 9]
console.log(array.slice(-3)); // Resultaat: [7, 8, 9]

JSON-code formatteren

of een ander formaat.

Misschien heb je al JSON.stringify gebruikt. Wist je dat het helpt om je JSON te formatteren?

De methode stringify () accepteert twee optionele parameters: een vervangfunctie die je kunt gebruiken om de weergegeven JSON te filteren, en de waarde space.

console.log(JSON.stringify({ alpha: 'A', beta: 'B' }, null, 't'));

// Resultaat:
// '{
//     "alpha": A,
//     "beta": B
// }'

Dat is alles, ik hoop dat alle genoemde technieken nuttig waren. Welke trucs ken jij? Laat ze in de opmerkingen achter.

Skillbox raadt aan:

• Praktische tweejarenopleiding ‘Ik ben een PRO webdeveloper’.
• Online cursus «C#-ontwikkelaar vanaf 0».
• Praktische jaaropleiding ‘PHP-developer van 0 tot PRO’.

Bron: habr.com