JavaScript bevoegdheden de meeste van de interactieve web, en dus moest evolueren naast. Nieuwe functies in JavaScript worden toegevoegd elke jaar nu; we nemen een kijkje naar wat er nieuw is en hoe u gebruik ES6 JavaScript op uw website.
JavaScript Heeft Vele Smaken
Oracle heeft een merk op de termijn van JavaScript, zodat de eigenlijke norm die het moderne JavaScript implementeert heet de EMCAScript standaard, of de ES. De primaire JavaScript-standaard is EMCAScript 5, of ES5, uitgebracht in 2009. Dit is vanille JavaScript zonder speciale functies, ondersteund overal, zelfs in IE 9.
ES6 is een vrij nieuwe specificatie, uitgebracht in 2015, en ondersteunt een groot aantal nieuwe functies. Het officieel heet ES2015, en elke jaarlijkse release nadat deze is aangeduid met het jaar van de release. Maar iedereen noemt het ES6 toch, dus we steken met dat.
ES6 is belangrijk, in het bijzonder als het markeert de start van JavaScript ‘ s restandardization. Tegenwoordig EMCA brengt een nieuwe standaard op jaarbasis. Maar ES6 werd uitgebracht 6 jaar na de ES5, dat was 10 jaar na ES3, dus het is een belangrijke mijlpaal.
Hoe te Gebruiken ES6 Syntaxis
ES6 wordt ondersteund in veel plaatsen, met het belangrijkste probleem in Internet Explorer (zoals gewoonlijk). Dus, terwijl u in staat om gewoon te beginnen met schrijven met de ES6 stijl, kunt u niet zeker zijn van iedereen browser zal gedragen zich op dezelfde manier.
Tegenwoordig is het nog steeds meestal samengesteld naar beneden naar “gewone” ES5-syntaxis met behulp van een hulpprogramma zoals Babel. Babel is een compiler die zal zetten uw code in ontwikkeling (geschreven in ES6 met al zijn lekkers) om de code die u op uw productie-site, vaak gebundeld en minified met Webpack ook.
Hier is hoe het werkt: u hebt uw ontwikkeling in de omgeving waarin u schrijft .js-bestanden. U bent vrij om te gebruiken wat fancy ES6 syntaxis je wilt. In plaats van ze direct, stel je de Webpack te laden JS-bestanden met Babel. Vaak zult u wilt uitvoeren webpack-dev-server, dus dit gebeurt automatisch als u wijzigingen aanbrengt.
Nu in plaats van het laden index.js u laden bundle.js die bevat alle van uw code. Dit heeft ook het grote voordeel van het toestaan van u om te gebruiken NPM-modules in uw JS, maar het kan uw code omvangrijk als u te veel (hoewel webpack is vrij groot bij minification).
Wat is er Nieuw
Er is veel om uit te pakken, dus dit artikel zal zeker niet alles dekken. Voor een volledige lijst kunt u bekijken compatibiliteit van deze tabel, die ook ES2016 en nieuwe functies.
In het algemeen, als Babel kan compileren iets aan een oudere specificatie van de JS, het is waarschijnlijk veilig om te gebruiken in ontwikkeling. Als het niet, en je hoeft niet de zorg over de 3% van de bevolking met behulp van IE 11, het is waarschijnlijk ondersteund in de meeste browsers als het niet een super nieuwe functie.
Pijl Functies
In plaats van het typen:
arr.kaart(function (d) {
terug d + 1;
});
U kunt in plaats daarvan vervangen door het trefwoord function met een pijl na de haakjes:
arr.kaart (d) => {
terug d + 1;
});
Bovendien, je hoeft niet de haakjes als u slechts één argument. En je hoeft niet de haakjes en return statement als je alleen het retourneren van een waarde:
arr.kaart(d => d + 1);
Dit is de nieuwe uitdrukking sluitingen syntaxis, en zorgt voor een mooi verdicht functies, vooral bij het werken met lijsten, callbacks, of de afhandeling van fouten. Het is vergelijkbaar met hoe één lijn als verklaringen werk.
Vereenvoudigde Object en Array-Creatie Met Destructuring
In plaats van schrijven:
var type = “123”, kleur = “blauw”
var obj = { type: type, kleur: kleur }
U kunt simpelweg weglaten van de namen van de toetsen, en ze zal automatisch worden ingesteld op de variabele-namen:
var obj = { type, kleur }
Dit werkt ook andersom, genaamd destructuring opdracht:
var { type, kleur } = obj
Een mooie bijwerking van destructuring is de … syntaxis, die fungeert als “etc.” en wordt de rest van de matrix of het object aan een variabele:
var { type, …rest } = obj
//rust == { color: “blue” }
En, het werkt ook de andere manier rond, die heeft het effect van het uitbreiden en het afvlakken van arrays:
var arr1 = [“a”, “b”], arr2 = [“c”, “d”]
var flatscreen = […a …b, “e”]
//flatscreen = [“a”, “b”, “c”, “d”, “e”]
Er is veel meer te destructuring dan wordt hier besproken.
Lessen
JavaScript heeft klassen nu. Hier is hoe het werkt, van Mozilla ‘ s documenten:
class Rechthoek {
constructor(hoogte, breedte) {
deze.hoogte = hoogte;
deze.breedte = breedte;
}
// Getter
krijg area() {
retourneren.calcArea();
}
// Methode
calcArea() {
retourneren.hoogte * deze.breedte;
}
}
const square = new Rechthoek(10, 10);
console.log(plein.gebied); // 100
Zoals u kunt zien, het is vergelijkbaar met andere object georiënteerde talen, maar niet helemaal. Als Mozilla staten dit nieuwe systeem is “in de eerste plaats syntactische suiker over JavaScript bestaande prototype-gebaseerde overerving” en eigenlijk niet maken JS object georiënteerd. Maar, het is nog steeds leuk om te hebben.
Bovendien, de klasse-syntaxis ondersteunt statische methoden en eigenschappen, en de onderliggende klassen, maar een kind in de klas kan niet erven van meerdere ouders.
Wijzigingen Aan De Functie Argumenten
ES6 introduceert twee nieuwe manieren om te schrijven-functie parameters. Eerste, standaard parameters kunnen worden opgegeven door het toekennen van een waarde in de functie definitie:
var func = (a, b = “default”) => { }
Als u de oproep func zonder het opgeven van twee argumenten, het zou veronderstellen dat de standaard waarde.
Ook functies kunnen nu worden gegeven van een onbepaald aantal argumenten als een matrix, genaamd de rest van de parameters van de functie-syntaxis:
var func = (a, b, c, …rest) => { }
De rest zal de parameter worden ingesteld op een matrix van de rest van de parameters van de functie of niet-gedefinieerd als niet meer dan de genoemde parameters zijn aanwezig.
laat en const
De opdracht is een vervanging voor de var die specifiek subsidies blok toepassingsgebied. Hier is hoe de variabelen werk in JS normaal:
var x = 0; //globale variabele
functie someFunc() {
var y = 3; //lokale variabele
}
De globale variabele kan worden gebruikt in de functie, maar de lokale functie variabele kan niet worden gebruikt buiten de functie. Dit is wat hiermee kunt u de naam van de variabelen “ik”, “tmp”, “x”, en “count” de hele tijd weg.
Blok toepassingsgebied is anders, en stelt u om te definiëren van variabelen met geneste blokken:
var x = 0
{
laat x = 2
//x == 2
}
// x == 0
De laat-syntaxis in wezen kun je wijzigen van de inhoud van x binnen dat blok (een functie, catch-blok, of een expliciete blok als dus), en het opnieuw instellen bij het verlaten van het blok. Dit is vooral nuttig voor mensen die tijdelijke “count” variabelen, zoals elk blok heeft een ander bereik. Het toepassingsgebied is overgenomen kind te blokken, maar kan verder worden genest en weer veranderd.
De const syntaxis is vrij eenvoudig. Vervang var met const, en de variabele is nu alleen-lezen. Als u probeert te schrijven, het zal gooien:
Onbekende TypeError: Toewijzing aan een constante variabele.
Om u te laten weten dat je probeert om iets te doen wat je niet moet doen. Dit heeft geen ander doel dan een mooie herinnering bij het coderen om te voorkomen dat er een aantal bugs.