A JavaScript ES6 új szintaxist és fantasztikus funkciókat hoz létre, hogy a kódod modernebb és olvashatóbb legyen. Ez lehetővé teszi, hogy kevesebb kódot írjon és többet tegyen. Az ES6 számos nagyszerű funkcióval ismertet meg bennünket, például a nyílfunkciókkal, a sablonhúrokkal, az osztályrombolással, a modulokkal ... és még sok mással. Lássuk.
const és hagyd
constegy új kulcsszó az ES6-ban a változók deklarálásához. consterősebb, mint var. Használata után a változó nem rendelhető újra. Más szavakkal, ez egy változhatatlan változó, kivéve, ha objektumokkal együtt használják.
Ez valóban hasznos a kiválasztók megcélzásához. Például, ha egyetlen gombunk van, amely eseményt indít, vagy ha HTML-elemet szeretne kiválasztani a JavaScript-ben, használja a consthelyett var. Ez azért van, mert var„fel van emelve”. Mindig előnyösebb használni, constha nem akarja újra hozzárendelni a változót.
A fenti kódban constnem változik, és nem rendelhető át. Ha megpróbál új értéket adni neki, hibaüzenetet küld.
letátrendezhető és új értéket vehet fel. Mutatható változót hoz létre .
letmegegyezik azzal const, hogy mindkettő blokkolt hatókörű. Ez azt jelenti, hogy a változó csak a hatókörén belül érhető el.
Nyíl funkciók
A nyíl funkció valóban fantasztikus, és olvashatóbbá, strukturáltabbá és modernebbé teszi a kódot. Ahelyett, hogy ezt használná:
Használd ezt:
Amint látja, a nyíl funkció olvashatóbbnak és tisztábbnak tűnik! Nem kell többé használni a régi szintaxist.
Is, akkor a nyíl funkció map, filterésreducebeépített funkciók.
A nyilakkal ellátott térképfunkció egyértelműbb és olvashatóbb, mint mapaz ES5-ben. Az ES6 segítségével rövidebb és okosabb kódokat írhat. Használhatja ugyanazt a filterés gombbal reduce.
Template Literals
A sablon literálok vagy sablon húrok nagyon klasszak. Nem kell a plusz (+) operátort használni a karakterláncok összefűzéséhez, vagy amikor egy változót akarunk használni a karakterlánc belsejében.
A régi szintaxis:
Új ES6 szintaxissal:
Olyan egyszerű! Igazán óriási különbség a régi szintaxis és az ES6 között. Ha húrokkal játszik, az ES6 szó szerinti húrja szervezettebb és strukturáltabb, mint az ES5.
Alapértelmezett paraméterek
Amikor PHP-ben dolgozom, általában alapértelmezett paramétereket használok. Ezek lehetővé teszik egy paraméter előre definiálását.
Tehát, ha elfelejted megírni a paramétert, az nem ad vissza definiálatlan hibát, mert a paraméter már meg van adva az alapértelmezettben. Tehát amikor egy hiányzott paraméterrel futtatja a függvényét, akkor az az alapértelmezett paraméter értékét veszi fel t, és nem ad hibát!
Nézd meg ezt a példát:
A fenti függvény meghatározatlanul tér vissza, mert elfelejtettük megadni a második paramétert age.
De ha az alapértelmezett paramétert használtuk, akkor nem tér vissza meghatározatlanul, és akkor fogja használni az értékét, amikor elfelejtjük a paraméter hozzárendelését!
Amint látja, a függvény visszaad egy értéket, annak ellenére, hogy a második paramétert elmulasztottuk. Most az alapértelmezett paraméterrel előre kezelhetjük a hibát.
Tömb és tárgy pusztító
A megsemmisítés megkönnyíti egy tömb vagy objektum értékeinek az új változóhoz való hozzárendelését.
A régi szintaxis:
ES6 szintaxissal:
Az ES5 segítségével minden értéket hozzá kell rendelnünk minden változóhoz. Az ES6-mal csak göndör zárójelbe tesszük az értékeinket, hogy megkapjuk az objektum bármely tulajdonságát.
Jegyzet:ha hozzárendel egy változót, amely nem azonos a tulajdonság nevével, akkor az definiálatlanul tér vissza. Például, ha a tulajdonság neve nameés hozzárendeljük ausernameváltozó,meghatározatlanul visszatér.
Mindig meg kell neveznünk a változót, mint a tulajdonság nevét. De abban az esetben, ha át akarjuk nevezni a változót, használhatjuk :helyette a kettőspontot .
For the array, we use the same syntax as the object. We have just to replace the curly brackets with square brackets.
Import and export
Using import and export in your JavaScript application makes it more powerful. They allow you to create separate and reusable components.
If you are familiar with any JavaScript MVC framework, you will see that they use import and export to handle the components most of the time. So how do they really work?
It is simple! export allows you to export a module to be used in another JavaScript component. We use import to import that module to use it in our component.
For example, we have two files. The first is named detailComponent.jsand the second is namedhomeComponent.js.
In detailComponent.jswe are going to export the detail function.
And if we want to use this function in homeComponent.js,we will just use import.
If we want to import more than one module, we just put them within curly brackets.
So cool, isn’t it?!
Promises
Promises are a new feature of ES6. It’s a method to write asynchronous code. It can be used when, for example, we want to fetch data from an API, or when we have a function that takes time to be executed. Promises make it easier to solve the problem, so let’s create our first Promise!
If you log your console, it will return a Promise. So, if we want to execute a function after data is fetched, we will use a Promise. The Promise takes two parameters: resolve and reject to handle an expected error.
Note: the fetch function returns a Promise itself!
const url="//jsonplaceholder.typicode.com/posts";const getData=(url)=>{return fetch(url);}getData(url).then(data=> data.json()).then(result=> console.log(result));Now if you log your console it will return an array of data.
Rest parameter and Spread operator
The rest parameters are used to get the argument of an array, and return a new array.
The spread operator has the same syntax as the rest parameter, but the spread operator takes the Array itself and not just the arguments. We can use the Spread parameter to get the values of an Array, instead of using a for loop or any other method.
const arr=['said',20,'JavaScript enthusiast','Hi','Said','How are you?']; const Func=(...anArray)=>{ return anArray; } console.log(Func(arr)); //output ["said", 20, "JavaScript enthusiast", "Hi", "Said", "How are you?"Classes
Classes are the core of object oriented programming (OOP). They make your code more secure and encapsulated. Using classes gives your code a nice structure and keeps it oriented.
To create a class, use the class keyword followed by the name of the class with two curly brackets.
Now we can access the class methods and properties using the new keyword.
class myClass{ constructor(name,age){ this.name=name; this.age=age; } } const Home= new myClass("said",20); console.log(Home.name)// saidHa másik osztályból szeretne örökölni, használja a extendskulcsszót, majd annak az osztálynak a nevét, amelyből örökölni szeretne.
Tudjon meg többet az Osztályokrólitt.
Az ES6 további elképesztő funkciókkal rendelkezik - itt felfedezheti őket.
Következtetés
Remélem, hogy srácok hasznosnak találták ezt a cikket, és remélem, hogy bemutathattam nektek az ES6 néhány funkcióját. Ha igen, iratkozzon fel erre a levelezőlistára, ha többet szeretne megtudni a kezelőfelület témáiról. Köszönöm a rám szánt időt.
Egyébként nemrégiben egy erős szoftvermérnöki csoporttal dolgoztam az egyik mobilalkalmazásomhoz. A szervezés nagyszerű volt, és a terméket nagyon gyorsan, sokkal gyorsabban szállították, mint más cégek és szabadúszók, akikkel dolgoztam, és azt hiszem, őszintén tudom ajánlani őket más ottani projektekhez. Lőj nekem egy e-mailt, ha kapcsolatba szeretnél lépni - [email protected].