de rajaraodv

5 Piese JavaScript „rele” care sunt remediate în ES6

5 Piese JavaScript „rele care sunt remediate in ES6

Caracteristicile ECMAScript 6 (ES6) pot fi împărțite în caracteristici care sunt zahăr sintactic pur (cum ar fi: clasă), caracteristici care îmbunătățesc JavaScript (cum ar fi import) și caracteristici care remediază unele dintre părțile „rele” ale JavaScript-ului (cum ar fi lăsa cuvânt cheie). Majoritatea blogurilor și articolelor combină toate cele trei tipuri și pot copleși nou-veniții. Așa că scriu această postare care se concentrează doar pe caracteristicile cheie ES6 care remediază părțile „rele”.

Sper că până la sfârșitul acestui blog vă veți da seama că, folosind doar câteva caracteristici ES6, cum ar fi let și săgeata grasă, veți obține randamente masive.

OK, să începem.

1. Scopul blocului

ES5 avea doar „domeniu la nivel de funcție” (adică înfășurați codul în funcții pentru a crea domeniul) și a cauzat o mulțime de probleme. ES6 oferă „blocare” la nivel de scop (de exemplu, bucle-bretele la scop) atunci când folosim „lăsa”Sau„const” în loc de “var”.

Preveniți ridicarea variabilă în afara domeniului de aplicare

Imaginea de mai jos arată că variabila „bonus” nu este ridicată în afara blocului „dacă” funcționează ca majoritatea limbajelor de programare.

Notă: Puteți face clic pe imagini pentru a mări și a citi

5 Piese JavaScript „rele care sunt remediate in ES6

Preveniți declarația variabilă duplicat

ES6 nu permite duplicarea declarației variabilelor atunci când le declarăm folosind „Lasă” sau „const” în același domeniu. Acest lucru este foarte util pentru a evita expresiile de funcții duplicate provenite din diferite biblioteci (cum ar fi expresia funcției „adăugați” de mai jos).

1612136409 271 5 Piese JavaScript „rele care sunt remediate in ES6

Elimină nevoia de IIFE

În ES5, în cazuri ca mai jos, a trebuit să folosim Expresia funcției invocate imediat (IIFE) pentru a ne asigura că nu poluăm și nu suprascriem domeniul de aplicare global. În ES6, putem folosi doar acolade ({}) și să le folosim const sau lăsa pentru a obține același efect.

1612136410 650 5 Piese JavaScript „rele care sunt remediate in ES6

babel – Un instrument pentru a converti ES6 în ES5

Trebuie să rulăm ES6 într-un browser obișnuit. Babel este cel mai popular instrument folosit pentru a converti ES6 în ES5. Are diverse interfețe, cum ar fi un CLI, un modul de nod și, de asemenea, un convertor online. Folosesc modulul nod pentru aplicațiile mele și folosesc versiunea online pentru a vedea repede diferențele.

Imaginea de mai jos arată cum Babel redenumește variabilele pentru a simula „let” și „const”!

1612136410 622 5 Piese JavaScript „rele care sunt remediate in ES6
BabelJS.io redenumirea variabilelor pentru a simula let și const

Este banal să folosiți funcții în bucle

În ES5, dacă ați avea o funcție în interiorul unei bucle (cum ar fi pentru (var i = 0; i <3; i ++) {...}) și dacă acea funcție a încercat să acceseze variabila de buclare „i”, am fi în probleme din cauza ridicării. În ES6, dacă noie „lasă ”, poți folosi funcții fără nicio problemă.

1612136411 306 5 Piese JavaScript „rele care sunt remediate in ES6

Notă: Nu puteți utiliza const pentru ca este constant dacă nu utilizați noua buclă for..of.

2. „Acest” lexical (prin funcțiile săgeată)

În ES5, „acest lucru” poate varia în funcție de „unde” se numește și chiar „cum” se numește și a cauzat tot felul de dureri dezvoltatorilor JS. ES6 elimină această problemă majoră prin „lexical”.

„Aceasta” lexicală este o caracteristică care forțează variabila „aceasta” să indice întotdeauna spre obiectul unde se află fizic situat în interior.

Problema și două soluții în ES5:

În imaginea de mai jos, încercăm să imprimăm prenumele și salariul unui utilizator. Dar primim salariul de pe server (simulat). Observați că atunci când răspunsul revine, „aceasta” este „fereastră” în loc de obiectul „persoană”.

1612136411 373 5 Piese JavaScript „rele care sunt remediate in ES6
ES5 – problema și două soluții

Soluția în ES6

Pur și simplu utilizați funcția săgeată grasă => și veți obține automat „le” lexicalte iubesc.

1612136412 430 5 Piese JavaScript „rele care sunt remediate in ES6
Linia 16 arată cum să utilizați funcția => în ES6

Imaginea de mai jos arată cum Babel convertește funcția săgeată grăsime în funcție ES5 obișnuită cu soluție alternativă, astfel încât să funcționeze în browserele actuale.

