Dai un'occhiata a questi trucchi e suggerimenti utili su ECMAScript 2015 (ES6)

Foto di Glenn Carstens-Peters su Unsplash

EcmaScript 2015 (aka ES6) è in circolazione da un paio d'anni e varie nuove funzionalità possono essere utilizzate in modo intelligente. Volevo elencare e discutere alcuni di essi, poiché penso che li troverai utili.

Se conosci altri suggerimenti, faccelo sapere nel commento e saremo lieti di aggiungerli.

1. Applicazione dei parametri richiesti

ES6 fornisce valori di parametro predefiniti che consentono di impostare alcuni valori predefiniti da utilizzare se la funzione viene chiamata senza quel parametro.

Nel seguente esempio, stiamo impostando la funzione obbligatoria () come valore predefinito per entrambi i parametri aeb. Ciò significa che se a o b non viene passato, viene chiamata la funzione richiesta () e verrà visualizzato un errore.

const richiesto = () => {lancia nuovo errore ('Parametro mancante')};
// La funzione seguente genererà un errore se manca "a" o "b".
const add = (a = richiesto (), b = richiesto ()) => a + b;
aggiungi (1, 2) // 3
add (1) // Errore: parametro mancante.

2. Il potente "ridurre"

Il metodo di riduzione dell'array è estremamente versatile. In genere viene utilizzato per convertire una matrice di elementi in un singolo valore. Ma puoi fare molto di più.

Ip Suggerimento: la maggior parte di questi trucchi si basa sul valore iniziale che è una matrice o un oggetto anziché un valore semplice come una stringa o una variabile.

2.1 Uso di ridurre per eseguire contemporaneamente la mappatura e il filtro * *

Supponiamo di avere una situazione in cui si dispone di un elenco di elementi e si desidera aggiornare ciascun elemento (ovvero, mappa) e quindi filtrare solo alcuni elementi (ovvero, filtro). Ma questo significa che dovresti scorrere l'elenco due volte!

Nell'esempio seguente, vogliamo raddoppiare il valore degli elementi nell'array e quindi selezionare solo quelli che sono maggiori di 50. Notate come possiamo usare il potente metodo di riduzione per raddoppiare (mappare) e quindi filtrare? È abbastanza efficiente.

numeri const = [10, 20, 30, 40];
const doubledOver50 = numbers.reduce ((finalList, num) => {
  
  num = num * 2; // raddoppia ogni numero (ad es. mappa)
  
  // numero filtro> 50
  if (num> 50) {
    finalList.push (num);
  }
  restituire finalList;
}, []);
doubledOver50; // [60, 80]

2.2 Utilizzo di "riduci" anziché "mappa" o "filtro"

Se osservi attentamente l'esempio sopra (dalla 2.1), saprai che la riduzione può essere utilizzata per filtrare o mappare gli oggetti!

2.3 Uso di ridurre per bilanciare le parentesi

Ecco un altro esempio di quanto sia versatile la funzione di riduzione. Data una stringa tra parentesi, vogliamo sapere se sono bilanciati, ovvero che esiste un numero uguale di "(" e ")" e se "(" è prima di ")".

Possiamo facilmente farlo riducendo come mostrato di seguito. Teniamo semplicemente un contatore di variabili con valore iniziale 0. Contiamo se si preme (e se si preme si conta). Se sono bilanciati, dovremmo finire con 0.

// Restituisce 0 se bilanciato.
const isParensBalanced = (str) => {
  return str.split (''). reduce ((counter, char) => {
    if (counter <0) {// corrisponde a ")" before "("
      contatore dei resi;
    } else if (char === '(') {
      return ++ counter;
    } else if (char === ')') {
      return --counter;
    } else {// corrisponde a qualche altro carattere
      contatore dei resi;
    }
    
  }, 0); // <- valore iniziale del contatore
}
isParensBalanced ('(())') // 0 <- bilanciato
isParensBalanced ('(asdfds)') // 0 <- bilanciato
isParensBalanced ('(()') // 1 <- non bilanciato
isParensBalanced (') (') // -1 <- non bilanciato

2.4 Conteggio di oggetti array duplicati (Conversione array → Oggetto)

Ci sono momenti in cui vuoi contare elementi di array duplicati o convertire un array in un oggetto. È possibile utilizzare ridurre per quello.

Nell'esempio seguente, vogliamo contare quante macchine di ogni tipo esistono e mettere questa figura in un oggetto.

var cars = ['BMW', 'Benz', 'Benz', 'Tesla', 'BMW', 'Toyota'];
var carsObj = cars.reduce (funzione (obj, nome) {
   obj [nome] = obj [nome]? ++ obj [nome]: 1;
  return obj;
}, {});
carsObj; // => {BMW: 2, Benz: 2, Tesla: 1, Toyota: 1}

Ci sono molte altre cose che puoi fare usando la riduzione e ti incoraggio a leggere gli esempi elencati su MDN qui.

3. Distruzione dell'oggetto

3.1 Rimozione di proprietà indesiderate

Ci sono momenti in cui vuoi rimuovere proprietà indesiderate, forse perché contengono informazioni sensibili o sono troppo grandi. Invece di iterare l'intero oggetto per rimuoverli, possiamo semplicemente estrarre tali oggetti di scena in variabili e mantenere quelli utili nel parametro * rest *.

Nell'esempio seguente, vogliamo rimuovere le proprietà _internal e tooBig. Possiamo assegnarli a variabili_internal e tooBig e archiviare i restanti in un parametro * rest * cleanObject che possiamo usare in seguito.

