Tutustu näihin hyödyllisiin ECMAScript 2015 (ES6) -vinkkeihin

Kuva Glenn Carstens-Peters Unsplash-kuvassa

EcmaScript 2015 (alias ES6) on ollut olemassa jo pari vuotta, ja useita uusia ominaisuuksia voidaan käyttää taitavaan tapaan. Halusin luetella ja keskustella joistakin niistä, koska mielestäni löydät niistä hyödyllisiä.

Jos tiedät muita vinkkejä, ota meihin yhteyttä kommentissa ja lisään ne mielelläni.

1. Vaadittujen parametrien noudattaminen

ES6 tarjoaa oletusparametriarvot, joiden avulla voit asettaa jonkin oletusarvon käytettäväksi, jos toiminto kutsutaan ilman tätä parametria.

Seuraavassa esimerkissä asetamme vaaditun () -toiminnon oletusarvoksi sekä a- että b-parametreille. Tämä tarkoittaa, että jos jompaakumpaa a tai b ei käytetä, vaadittua () funktiota kutsutaan ja saat virheen.

const vaadittu = () => {heitä uusi virhe ('puuttuva parametri')};
// Alla oleva toiminto poistaa virheen, jos joko "a" tai "b" puuttuu.
const add = (a = vaaditaan (), b = vaaditaan ()) => a + b;
lisää (1, 2) // 3
add (1) // Virhe: puuttuu parametri.

2. mahtava ”vähentää”

Matriisin reduktiomenetelmä on erittäin monipuolinen. Sitä käytetään tyypillisesti muuntamaan joukko kohteita yhdeksi arvoksi. Mutta voit tehdä sen paljon enemmän.

Vinkki: Suurin osa näistä temppuista perustuu siihen, että alkuarvo on taulukko tai objekti, sen sijaan että käytetän yksinkertaista arvoa, kuten merkkijono tai muuttuja.

2.1 Pienennä -toiminnon avulla sekä kartta että suodatin * tehdään samanaikaisesti *

Oletetaan, että sinulla on tilanne, jossa sinulla on luettelo esineistä, ja haluat päivittää jokaisen kohteen (eli kartan) ja suodattaa sitten vain muutamat kohteet (eli suodattaa). Mutta tämä tarkoittaa, että joudut suorittamaan luettelon läpi kahdesti!

Alla olevassa esimerkissä haluamme kaksinkertaistaa taulukon kohteiden arvon ja valita sitten vain ne, jotka ovat yli 50. Huomaa, kuinka voimme käyttää tehokasta vähennysmenetelmää sekä kaksinkertaistaa (kartta) että suodattaa sitten? Se on aika tehokasta.

konstoluvut = [10, 20, 30, 40];
const doubledOver50 = numerot.vähennys ((finalList, num) => {
  
  num = num * 2; // kaksinkertaista numero (ts. kartta)
  
  // suodattimen numero> 50
  if (num> 50) {
    finalList.push (num);
  }
  return finalList;
}, []);
doubledOver50; // [60, 80]

2.2 Käytä “pienennä” sijaan “kartta” tai “suodatin”

Jos tarkastelet yllä olevaa esimerkkiä (kohdasta 2.1) huolellisesti, tiedät, että vähennystä voidaan käyttää kohteiden suodattamiseen tai kartoittamiseen!

2.3 Pienennä sulkujen tasapainottaminen

Tässä on toinen esimerkki kuinka monipuolinen vähennystoiminto on. Koska suluilla on merkkijono, haluamme tietää, ovatko ne tasapainossa, toisin sanoen, että siellä on yhtä suuri määrä “(” ja “)” ja jos “(“ on ennen ”).

Voimme tehdä sen helposti vähentämällä kuten alla on esitetty. Pidämme yksinkertaisesti muuttuvaa laskuria, jonka lähtöarvo on 0. Me lasketaan, jos osumme (ja laskemme, jos osumme). Jos ne ovat tasapainossa, meidän pitäisi päätyä nollaan.

// Palauttaa 0, jos tasapainoinen.
const isParensBalanced = (str) => {
  paluu str.split (''). pienennä ((laskuri, char) => {
    if (laskuri <0) {// vastaa ")" ennen "("
      paluulaskuri;
    } else if (char === '(') {
      paluu ++ laskuri;
    } muuta jos (char === ')') {
      paluu --laskuri;
    } else {// vastasi jotakin muuta charia
      paluulaskuri;
    }
    
  }, 0); // <- laskurin lähtöarvo
}
isParensBalanced ('(())') // 0 <- tasapainoinen
isParensBalanced ('(asdfds)') // 0 <- tasapainoinen
isParensBalanced ('(()') // 1 <- ei ole tasapainossa
isParensBalanced (') (') // -1 <- ei ole tasapainossa

