Naučite ove uredne JavaScript trikove za manje od 5 minuta

Tehnike uštede vremena koje koriste profesionalci

1. Brisanje ili skraćivanje niza

Jednostavan način brisanja ili skraćivanja niza bez ponovnog dodjeljivanja jest mijenjanjem lengthvrijednosti svojstva:

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. Simulacija imenovanih parametara s destrukturiranjem objekata

Velike su šanse da već koristite konfiguracijske objekte kada trebate prenijeti varijabilni skup opcija nekoj funkciji, poput ove:

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

Ovo je stari, ali učinkovit obrazac, koji pokušava simulirati imenovane parametre u JavaScript-u. Pozivanje funkcije izgleda u redu. S druge strane, logika upravljanja objektima konfiguracije nepotrebno je opširna. Uz ES2015 destrukturiranje objekata, možete zaobići ovu manu:

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

A ako konfiguracijski objekt trebate učiniti neobaveznim, to je također vrlo jednostavno:

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

3. Destrukturiranje objekata za stavke niza

Dodijelite stavke niza pojedinačnim varijablama s destrukturiranjem objekata:

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

4. Prebaci s rasponima

NAPOMENA: Nakon malo razmišljanja, odlučio sam razlikovati ovaj trik od ostalih u ovom članku. Ovo NIJE tehnika uštede vremena, NITI je li prikladna za šifre iz stvarnog života. Imajte na umu: "Ako su" uvijek bolji u takvim situacijama.

Za razliku od ostalih savjeta u ovom postu, to je više znatiželja nego nešto za stvarno korištenje.

Svejedno, zadržat ću ga u ovom članku iz povijesnih razloga.

Evo jednostavnog trika za upotrebu raspona u naredbama prebacivanja:

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

5. Čekajte višestruke funkcije asinkronizacije s async / await

Moguće je awaitvišestruke funkcije asinkronizacije završiti pomoću Promise.all:

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

6. Stvaranje čistih predmeta

Možete stvoriti 100% čisti objekt koji neće naslijediti nijedno svojstvo ili metodu Object(na primjer constructor, toString()i tako dalje).

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

7. Oblikovanje JSON koda

JSON.stringifymože učiniti više od jednostavnog stringificiranja objekta. Njime možete uljepšati i svoj JSON izlaz:

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. Uklanjanje dupliciranih predmeta iz niza

Korištenjem ES2015 skupova zajedno s operatorom Spread možete lako ukloniti dvostruke stavke iz niza:

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

9. Izravnavanje višedimenzionalnih nizova

Izravnavanje nizova je trivijalno s operatorom Spread:

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

Nažalost, gornji trik funkcionirat će samo s dvodimenzionalnim nizovima. Ali s rekurzivnim pozivima možemo ga učiniti prikladnim za nizove s više od 2 dimenzije:

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]

Eto ti ga! Nadam se da će vam ovi mali trikovi pomoći da napišete bolji i ljepši JavaScript.