let {_internal, tooBig, ... cleanObject} = {el1: '1', _internal: "secret", tooBig: {}, el2: '2', el3: '3'};
console.log (CleanObject); // {el1: '1', el2: '2', el3: '3'}

3.2 Distruggere gli oggetti nidificati nei parametri di funzione

Nell'esempio seguente, la proprietà engine è un oggetto nidificato dell'oggetto auto. Se siamo interessati, diciamo, alla proprietà vin del motore, possiamo facilmente distruggerla come mostrato di seguito.

var car = {
  modello: 'bmw 2018',
  motore: {
    v6: true,
    turbo: vero,
    vin: 12345
  }
}
const modelAndVIN = ({modello, motore: {vin}}) => {
  console.log (`model: $ {model} vin: $ {vin}`);
}
modelAndVIN (auto); // => modello: bmw 2018 vin: 12345

3.3 Unisci oggetti

ES6 viene fornito con un operatore di diffusione (indicato da tre punti). In genere viene utilizzato per decostruire i valori dell'array, ma è possibile utilizzarlo anche su Oggetti.

Nel seguente esempio, utilizziamo l'operatore spread per diffondere all'interno di un nuovo oggetto. Le chiavi di proprietà nel 2o oggetto sostituiranno le chiavi di proprietà nel 1o oggetto.

Nell'esempio seguente, le chiavi di proprietà bec da object2 sostituiscono quelle dall'oggetto1

let object1 = {a: 1, b: 2, c: 3}
let object2 = {b: 30, c: 40, d: 50}
let merged = {… object1,… object2} // spread e re-add in merged
console.log (unito) // {a: 1, b: 30, c: 40, d: 50}

4. Imposta

4.1 De-duping di array mediante set

In ES6 puoi facilmente de-duplicare oggetti usando Set, poiché Set consente di memorizzare solo valori univoci.

let arr = [1, 1, 2, 2, 3, 3];
let deduped = [... new Set (arr)] // [1, 2, 3]

4.2 Uso dei metodi array

La conversione di set in una matrice è semplice come l'utilizzo di un operatore di diffusione (...). Puoi usare facilmente anche tutti i metodi dell'array sui set!

Supponiamo di avere un set come mostrato di seguito e vogliamo filtrarlo per contenere solo elementi maggiori di 3.

let mySet = new Set ([1,2, 3, 4, 5]);
var filtered = [... mySet] .filter ((x) => x> 3) // [4, 5]

5. Ristrutturazione dell'array

Molte volte la funzione può restituire più valori in un array. Possiamo facilmente afferrarli usando la destrutturazione dell'array.

5.1 Valori di swap

lascia param1 = 1;
lascia param2 = 2;
// scambia e assegna param1 e param2 ogni altro valore
[param1, param2] = [param2, param1];
console.log (param1) // 2
console.log (param2) // 1

5.2 Ricezione e assegnazione di più valori da una funzione

Nell'esempio seguente, stiamo recuperando un post su / post e relativi commenti su / commenti. Poiché stiamo usando async / await, la funzione restituisce il risultato in un array. Usando la distruzione dell'array, possiamo semplicemente assegnare il risultato direttamente nelle variabili corrispondenti.

funzione asincrona getFullPost () {
  return waitit Promise.all ([
    fetch ( '/ post'),
    fetch ( '/ commenti')
  ]);
}
const [post, commenti] = getFullPost ();

Se questo è stato utile, fai clic sul pulsante clap in basso alcune volte per mostrare il tuo supporto! ⬇⬇⬇

I miei altri post

https://medium.com/@rajaraodv/latest

ECMAScript 2015+

  1. Esempi di tutto * NUOVO * in ECMAScript 2016, 2017 e 2018
  2. Dai un'occhiata a questi trucchi e suggerimenti utili su ECMAScript 2015 (ES6)
  3. 5 JavaScript "Bad" Parti che sono state risolte in ES6
  4. La "classe" in ES6 è la nuova parte "cattiva"?

Miglioramenti terminali

  1. Come ravvivare il tuo terminale - Una guida passo passo con le immagini
  2. Dai vita al tuo terminale "ZSH" in sette passaggi: una guida visiva

WWW

  1. Una storia affascinante e disordinata del Web e JavaScript

DOM virtuale

  1. Funzionamento interno del DOM virtuale

Reagisci Prestazioni

  1. Due modi rapidi per ridurre le dimensioni dell'app React nella produzione
  2. Utilizzo di Preact anziché React

Programmazione Funzionale

  1. JavaScript è completo - Spiegato
  2. Programmazione funzionale in JS - Con esempi pratici (Parte 1)
  3. Programmazione funzionale in JS - Con esempi pratici (Parte 2)
  4. Perché Redux ha bisogno di riduttori per essere “funzioni pure”

WebPack

  1. Webpack - Le parti confuse
  2. Webpack e sostituzione del modulo attivo [HMR] (sotto il cofano)
  3. HMR e React-Hot-Loader di Webpack: il manuale mancante

Draft.js

  1. Perché Draft.js e perché dovresti contribuire
  2. Come Draft.js rappresenta i dati Rich Text

Reagire e redux:

  1. Guida dettagliata alla creazione di app React Redux
  2. Una guida per creare un'app React Redux CRUD (app di 3 pagine)
  3. Utilizzo dei middleware nelle app React Redux
  4. Aggiunta di un solido modulo di convalida per reagire alle app Redux
  5. Proteggere le app Reaux Redux con i token JWT
  6. Gestione delle e-mail transazionali nelle app React Redux
  7. The Anatomy Of A React Redux App
  8. Perché Redux ha bisogno di riduttori per essere “funzioni pure”
  9. Due modi rapidi per ridurre le dimensioni dell'app React nella produzione