2.4 Kopioitujen taulukkoelementtien laskeminen (taulukon muuntaminen → objekti)

Joskus haluat laskea kaksoiskappaleryhmän kohteita tai muuntaa taulukon objektiin. Voit käyttää vähennystä siihen.

Seuraavassa esimerkissä haluamme laskea, kuinka monta autoa kunkin tyyppisiä on, ja laittaa tämä luku esineeseen.

var autot = ['BMW', 'Benz', 'Benz', 'Tesla', 'BMW', 'Toyota'];
var carsObj = autot.reduce (toiminto (obj, nimi) {
   obj [nimi] = obj [nimi]? ++ obj [nimi]: 1;
  palata obj;
}, {});
carsObj; // => {BMW: 2, Benz: 2, Tesla: 1, Toyota: 1}

On paljon enemmän asioita, joita voit tehdä vähentämällä, ja kehotan sinua lukemaan MDN: ssä luetellut esimerkit täältä.

3. Objektin tuhoaminen

3.1 Ei-toivottujen ominaisuuksien poistaminen

Joskus haluat poistaa ei-toivotut ominaisuudet - ehkä koska ne sisältävät arkaluontoisia tietoja tai ovat vain liian suuria. Sen sijaan, että iteroisimme koko objektia niiden poistamiseksi, voimme yksinkertaisesti purkaa tällaiset rekvisiittit muuttujiin ja pitää hyödylliset niistä * rest * -parametrissa.

Alla olevassa esimerkissä haluamme poistaa _internal ja tooBig ominaisuudet. Voimme määrittää ne_internal- ja tooBig-muuttujiin ja tallentaa loput * rest * -parametriin cleanObject, jota voimme käyttää myöhemmin.

anna {_sisäinen, tooBig, ... cleanObject} = {el1: '1', _internal: "salainen", tooBig: {}, el2: '2', el3: '3'};
console.log (cleanObject); // {el1: '1', el2: '2', el3: '3'}

3.2 Hävitä sisäkkäiset objektit funktioparamereissa

Alla olevassa esimerkissä moottorin ominaisuus on auto-objektin sisäkkäinen objekti. Jos olemme kiinnostuneita esimerkiksi moottorin vin-ominaisuudesta, voimme rakentaa sen helposti rakenteeltaan alla esitetyn mukaisesti.

var auto = {
  malli: 'bmw 2018',
  moottori: {
    v6: totta,
    turbo: totta,
    vin: 12345
  }
}
const modelAndVIN = ({malli, moottori: {vin}}) => {
  console.log (`malli: $ {malli} vin: $ {vin}`);
}
modelAndVIN (auto); // => malli: bmw 2018 vin: 12345

3.3 Yhdistä kohteet

ES6: n mukana tulee hajotusoperaattori (merkitty kolmella pisteellä). Sitä käytetään tyypillisesti taulukon arvojen purkamiseen, mutta voit käyttää sitä myös objekteissa.

Seuraavassa esimerkissä levitämme operaattoria hajottaaksesi uuden objektin. Toisen objektin ominaisuusnäppäimet korvaavat ensimmäisen objektin ominaisuusavaimet.

Alla olevassa esimerkissä objektin2 ominaisuusnäppäimet b ja c ohittavat objektin1 avaimet

olkoon objekti1 = {a: 1, b: 2, c: 3}
olkoon objekti2 = {b: 30, c: 40, d: 50}
anna yhdistyneen = {… object1,… object2} // leviää ja lisää uudelleen sulautuneeksi
console.log (sulautettu) // {a: 1, b: 30, c: 40, d: 50}

4. Sarjat

4.1 Ryhmien kopiointi kopioiden avulla

ES6: ssa voit poistaa esineet helposti käyttämällä sarjoja, koska sarjat sallivat vain yksittäisten arvojen tallentamisen.

olkoon arr = [1, 1, 2, 2, 3, 3];
let deduped = [... uusi sarja (arr)] // [1, 2, 3]

4.2 Array-menetelmien käyttö

