9 trucuri utile pentru cei care programează JavaScript

1. Curățarea sau trunchierea unui tablou

Pentru a șterge un tablou (matrice) sau pentru a-i reduce lungimea, puteți modifica proprietatea lungimii sale.

const arr = [11, 22, 33, 44, 55, 66];
// trunchiere
arr.length = 3;
console.log(arr); //=> [11, 22, 33]
// curățarea
arr.length = 0;
console.log(arr); //=> []
console.log(arr[2]); //=> undefined

2. Simularea parametrilor numiți în funcții la destructurarea obiectului

Este foarte probabil ca în funcții să utilizați deja obiecte ca parametri de intrare. De exemplu, s-ar putea să arate astfel:

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

Acesta este un model vechi, dar eficient, care este utilizat pentru a simula parametrii numiți în JavaScript. Apelul unei astfel de funcții arată destul de normal, dar, pe de altă parte, pentru a implementa logica procesării unui obiect cu parametri, este nevoie de a scri mult cod. Datorită capacității de restructurare a obiectelor ES2015, acest dezavantaj poate fi evitat:

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

Și dacă trebuie să faceți un obiect cu parametri opționali, este foarte simplu, inițializăm obiectul cu un obiect gol:

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

3. Destructurarea elementelor unui tablou (matrice)

Iată cum puteți să atribuiți elemente matricei la variabile individuale folosind funcțiile de destructurare:

const csvFileLine = '1997,John Doe,US,john@doe.com,New York';
const { 2: country, 4: state } = csvFileLine.split(',');

4. Utilizarea intervalelor de valori într-un switch

Iată un truc simplu care demonstrează utilizarea intervalelor de valori într-o instrucțiune de comutare (switch):

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

5. Organizarea funcției de așteptare pentru mai multe funcții asincrone pentru a le executa concomitent în construcția async/wait

Datorită trucului următor, care utilizează Promise.all, puteți organiza așteptarea pentru mai multe funcții asincrone:

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

6. Crearea obiectelor curate

Dacă este necesar, puteți crea un obiect curat, absolut gol, care nu moștenește nicio proprietate și metodă de la Object (de exemplu, acesta este constructor, toString() și așa mai departe). Iată cum se face:

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

7. Formatarea codului JSON

Metoda JSON.stringify este capabilă mai mult decât să convertească obiectele în șiruri. În particular, puteți, de asemenea, să formatați codul obținut JSON:

const obj = { 
  foo: { bar: [11, 22, 33, 44], baz: { bing: true, boom: 'Hello' } } 
};
// Al treilea parametru este numărul de spații 
// utilizate pentru formatarea datelor JSON.
JSON.stringify(obj, null, 4); 
// =>"{
// =>    "foo": {
// =>        "bar": [
// =>            11,
// =>            22,
// =>            33,
// =>            44
// =>        ],
// =>        "baz": {
// =>            "bing": true,
// =>            "boom": "Hello"
// =>        }
// =>    }
// =>}"

8. Eliminarea elementelor duble dintr-un tablou

Utilizarea unui obiect de tip Set din ES2015 cu operatorul de extensie (spread) face ușor și convenabil eliminarea elementelor duple din tablouri:

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

9. Linearizarea matricelor multidimensionale

Linearizarea matricelor folosind operatorul de extensie (Spread) este o sarcină extrem de simplă:

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

Din păcate, tehnica de mai sus funcționează numai pentru tablele bidimensionale. Cu toate acestea, datorită recursiei, putem folosi această metodă pentru tablele cu mai mult de două dimensiuni:

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]

P/S: 😉 Sper că tehnicile pe care le-ați învățat din acest material vă vor ajuta să vă îmbunătățiți programele JavaScript și să economisiți timp.

Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate cu *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>