de Alcides Queiroz

Aflați aceste trucuri JavaScript în mai puțin de 5 minute

Tehnici de economisire a timpului folosite de profesioniști

Aflati aceste trucuri JavaScript in mai putin de 5 minute

1. Ștergerea sau tăierea unui tablou

O modalitate ușoară de a șterge sau trunchia o matrice fără a o reatribui este schimbând-o length Valoarea proprietății:

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. Simularea parametrilor denumiți cu destructurarea obiectelor

Sunt șanse mari să utilizați deja obiecte de configurare atunci când trebuie să transmiteți un set variabil de opțiuni unei anumite funcții, cum ar fi aceasta:

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 încearcă să simuleze parametrii numiți în JavaScript. Funcția de apelare arată bine. Pe de altă parte, logica de manipulare a obiectelor de configurare este inutilă, detaliată. Cu destructurarea obiectelor ES2015, puteți ocoli acest dezavantaj:

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

Și dacă trebuie să faceți obiectul config opțional, este foarte simplu, de asemenea:

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

3. Destructurarea obiectelor pentru elementele matrice

Atribuiți elemente matrice variabilelor individuale cu destructurare obiect:

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

4. Comutați cu intervale

NOTĂ: După câteva gândiri, am decis să diferențiez acest truc de celelalte din acest articol. Aceasta este NU o tehnică de economisire a timpului, NICI este potrivit pentru codul din viața reală. Ține minte: „Dacă” sunt întotdeauna mai bune în astfel de situații.
Spre deosebire de celelalte sfaturi din această postare, este mai mult o curiozitate decât ceva de folosit cu adevărat.
Oricum, O voi păstra în acest articol din motive istorice.

Iată un truc simplu pentru a utiliza intervale în instrucțiunile de comutare:

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. Așteptați mai multe funcții asincronizate cu asincronizare / așteaptă

Este posibil await mai multe funcții asincronizate pentru a finaliza folosind Promise.all:

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

6. Crearea obiectelor pure

Puteți crea un obiect 100% pur, care nu va moșteni nicio proprietate sau metodă Object (de exemplu, constructor, toString() și așa mai departe).

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

7. Formatarea codului JSON

JSON.stringify poate face mai mult decât simplificarea unui obiect. De asemenea, puteți înfrumuseța rezultatul JSON cu acesta:

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. Eliminarea elementelor duplicate dintr-o matrice

Prin utilizarea seturilor ES2015 împreună cu operatorul Spread, puteți elimina cu ușurință elementele duplicate dintr-o matrice:

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

9. Aplatizarea matricilor multidimensionale

Aplatizarea matricelor este banală cu operatorul Spread:

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

Din păcate, trucul de mai sus va funcționa numai cu tablouri bidimensionale. Dar cu apeluri recursive, îl putem face potrivit pentru tablouri cu mai mult de 2 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]

Și iată-l! Sper că aceste mici trucuri îngrijite vă vor ajuta să scrieți JavaScript mai frumos și mai frumos.