Sarjojen muuntaminen taulukkoon on yhtä helppoa kuin hajotusoperaattorin käyttäminen (…). Voit käyttää kaikkia Array-menetelmiä helposti myös sarjoissa!

Oletetaan, että meillä on alla esitetyn mukainen sarja ja haluamme suodattaa sen sisältämään vain yli 3 esineitä.

anna mySet = uusi sarja ([1,2, 3, 4, 5]);
var suodatettu = [... mySet] .suodatin ((x) => x> 3) // [4, 5]

5. Matriisin tuhoaminen

Monta kertaa toiminto voi palauttaa useita arvoja taulukossa. Voimme helposti tarttua niihin Array-hajotuksella.

5.1 Vaihtoarvot

olkoon param1 = 1;
olkoon param2 = 2;
// vaihda ja määritä param1 & param2 toistensa arvot
[param1, param2] = [param2, para1];
console.log (param1) // 2
console.log (param2) // 1

5.2 Vastaanota ja määritä funktiosta useita arvoja

Alla olevassa esimerkissä haemme viestiä / post ja siihen liittyviä kommentteja osoitteessa / kommentit. Koska käytämme asynciä / odota, funktio palauttaa tuloksen taulukossa. Matriisin hajottamalla voimme yksinkertaisesti osoittaa tuloksen suoraan vastaaviin muuttujiin.

async-toiminto getFullPost () {
  palaa odottaa Promise.all ([
    nouto ( '/ post'),
    nouto ( '/ kommentit)
  ]);
}
const [viesti, kommentit] = getFullPost ();

Jos tämä oli hyödyllistä, napsauta napsautuspainiketta muutaman kerran alapuolella osoittaaksesi tukeasi! ⬇⬇⬇

Muut viestit

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

ECMAScript 2015+

  1. Esimerkkejä kaikesta * UUSI * ECMAScript 2016, 2017 ja 2018 -versiossa
  2. Tutustu näihin hyödyllisiin ECMAScript 2015 (ES6) -vinkkeihin
  3. 5 JavaScript “huonot” osat, jotka on korjattu ES6: ssa
  4. Onko ES6: n "luokka" uusi "huono" osa?

Terminaalien parannukset

  1. Kuinka jazzia terminaalia - askel askeleelta opas kuvilla
  2. Jazz ylös “ZSH” -terminaalisi seitsemään vaiheeseen - visuaalinen opas

WWW

  1. Kiehtova ja sotkuinen historia verkossa ja JavaScript

Virtuaalinen DOM

  1. Virtuaalisen DOM: n sisäinen toiminta

Reagoi suorituskyky

  1. Kaksi nopeaa tapaa pienentää React-sovelluksen kokoa tuotannossa
  2. Preaktion käyttäminen reagoinnin sijasta

Toiminnallinen ohjelmointi

  1. JavaScript on Turing Complete - selitetty
  2. Toiminnallinen ohjelmointi JS: ssä - käytännön esimerkkeillä (osa 1)
  3. Toiminnallinen ohjelmointi JS: ssä - käytännön esimerkkeillä (osa 2)
  4. Miksi Redux tarvitsee pelkistimet ollakseen "puhtaita toimintoja"

webpack

  1. Verkkopakkaus - hämmentävät osat
  2. Verkkopakkaus ja kuuma moduulin vaihto [HMR] (konepellin alla)
  3. Webpackin HMR ja React-Hot-Loader - puuttuva käyttöohje

Draft.js

  1. Miksi Draft.js ja miksi sinun pitäisi osallistua
  2. Kuinka Draft.js edustaa Rich Text -dataa

Reaktio ja Redux:

  1. Vaiheittainen opas React Redux -sovellusten rakentamiseen
  2. Opas React Redux CRUD -sovelluksen rakentamiseen (3-sivuinen sovellus)
  3. Middlewares -sovelluksen käyttö React Redux -sovelluksissa
  4. Vakaan lomakkeen tarkistuksen lisääminen reagoimaan Redux-sovelluksiin
  5. React Redux -sovellusten turvaaminen JWT-tokeneilla
  6. Transaktionaalisten sähköpostien käsitteleminen React Redux -sovelluksissa
  7. Reaktisen Redux-sovelluksen anatomia
  8. Miksi Redux tarvitsee pelkistimet ollakseen "puhtaita toimintoja"
  9. Kaksi nopeaa tapaa pienentää React-sovelluksen kokoa tuotannossa