ECMAScript 6 - 10 Страхотни нови функции
Знаете ли, че JavaScript (заедно с JScript и ActionScript) е реализация на спецификационен език на клиентски език с общо предназначение, наречен ECMAScript? За да направим тази неприятна дефиниция малко по-привлекателна, можем да кажем, че ECMAScript (или официално ECMA-262) е стандартът, който определя как използваме JavaScript и какво можем да постигнем с него.
Последното, шесто издание на езика ECMAScript 2015 (или ES6) е може би най-значителната актуализация от първата версия през 1997 г. Основната цел на последната версия е да осигури по-добра поддръжка за създаване на по-големи приложения и библиотеки. Това означава по-зрял синтаксис, нови бързи клавиши за по-лесно кодиране, както и нови методи, ключови думи, типове данни и много други подобрения..
Документацията на ES6 е обширна, ако искате да четете много, можете да изтеглите цялата спецификация от уебсайта на ECMA International. В този пост ще разгледаме 10 подбрани функции, въпреки че ES6 предлага много повече. Ако искате да експериментирате с него, ES6 Fiddle е чудесно място да го направите, а можете да намерите и примерни кодови фрагменти там..
Поддръжка за ECMAScript 6
Браузърските доставчици постепенно добавят поддръжка за функциите на ECMAScript 6. Тук можете да намерите страхотна таблица за съвместимост за поддръжката на браузъра и компилатора за новите функции.
Ако се интересувате от поддръжката на ES6 в Node.js, разгледайте документацията тук.
Въпреки че понастоящем не се поддържат всички функции, можем да използваме транспилатори като Babel, за да превърнем ES6 кода в ES5. Има страхотен плъгин на Grunt за Babel, много страхотни ES6 плъгини за Grunt и невероятен плъгин Gulp-Babel, така че за щастие имаме много възможности за избор.
По този начин можем да започнем да използваме подобрения синтаксис и възможности, докато не се налага да се притесняваме за проблеми с компилирането. Сега да видим характеристиките.
1. Ново позволявам Ключова дума
ES6 въвежда новото позволявам ключова дума, която ни позволява да декларираме локални променливи в обхвата на даден блок, като оператор, израз или (n вътрешна) функция. Например можем да декларираме a за цикъл по следния начин, след това използвайте отново същото име на променлива (тъй като обхватът му е ограничен до за ) в следващия ако изявление:
за (нека i = 0; i < myArray.length; i++) // Do something inside the block if (x > 0 && x! = Y) // Повторно използваме "i" нека i = x * y
Използвайки позволявам Ключовата дума води до по-чист и по-използваем код. Разликата между позволявам и Var е в обхвата, например локална променлива, дефинирана от Var ключова дума може да се използва в цялата обхващаща функция, докато променливите, дефинирани от позволявам работи само в техния (под) блок. Позволявам може да се използва и в световен мащаб, в този случай той се държи по същия начин като Var. Разбира се, в ES6 все още можем да използваме Var ако искаме.
2. Ново конст Ключова дума
Новото конст ключова дума позволява да се декларират константи, известни също като неизменни променливи, на които не можем да превъзложим ново съдържание по-късно.
const MY_CONST = 12; console.log (MY_CONST); // 12 MY_CONST = 16; // Тиха грешка, тъй като не можем да преназначим нова стойност на константа
Непроменливите променливи не винаги са напълно неизменни в ECMAScript 6, макар че, ако една константа държи обект, можем по-късно да променим стойността на нейните свойства и методи. Същото важи и за елементите на масив.
const MY_CONSTANT = myProperty: 6; console.log (MY_CONSTANT.myProperty); // 6 MY_CONSTANT.myProperty = 18; console.log (MY_CONSTANT.myProperty); // 18 const OTHER_CONSTANT = [12, 14, 16]; console.log (OTHER_CONSTANT [0]); // 12 OTHER_CONSTANT [0] = 22; console.log (OTHER_CONSTANT [0]); 22
Все още не можем директно да превъзложим нова стойност на обекта MY_CONSTANT в горния кодов фрагмент, което означава, че не можем да променяме имената на свойствата и методите, а също така не можем да добавяме ново или да изтриваме съществуващо, така че не можем да направим следното:
MY_CONSTANT = newProperty: 18; console.log (MY_CONSTANT.newProperty); // грешка
3. Функции със стрелки
ECMAScript 6 улеснява начина, по който пишем анонимни функции, тъй като можем напълно да пропуснем функция ключова дума. Трябва само да използваме новия синтаксис за стрелки, на име на стрелката => (мазна стрелка), която ни дава голям шорткът.
// 1. Един параметър в ES6 нека sum = (a, b) => a + b; // в ES5 var sum = функция (a, b) return a + b; ; // 2. Без параметри в ES6 нека randomNum = () => Math.random (); // в ES5 var randomNum = function () return Math.random (); ; / / 3. Без връщане в ES6 нека message = (name) => alert ("Hi" + name + "!"); // в ES5 var съобщение = функция (yourName) alert ("Hi" + yourName + "!"); ; Има важна разлика между редовни и стрелкови функции, т.е. стрелките не получават a това стойността автоматично като функции, дефинирани с функция ключова дума. Функции със стрелки лексично се свързват на това стойност към текущия обхват. Това означава, че можем лесно да използваме отново това ключова дума във вътрешна функция. В ES5 е възможно само със следния хак:
// ES5 Рязка рана да използваме "тази" ключова дума във вътрешна функция ... addAll: function addAll (pieces) var self = this; _.each (парчета, функция (парче) self.add (piece);); ,… // ES6 същата вътрешна функция сега може да използва собствената си "this" … addAll: function addAll (части) _.each (парчета, парче => this.add (парче)); ,…
Горният код е от Mozilla Hacks
4. Ново разпространение Оператор
Новото разпространение Операторът е маркиран с 3 точки (…) и можем да го използваме, за да подпишем мястото на няколко очаквани елемента. Един от най-често използваните случаи на разпространителя е вмъкването на елементите на масив в друг масив:
нека myArray = [1, 2, 3]; нека newArray = [… myArray, 4, 5, 6]; console.log (newArray); 1, 2, 3, 4, 5, 6
Можем също да вземем лостовете на разпространение оператор в извикване на функции, в който искаме да преминем аргументи от масив:
нека myArray = [1, 2, 3]; функция sum (a, b, c) return a + b + c; console.log (сума (… myArray)); 6
Най- разпространение Операторът е доста гъвкав, тъй като може да се използва няколко пъти в един и същ масив или функционално повикване.
5. Стойности по подразбиране за параметри и нови параметри за почивка
Добра новина е, че в ECMAScript 6 можем да добавим стойности по подразбиране към параметрите на дадена функция. Това означава, че ако не преминем аргументи по-късно в извикването на функцията, ще се използват параметрите по подразбиране. В ES5 стойностите по подразбиране на параметрите винаги са зададени на неопределен, така че новата възможност да ги поставим на каквото искаме определено е голямо подобрение на езика.
функция sum (a = 2, b = 4) return a + b; console.log (sum ()); // 6 console.log (сума (3, 6)); 9
ES6 въвежда и нов вид параметър параметри за почивка. Те изглеждат и работят подобно на разпространението на операторите. Те са удобни, ако не знаем колко аргумента ще бъдат предадени по-късно в извикването на функцията. Можем да използваме свойствата и методите на обекта Array върху останалите параметри:
функция putInAlphabet (… args) нека sorted = args.sort (); връщане сортирано; console.log (putInAlphabet ("e", "c", "m", "a", "s", "c", "r", "i", "p", "t")); a, c, c, e, i, m, p, r, s, t 6. Ново за… на изявление
С помощта на новото за… на цикълът може лесно да се повтори над масиви или други изпълними обекти. Заедно с новото за… на statement, ECMAScript 6 въвежда и два нови повторяеми обекта, Map за ключ / стойност карти, и Set за колекции от уникални стойности, които също могат да бъдат примитивни стойности и обектни препратки. Когато използваме за… на изявление, кодът вътре в блока се изпълнява за всеки елемент от повторяемия обект.
нека myArray = [1, 2, 3, 4, 5]; нека sum = 0; за (let i на myArray) sum + = i; console.log (сума); // 15 (= 1 + 2 + 3 + 4 + 5)
7. Шаблонни литерали
ECMAScript 6 ни дава нова алтернатива за конкатенация на низове. Шаблонни литерали позволете ни лесно да създаваме шаблони, в които можем да вграждаме различни стойности във всяко желано място. За да направим това, трябва да използваме $ … синтаксис навсякъде, където искаме да вмъкнем данните, които можем да прехвърлим от променливи, масиви или обекти по следния начин:
let = title: 'Ms', firstname: 'Jane', фамилно име: 'Doe', възраст: '34'; let template = 'Уважаеми $ customer.title $ customer.firstname $ customer.surname! Честит рожден ден на customer.age! '; console.log (шаблон); // Уважаеми г-жа Jane Doe! Честит 34-ти рожден ден!
8. Класове
ES6 въвежда JavaScript класове, които са изградени върху съществуващото наследство, базирано на прототип. Новият синтаксис го прави по-лесен за създаване на обекти, вземане на ливъридж на наследяване и код за повторно използване. Тя ще улесни и начинаещите, които пристигат от други програмни езици, за да разберат как работи JavaScript.
В ES6 класовете се декларират с новите клас ключова дума и трябва да имате a конструктор () метод, който се извиква, когато нов обект се създава с помощта на new myClass () синтаксис. Също така е възможно да се разширят нови класове с Класът на детето разширява родител синтаксис, който може да бъде познат от други обектно-ориентирани езици, като PHP. Също така е важно да се знае, че за разлика от декларациите за функции и променливи, декларациите за класове НЕ са издигнати в ECMAScript 6.
клас Polygon конструктор (height, width) // конструктор на клас this.name = 'Polygon'; this.height = височина; this.width = width; sayName () // class method console.log ('Здравейте, аз съм', this.name + '.'); нека myPolygon = нов полигон (5, 6); console.log (myPolygon.sayName ()); // Здравейте, аз съм полигон. Код по-горе от ES6 Примери за цигулка, .
9. Модули
Замисляли ли сте се колко е готино, ако JavaScript е модулен? Разбира се, имаше заобиколни решения като CommonJS (използван в Node.js) или AMD (Определение на асинхронния модул) (използван в RequireJS), за да направи това преди, но ES6 въвежда модули като родна функция.
Трябва да определим всеки модул в неговия собствен файл, след това да използваме износ ключова дума за експортиране на променливи и функции да се други файлове и внос ключова дума за импортиране от други файлове, съгласно следния синтаксис:
// functions.js функция куб (а) връщане a * a * a; функция cubeRoot (a) return Math.cbrt (a); export cube, cubeRoot // или: export cube като cb, cubeRoot като cr // app.js import cube, cubeRoot от 'functions'; console.log (куб (4)); // 64 console.log (cubeRoot (125)); 5
Това решение е брилянтно, тъй като кодът, съхраняван в модула, е невидим отвън и ние трябва да експортираме само частта, която искаме да получим от други файлове. Можем да направим много по-невероятни неща с ES6 модулите, тук можете да намерите голямо и подробно обяснение за тях.
10. Натоварвания с нови методи
ECMAScript 6 въвежда много нови методи за съществуващия String Prototype, Array Object, Array Prototype и Math Object. Новите методи могат значително да подобрят начина, по който можем да манипулираме тези обекти. Mozilla Dev има чудесни примери за кодовете на новите допълнения, заслужава си да отделиш време и да ги проучиш.
Само за да покажем колко са наистина страхотни, ето моят фаворит: намери метода на прототипа Array, който ни позволява да тестваме определени критерии върху елементите на масив, като изпълняваме функцията за обратно извикване на всеки елемент, след което връщаме първия елемент, който се завръща вярно.
функция isPrime (елемент, индекс, масив) var start = 2; докато (започнете <= Math.sqrt(element)) if (element % start++ < 1) return false; return element > 1; console.log ([4, 6, 8, 12]. намери (isPrime)); // undefined, не е намерен console.log ([4, 5, 8, 12] .find (isPrime)); 5
Код по-горе от: Mozilla Dev
