Idag är ECMAScript 6 i färd med att slutföras. ECMAScript är grunden för JavaScript och därför innebär det att vi utforskar de föreslagna funktionerna idag också att vi får en snyggt topp på hur vi ska skriva JavaScript inom en snar framtid! I den här artikeln utforskar vi tio nya funktioner, med ett betydande fokus på verktyg, webbläsare och transporters.
JavaScript ursprungligen utvecklades av Brendan Eich of Netscape och officiellt släpptes som en del av Netscape Navigator 2.0 1995. Ett år senare skickades JavaScript till ECMA International, en organisation som underlättar standardiseringen av informations- och kommunikationsteknik och konsumentelektronik, så att den kan formaliseras industriellt. ECMAScript, sålunda blev namnet på skriptspråket standardiserat i ECMA-262.
ECMAScript-standarden utgör ryggraden i många andra härledda språk, inklusive ActionScript och JScript. Under årens lopp har ECMAScript gått igenom fyra versioner, med diskussionerna idag mycket roterande kring version sex, som också har kodats, ECMAScript Harmony.
Innan vi dyker in i dessa nya funktioner är det viktigt att notera att ECMAScript-standarden utgör grunden för JavaScript. Det finns numeriska skillnader mellan var och en av JavaScript-versionerna och motsvarande ECMAScript-utgåvor. Det vill säga att JavaScript är kompatibelt med ECMAScript-standarden, samtidigt som det ger fler funktioner. Tabellen nedan sammanfattar förhållandet mellan JavaScript och ECMAScript:
JavaScript-versionen | ECMAScript Edition | År |
JavaScript 1.1 | ECMAScript utgåva 1 | 1997 |
JavaScript 1.5 | ECMAScript utgåva 3 | 1999 |
JavaScript 2.0 | ECMAScript Harmony | Pågående arbete |
JavaScript har kommit långt sedan dess ödmjuka början för nästan tjugo år sedan. Idag skriver utvecklare tusentals linjer kod som skapar komplexa JavaScript-applikationer. Innan vi dyker in i detaljerade funktioner i ES6 kanske du vill titta på den stora bilden som definieras i specifikationerna, vad gäller krav, mål, medel och teman. Ett av målen för ES6 är att vara ett bättre språk för att skapa:
ES6-kompatibilitetstabellen är mycket användbar, eftersom den berättar för ES6-funktionerna som stöds i den aktuella webbläsaren. Det ger oss också en praktisk länk till specifikationerna för var och en av de angivna funktionerna. Observera att vissa av funktionerna inte kan innebära fullständig överensstämmelse med specifikationerna. När du arbetar med Chrome måste du aktivera flaggor med "Experimentell JavaScript".
Nu när den stora bilden är definierad, låt oss undersöka hur vi kan implementera dem. I följande avsnitt kommer vi att diskutera tio funktioner i ES6, med hjälp av olika verktyg så att vi kan förstå ES6 både i teori och praktik. Förkunskaper om JavaScript är en förutsättning, så gärna checka ut många resurser på JavaScript.
Nedan listas de funktioner som vi ska gå igenom med ett annat verktyg. Prova dem en efter en, eller hoppa till den specifika funktionen som du vill utforska:
låta
[använder Firefox-webbläsare]const
[använder Chrome-webbläsare]låta
låta
JavaScript-variabler är funktion-scoped. Det betyder att även om det finns variabler deklarerade i ett kapslat block, är de tillgängliga i hela funktionen. Låt oss granska ett kort exempel nedan; vi använder helt enkelt webbkonsolen i Firefox eller Chrome för att köra dem. Vad tror du kommer att vara värdet av jsFuture
?
var jsFuture = "es6"; (funktion () om (! jsFuture) var jsFuture = "es5"; console.log (jsFuture); ());
I ovanstående exempel, värdet av jsFuture
i console.log
uttalandet kommer att vara "es5". Avgörande för din förståelse är det faktum att variabla deklarationer hissas i toppen i Java, men variabla initialiseringar är däremot inte. Därför, oavsett var variablerna initialiseras och deklareras, inom ramen för funktionen, kommer de alltid att hissas. Klippet nedan är exakt detsamma - med kommentarer för att illustrera denna funktion av variabel lyftning.
var jsFuture = "es6"; (funktion () // var jsFuture = odefinierad; // variabelhissning om (! jsFuture) var jsFuture = "es5"; console.log (jsFuture); // "es5" ());
ES6 tar itu med den här frågan med låta
, vilket är som var
, förutom det faktum att det är block scoped istället för funktion scoped. Låt oss överväga ett annat exempel med var
Nedan. Ringer upp funktionen es [6] ()
kommer att ge oss värdet av i = 10
. Observera att även om var i = 0;
förklaras i för
loop, omfattningen av var jag
som standard till global. Därför när funktionen es [6] ()
exekveras, värdet av jag
är 10
.
var es = []; för (var i = 0; i < 10; i++) es[i] = function () console.log("Upcoming edition of ECMAScript is ES" + i); ; es[6](); // Upcoming edition of ECMAScript is ES10
Låt oss nu använda låta
. För att koda detta ut använder vi Firefox och öppnar webbkonsolen via menyn (Verktyg> Webbutvecklare> Webbkonsol). Skapa en block-scoped variabel inom för
slinga, låt c = i;
gjorde det blockera scoped.
var es = []; för (var i = 0; i < 10; i++) let c = i; es[i] = function () console.log("Upcoming edition of ECMAScript is ES" + c); ; es[6](); // Upcoming edition of ECMAScript is ES6
Firefox stöder redan många kommande ES6-funktioner. Se överensstämmelsetabellen för Firefox för att hålla dig uppdaterad om vilka funktioner som stöds och vilka som också överensstämmer med den aktuella specifikationen.
const
const
Konstanta definitioner är nu möjliga med const
. låta
och const
uppför sig på samma sätt i den meningen att båda är blockerade, men med const
, värdena är skrivskyddade och kan inte omdeklareras senare. Låt oss granska ett enkelt kodexempel i Chrome:
klass
I objektorienterade programmeringsspråk, a klass
är en representation av ett objekt. Det bildar ritningen, medan ett objekt är en förekomst av en klass. När det gäller JavaScript är det ett klasslöst programmeringsspråk och allt är ett objekt. Traditionellt har vi använt funktioner och prototyper för att genomföra klasser. Låt oss undersöka ett vanligt sätt att genomföra klassen i ES5.
var Språk = funktion (config) this.name = config.name; this.founder = config.founder; this.year = config.year; ; Language.prototype.summary = function () return this.name + "skapades av" + this.founder + "i" + this.year; ;
Låt oss sedan se hur ES6 implementerar klasser med minimal klassdeklarationssyntax som kan vara extremt viktigt för att skilja klasser och funktioner. Att koda ut klass
Med hjälp av ES6-syntaxen använder vi Googles Traceur, som är en transpiler som sammanställer ES6-kod till ES5. Först låt oss skapa html
filstruktur där vi ska infoga ES6-syntaxen för klasser. För att kompilera Traceur-koden behöver vi båda traceur.js
att kompilera Traceur till JavaScript, såväl som bootstrap.js
att binda dem alla. Slutligen letar Traceur efter script type = "text / traceur"
taggar för att kompilera den relevanta koden inuti taggarna i vanilj JavaScript.
ES6-klasser
Därefter inom script type = "text / traceur"
taggar, låt oss använda ES6-syntaxen för att genomföra samma klass som vi tidigare gjorde för Språk
.
klass Språk konstruktör (namn, grundare, år) this.name = name; this.founder = grundare; this.year = year; sammanfattning () return this.name + "skapades av" + this.founder + "i" + this.year;
Vi kan nu skapa en instans av klass språk
genom att öppna HTML-filen i Chrome-webbläsaren som var js = nytt språk
. I konsolen kommer vi också att få information om andra egenskaper hos språket!
Med en sådan tydlig syntaxdeklaration kan vi också gå vidare för att utöka klassen för att genomföra en underklass meta
som kommer att ärva alla egenskaper från moderklassen Språk
. Inom konstruktörfunktionen kommer vi att kräva funktionen super
som kommer att kalla konstruktören för förälderklassen så att den kan erva alla sina egenskaper. Slutligen kan vi också lägga till extra egenskaper, till exempel version
, som illustreras i koden nedan. Låt oss se över ES6-syntaxen och köra den i Chrome-webbläsaren:
klass MetaLanguage utökar språk konstruktör (x, y, z, version) super (x, y, z); this.version = version;
Traceur är en användbar transpiler som tillåter oss att koda med ES6-syntaxen, samtidigt som vi gör det tungt för oss att kompilera det tillbaka till den aktuella JavaScript-versionen. Testa även andra ES6-funktioner i Traceur!
standardfunktionsparametrar
Med standardfunktionsparametrar kan vi alltid ha funktionsparametrar som ett alternativ genom att ställa in några standardinställningar. Syntaxen för den här funktionen i ES6 är extremt intuitiv. Standardparametrarna definieras när funktionerna definieras. Låt oss ta en titt på ES6-syntaxen nedan i en ny TypeScript-fil med en förlängning av * ts
.
funktionshistorik (lang = "C", år = 1972) return lang + "skapades runt året" + år;
Därefter installerar vi TypeScript som en npm-modul och kör filen .* ts
och kompilera det för vanilj JavaScript. Här är installationen och sedan kompileringskommandon i kommandoraden:
$ npm installera -g typskrivning $ npm visa typskriptversion 0.8.3 $ tsc 4-default-params.ts
Kommandot ovan kommer att skapa en vanilj JavaScript-fil, kallad 4-default-params.js
, som då kan ringas från en HTML-fil. Här är den enkla HTML-filen som kommer att ringa den externa JavaScript-filen som skapades av typenScript-kompilatorn:
ES6 Standardparametrar
Slutligen öppnar vi HTML-filen i Chrome / Firefox och ringer funktionen historia()
två gånger, med och utan funktionsparametrarna. Observera att det inte går att gå in i några parametrar för parametrar kommer att gå tillbaka till standardparametrarna:
Kolla in andra typScript-funktioner, inklusive klass
eller gå igenom en typScript-handledning för mer djupgående användning.
ES6 erbjuder nya datastrukturer som tidigare inte är tillgängliga i JavaScript. Innan vi hoppar in på att utforska två sådana datastrukturer (Sets och Maps), låt oss se hur vi kan köra ES6-syntax med NodeJS. Installera NodeJS; Härifrån kommer vi att arbeta i kommandoraden. För det första kommer vi att kontrollera NodeJS-versionen installerad, och sedan kontrollera vilka alternativ som aktiverar ES6-funktioner med kommandot nod - v8-alternativ | grep harmoni
.
$ node - version v0.10.4 $ node --v8-options | grepp harmoni --harmony_typeof (aktivera harmonisemantik för typof) --harmony_scoping (aktivera harmoni-blockering) --harmony_modules (aktivera harmoniemoduler (innebär blockavkänning)) --harmony_proxies (aktivera harmoni-proxyer) --harmony_collections (aktivera harmonisamlingar uppsättningar, kartor och svaga kartor)) --harmony (aktivera alla harmoniska funktioner (förutom typof))
Nästa, starta NodeJS-repliken och fråga vilka egenskaper som finns tillgängliga för Set och Maps. Vi startar NodeJS repl with nod - harmoni
för att aktivera alla ES6-funktioner.
$ node --harmony> Object.getOwnPropertyNames (Set.prototype) ['constructor', 'add', 'har', 'delete']> Object.getOwnPropertyNames (Map.prototype) ['konstruktör', 'få' set ',' har ',' delete ']> .exit $
Inställningar är enkla datastrukturer som liknar arrays, men varje värde är unikt. Låt oss skapa en ny fil, kallad 5-sets.js
, och sätt in någon kod för att skapa, lägga till, radera och fråga den nya uppsättningen som vi ska skapa. Observera också att vi kommer att lägga till "Hippo" -data två gånger, men i uppsättningen kommer den bara att registreras en gång!
var motorer = ny Set (); // skapa nya Set engines.add ("Gecko"); // lägg till Set engines.add ("Trident"); engines.add ( "Webkit"); engines.add ( "Hippo"); engines.add ( "Hippo"); // notera att Hippo läggs till två gånger console.log ("Browsermotorer inkluderar Gecko?" + engines.has ("Gecko")); // true console.log ("Browsermotorer inkluderar Hippo?" + engines.has ("Hippo")); // true console.log ("Browsermotorer inkluderar Indigo?" + engines.has ("Indigo")); // falska engines.delete ("Hippo"); // radera objekt console.log ("Hippo är raderad. Browsermotorer inkluderar Hippo?" + engines.has ("Hippo")); // false
Kör filen i nod repliken med kommandot nod - Harmony 5-set.js
. Observera att även om "Hippo" tillsattes två gånger till uppsättningen, när den togs bort, omfattade inte uppsättningen det längre. Detta illustrerar återigen att en uppsättning är en datastruktur som bara kan innehålla unika värden.
Kartor motsvarar ganska JavaScript-nyckelparametrar. Med hjälp av en unik nyckel kan vi hämta värdet. I ES6 kan nyckeln vara någon JavaScript-datatyp och inte bara strängar. Det är den intressanta delen! Låt oss skapa en ny fil, kallad 5-map.js
, för att prova skapa, hämta och ta bort funktioner:
var es6 = ny karta (); // skapa ny karta es6.set ("edition", 6); // nyckel är sträng es6.set (262, "standard"); // nyckeln är numret es6.set (odefinierat, "nah"); // nyckel är odefinierad var hej = funktion () console.log ("hej");; es6.set (hej, "Hej ES6!"); // nyckel är funktionskonsol.log ("Värde av" utgåva "utgångar?" + es6.has ("utgåva")); // true console.log ("Value of 'year' exits?" + es6.has ("år")); // false console.log ("Värde av 262 utgångar?" + es6.has (262)); // true console.log ("Value of undefined exits?" + es6.has (odefinierad)); // true console.log ("Värdet av hej () utgångar?" + es6.has (hej)); // true es6.delete (odefinierad); // radera map console.log ("Value of undefined exits?" + es6.has (odefinierad)); // false console.log (es6.get (hej)); // Hej ES6! console.log ("Arbetet pågår för ES" + es6.get ("edition")); // Arbetet pågår för ES6
Som visas med ES6-samlingsfunktionerna, stödjer NodeJS-harmoni-alternativet redan andra ES6-funktioner, såsom block-scoping, proxies och moduler. Försök dem också i NodeJS!
I programmeringsspråk betecknar termen "destruktion" mönstermatchning. I ES6 kan vi göra några ganska snygga mönstermatchning i arrays och objekt som tidigare skulle ha tagit oss mer än ett steg. Låt oss utforska några av dem genom att koda den i Firefox webbkonsol.
Med array destructing kan vi initiera variabler på en gång, eller till och med byta dem istället för att ha det vanliga sättet att skapa en var temp;
temporär variabel.
var [start, slutet] = ["jord", "måne"] // initiera console.log (start + "calling" + end); // earth calling moon [start, end] = [avsluta, starta] // variabel byta console.log (start + "calling" + end); // moon calling earth
Destrukturering blir också en användbar stenografi när du returnerar flera värden från en funktion, eftersom vi inte behöver vikla runt ett objekt längre. För att hoppa över vissa variabler, lämna bara matriselementet tomt:
funktion equinox () returnera [20, "mars", 2013, 11, 02]; var [datum, månad,,,] = equinox (); console.log ("Årets equinox var på" + datum + månad); // Årets equinox var 20March
På grund av destruktion kan variabler också initieras från ett objekt som returneras från en funktion även med djupt inbästa objekt. Också, precis som matrismönstren, kan vi hoppa över de som inte behövs. Här är kodens kod som illustrerar just detta:
funktion equinox2 () retur datum: 20, månad: "mars", år: 2013, tid: timme: 11, // nested minut: 2; var datum: d, månad: m, tid: timme: h = equinox2 (); // h har värdet på den kapslade egenskapen medan "år" och "minut" hoppas över helt console.log ("Årets equinox var på" + d + m + "vid" + h); // Årets equinox var klockan 20 mars kl 11
I ES6 tillåter viloparametrar oss att enkelt använda några fasta parametrar i en funktion, tillsammans med resten av det efterföljande och variabla antalet parametrar. Vi använder redan argument
, vilket är ett array-liknande objekt som definierar argumenten som överförs till en funktion, men vi kan tydligt inte använda array-funktionen för att manipulera dessa argument. Med en tydlig syntax i ES6 flyttar den också utvecklarens avsikt till syntaxnivå med tre prickar ...
för att ange ett variabelt antal argument.
Låt oss försöka använda viloparametrar i ES6-syntaxen med gruntjs och dess plugin för spårtransportören, som vi använde i föregående avsnitt.
Installera grunt kommandoradsverktyg:
$ npm avinstallera -g grunt $ npm installera -g grunt-cli
Skapa en fil som heter package.json
, som kommer att definiera de olika modulerna som behövs för att köra Grunt. Observera att denna lista med beroenden inkluderar spårningsinställningen:
"namn": "rest-params", "version": "0.1.0", "devDependencies": "grunt": "0.4.1", "grunt-traceur": "0.0.1"
Skapa Gruntfile.js
som bara innehåller en uppgift traceur
som kommer att konvertera ES6 syntax till dagens JavaScript. Med detta kommer vi att kunna prova ES6 viloparametrar.
module.xports '] // dest: [källfiler])); grunt.loadNpmTasks ( 'grunt-traceur'); grunt.registerTask ('default', ['traceur']); ;
Skapa en enkel index.html
att ringa den spårningskompilerade JavaScript-filen, js / vila-spread.js
:
ES6 viloparametrar
Viktigast av allt kommer vi att skapa filen vila-spread.js
, som kommer att innehålla resten parameter syntax:
funktionstryck (array, ... objekt) // definierar viloparametrar med 3 punkts syntaxobjekt.forEach (funktion (item) array.push (item); console.log (item);); // 1 fast + 4 variabla parametrar var planets = []; console.log ("Innerplaneterna i vårt solsystem är:"); push (planeter, "Mercury", "Venus", "Earth", "Mars"); // resten parametrar
Slutligen kommer vi att springa grymta
i kommandoraden, som som standard kör spårningsuppgiften och skapar filen, js / 5-vila-spread.js
. Därefter ser du bara filen index.html
i webbläsarkonsolen:
$ npm installera $ grunt ╰─ $ grunt Running "traceur: anpassad" (traceur) uppgift js / ['rest-spread.js'] Kompilering ... js / Kompilering lyckad - js / Skrivning ... js / js / rest-spread.js framgångsrik. Skriva framgångsrikt - [objekt objekt]
En spridningsoperatör är motsatsen till viloparametrarna. När vi ringer en funktion kan vi passera i det fasta argumentet som behövs tillsammans med en uppsättning av en variabelstorlek med den bekanta tre punktsyntaxen, för att ange det variabla antalet argument.
Vi använder samma projekt som övriga parametrar ovan och lägger till i spridningsoperatörskoden till filen vila-spread.js
. I exemplet nedan kräver funktionen sex separata argument. När man ringer funktionen överförs data som en grupp med spridningsoperatören. Låt oss se hur syntaxen ser ut, när vi ringer funktionen med fasta argument samt ett varierande antal argument:
Lägg till spridningsoperatörskoden till vila-spread.js
:
// Sprid operatör "... webblink" funktion createURL (kommentar, sökväg, protokoll, underdomän, domän, tld) var shoutout = comment + ":" + protokoll + ": //" + underdomän + ". + domän + "." + tld + "/" + sökväg; console.log (shoutout); var weblink = ["hypertext / WWW / TheProject.html", "http", "info", "cern", "ch"], comment = "Världens första hemsida"; createURL (kommentar, ... webblänk); // spridningsoperatör
Kör spårkompileringen genom Grunt-uppgiften i kommandoraden och visa filen, index.html
, i webbläsaren:
$ grunt Running "traceur: anpassad" (traceur) uppgift js / ['rest-spread.js'] Kompilering ... js / Kompilering lyckad - js / Writing ... js / js / rest-spread.js lyckad. Skriva framgångsrikt - [objekt objekt] Klar, utan fel.
Om du redan använder GruntJS som ett byggverktyg i ditt nuvarande projekt, blir det enkelt att integrera det med ES6-plugins. Så prova andra GruntJS ES6-relaterade plugins för att kompilera ES6-syntaxen till aktuell JavaScript.
JavaScript-erbjudanden för-in
för iteration, men det har vissa begränsningar. Till exempel, i en array-iteration, resulterar resultaten med a för-in
loop kommer att ge oss indexerna och inte värdena. Låt oss ta en titt på koden nedan för att illustrera detta:
var planeter = ["Mercury", "Venus", "Earth", "Mars"]; för (p i planeter) console.log (p); // 0,1,2,3 var es6 = utgåva: 6, utskott: "TC39", standard: "ECMA-262"; för (e i es6) console.log (e); // utgåva, utskott, standard
Låt oss försöka samma koncept, men den här gången med för av
med en matris, en uppsättning och en karta:
var planeter = ["Mercury", "Venus", "Earth", "Mars"]; för (p av planeter) console.log (p); // Mercury, Venus, Earth, Mars var motorer = Set (["Gecko", "Trident", "Webkit", "Webkit"]); för (var e av motorer) console.log (e); // Ange bara har unika värden, och därmed visar Webkit bara en gång var es6 = ny karta (); es6.set ("edition", 6); es6.set ("kommitté", "TC39"); es6.set ("standard", "ECMA-262"); för (var [namn, värde] av es6) console.log (namn + ":" + värde);
Array förståelser ger oss en stenografi syntax för att manipulera varje av innehållet i ett visst mönster. Det ligner mycket på Karta()
eller filtrera()
metoder som finns i Array-objektet. Låt oss undersöka hur vi använder Karta()
var temperatur = [0, 37, 100]; funktion degToKelvin (deg) return deg + 273; temperature.map (degToKelvin); // [273, 310, 373]
Låt oss springa igenom samma funktion i Firefox för att se shorthandsyntaxen i ES6 för att skapa arrays med så många som tre loopar för att skapa möjliga lösningar för spelet, Cluedo:
// Array skapad med 1 slinga var temperatur = [0, 37, 100]; [t + 273 för (t av temperatur)]; // [273, 310, 373] // Array skapad med 3 loopar var misstänkta = ["Miss Scarlet", "Colonel Mustard"], vapen = ["Candlestick", "Dagger"], rum = ["Kök" "Balsal"]; [(console.log (s + "med" + w + "i" + r ") för (s av misstänkta) för (w av vapen) för (r av rum)];
På programmeringsspråk utför moduler separata diskreta funktioner och är oberoende av varandra. Detta bidrar till att inte bara bygga återanvändbara komponenter över projekt, utan också håller felen isolerade till de delar som är relaterade till det aktuella projektet. Vi har skapat moduler i JavaScript, typiskt med AMD eller CommonJS. Låt oss skapa en enkel modul med ES6-syntaxen och ES6-modulens transpiler.
Låt oss först skapa HTML-filen, index.html
, som kommer att kalla de grundläggande JavaScriptsna. Vi använder RequireJS som en AMD-laddare; Därför hänvisar vi till en CDN-kopia av den senaste RequireJS-filen. Därefter lägger vi också till attributet, datahuvud
, på manus
tagg för att berätta KravJS för att ladda js / init.js
fil.
ES6-moduler
Nu ska vi skapa filen, js / init.js
, som bara kommer att anropa js / main.js
fil:
kräver (['main'], funktion () );
Skapa modulen, cirkel
, i filen, in / circle.js
, i ES6-syntaxen. Denna modul exporterar två funktioner:
exportfunktionsområde (radie) returnera Math.PI * radie * radie; exportfunktionsomkrets (radie) return 2 * Math.PI * radie;
Skapa filen, in / main.js
, som kommer att importera modulen cirkel
så att vi kan använda funktionerna för den specifika modulen. Lägg märke till importera
syntax:
importera område, omkrets från "cirkel"; console.log ("Area of the circle:" + area (4) + "meter squared"); console.log ("Omkretsen av cirkeln:" + omkrets (14) + "mätare");
Vid denna tidpunkt visas mappstrukturen nedan. Vi använder ES6-modulens transpiler för att skapa ES5-kompatibel kod med två nyskapade filer: js / circle.js
och js / main.js
.
$ träd. | - in | | - circle.js | '- main.js | - index.html' - js '- init.js
Installera ES6-modulen Transpiler:
$ npm installera https://github.com/square/es6-module-transpiler.git $ compile-moduler - hjälp
Slutligen ska vi transpilera dessa två filer. Navigera till mappen, i
, från kommandoraden:
$ compile-modules circle.js - typ amd - to ... / js $ compile-modules main.js - typ amd - till ... / js $ cd ... $ tree. | - in | | - circle.js | '- main.js | - index.html' - js | - circle.js | - init.js '- main.js
Titta på den transpirerade koden i filerna js / circle.js
och js / main.js
. Vi öppnar nu filen, index.html
, i webbläsaren för att se moduler i aktion! Vi måste använda en webbserver för att köra den här filen. Jag använder Python SimpleHTTPServer. Navigera till kommandoraden i filens rot, index.html
:
$ python -m SimpleHTTPServer 8000
Många av våra webbutvecklingsmedlemmar har öppet delat om ES6 och vad som händer. Jag rekommenderar starkt att gå igenom deras bloggkategorier relaterade till ES6:
Och för ytterligare läsning:
Där har du det: tio funktioner i ES6 med verktyg som låter oss koda med den nya syntaxen idag. Jag hoppas att det här har gjort dig mer upphetsad över vad som ska komma! Observera att eftersom standardiseringsarbetet pågår kan syntaxen, funktionerna och överensstämmelserna ändras. Ändå är det definitivt värt ansträngningen att gräva i förr än senare.