1612136412 223 5 Piese JavaScript „rele care sunt remediate in ES6
babel convertește săgeata grasă în funcția ES5 obișnuită cu soluția nr. 2

3. Tratarea „argumentelor”

În ES5, „argumentele” acționează ca o matrice (adică putem face o buclă peste ea), dar nu este o matrice. Deci, toate funcțiile Array precum sortare, felie și așa mai departe nu sunt disponibile.

În ES6, putem folosi o nouă caracteristică numită parametrii „Rest”. Este reprezentat cu 3 puncte și un nume de genul … argumente. Parametrii de odihnă este un Array și astfel putem folosi toate funcțiile Array.

1612136413 68 5 Piese JavaScript „rele care sunt remediate in ES6
Imaginea arată parametrii ES6 „Rest”

4. Cursuri

Conceptual, nu există o „clasă” (adică plan) în JS, așa cum este în alte limbaje OO, cum ar fi Java. Dar oamenii de mult timp au tratat „funcția” (alias „constructori de funcții”) care creează obiecte atunci când folosim cuvântul cheie „nou” ca clase.

Și din moment ce JS nu acceptă „Clase” și doar o simulează prin „prototipuri”, sintaxa a fost foarte confuză atât pentru dezvoltatorii JS existenți, cât și pentru noii veniți care doresc să o folosească într-un mod tradițional OO. Acest lucru este valabil mai ales pentru lucruri precum: crearea de subclase, apelarea funcțiilor în clasa părinte și așa mai departe.

ES6 aduce o nouă sintaxă comună în diferite limbaje de programare și simplifică totul. Imaginea de mai jos prezintă o comparație side-by-side a claselor ES5 și ES6.

Notă: Puteți face clic pe imagine pentru a mări și a citi

1612136413 53 5 Piese JavaScript „rele care sunt remediate in ES6
ES5 Vs ES6 (es6-features.org)

ACTUALIZARE: Asigurați-vă că citiți: Este „Clasa” în ES6 Noua parte „Rău”? (dupa asta)

5. Modul strict

Mod strict(„Utilizați strict”) ajută la identificarea problemelor obișnuite (sau părți „rele”) și, de asemenea, vă ajută „Securizarea” JavaScript. În ES5, Modul Strict este opțional, dar în ES6, este necesar pentru mulți Caracteristici ES6. Așadar, majoritatea oamenilor și instrumentelor precum babel adaugă automat „use strict” în partea de sus a fișierului, punând întregul cod JS în modul strict și ne obligă să scriem JavaScript mai bine.

Asta este! ?

Dacă acest lucru a fost util, faceți clic pe clap? butonul de mai jos de câteva ori pentru a vă arăta sprijinul! ⬇⬇⬇ ??

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

ECMAScript 2015+

  1. Consultați aceste sfaturi și trucuri utile ECMAScript 2015 (ES6)
  2. 5 Părți JavaScript „rele” care sunt remediate în ES6
  3. Este „Clasa” în ES6 Noua parte „Rău”?

Îmbunătățiri terminale

  1. Cum să-ți asculti terminalul – Un ghid pas cu pas cu imagini
  2. Jazz Up Terminalul dvs. „ZSH” în șapte pași – Un ghid vizual

WWW

  1. O istorie fascinantă și dezordonată a webului și a JavaScript-ului

DOM virtual

  1. Funcționarea interioară a DOM-ului virtual

React Performance

  1. Două modalități rapide de a reduce dimensiunea aplicației React în producție
  2. Folosind Preact în loc de React

Programare funcțională

  1. JavaScript este complet Turing – Explicat
  2. Programare funcțională în JS – cu exemple practice (partea 1)
  3. Programare funcțională în JS – cu exemple practice (partea 2)
  4. De ce Reduxul are nevoie ca Reductorii să fie „Funcții pure”

WebPack

  1. Webpack – Piesele confuze
  2. Înlocuire modul Webpack și modul fierbinte [HMR] (sub capotă)
  3. Webpack HMR și React-Hot-Loader – Manualul lipsă

Draft.js

  1. De ce Draft.js și de ce ar trebui să contribuiți
  2. Cum reprezintă Draft.js datele cu text îmbogățit

React and Redux:

  1. Ghid pas cu pas pentru construirea aplicațiilor React Redux
  2. Un ghid pentru construirea unei aplicații React Redux CRUD (Aplicație de 3 pagini)
  3. Utilizarea Middlewares în aplicațiile React Redux
  4. Adăugarea unei validări de formulare robuste pentru a reacționa aplicațiile Redux
  5. Securizarea aplicațiilor React Redux cu jetoane JWT
  6. Gestionarea e-mailurilor tranzacționale în aplicațiile React Redux
  7. Anatomia unei aplicații React Redux
  8. De ce Reduxul are nevoie ca Reductorii să fie „Funcții pure”
  9. Două modalități rapide de a reduce dimensiunea aplicației React în producție

Dacă acest lucru a fost util, faceți clic pe clap? butonul de mai jos de câteva ori pentru a vă arăta sprijinul! ⬇⬇⬇ ??