Lær disse pæne JavaScript-tricks på mindre end 5 minutter

Tidsbesparende teknikker brugt af professionelle

1. Rydning eller afkortning af en matrix

En nem måde at rydde eller afkorte et array på uden at tildele det igen er ved at ændre dets lengthegenskabsværdi:

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. Simulering af navngivne parametre med objektdestruktion

Chancerne er høje for, at du allerede bruger konfigurationsobjekter, når du skal sende et variabelt sæt indstillinger til en eller anden funktion, som denne:

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; // ...}

Dette er et gammelt, men effektivt mønster, der forsøger at simulere navngivne parametre i JavaScript. Funktionsopkaldet ser fint ud. På den anden side er konfigurationshåndteringslogikken unødigt omfattende. Med ES2015-objektdestruktion kan du omgå denne ulempe:

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

Og hvis du har brug for at gøre konfigurationsobjektet valgfrit, er det også meget simpelt:

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

3. Objektdestruktion af matrixelementer

Tildel matrixelementer til individuelle variabler med objektdestrukturering:

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

4. Skift med intervaller

BEMÆRK: Efter nogle overvejelser har jeg besluttet at skelne dette trick fra de andre i denne artikel. Dette er IKKE en tidsbesparende teknik, NOR er det velegnet til kode i det virkelige liv. Husk: “Hvis” altid er bedre i sådanne situationer.

I modsætning til de andre tip i dette indlæg er det mere en nysgerrighed end noget at virkelig bruge.

Under alle omstændigheder holder jeg det i denne artikel af historiske årsager.

Her er et simpelt trick til at bruge intervaller i switch-udsagn:

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

5. Afvente flere asynkroniseringsfunktioner med asynkronisering / afvent

Det er muligt at awaitadskille flere asynkroniseringsfunktioner ved at bruge Promise.all:

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

6. Oprettelse af rene objekter

Du kan oprette en 100% ren objekt, som ikke vil arve nogen egenskab eller metode fra Object(f.eks constructor, toString()og så videre).

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

7. Formatering af JSON-kode

JSON.stringifykan gøre mere end blot at strenge et objekt. Du kan også forskønne dit JSON-output med det:

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. Fjernelse af duplikatelementer fra en matrix

Ved at bruge ES2015-sæt sammen med Spread-operatoren kan du nemt fjerne duplikatelementer fra en matrix:

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

9. Flad flerdimensionale arrays

Fladearrayer er trivielle med Spread-operatøren:

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

Desværre fungerer ovenstående trick kun med todimensionale arrays. Men med rekursive opkald kan vi gøre det egnet til arrays med mere end 2 dimensioner:

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]

Og der har du det! Jeg håber, at disse pæne små tricks hjælper dig med at skrive bedre og smukkere JavaScript.