Введение
Ecmascript 6 является следующим стандартом для JavaScript и находится в быстром разработке. Цель Ecmascript 6 - включить использование JavaScript для написания сложных приложений, библиотек функций и автоматических генераторов кода (генераторы кодов). Последние браузеры уже частично поддерживают синтаксис Ecmascript 6. Ecmascript 6 в настоящее время является в основном отраслевым стандартом, и его популярность намного быстрее, чем ES5. Основная причина заключается в том, что современные браузеры довольно быстро поддерживают ES6, особенно браузеры Chrome и Firefox, которые уже поддерживают большинство функций в ES6.
1. Пусть, const, и блокировать
Пусть позволяет создавать области на уровне блоков. ES6 рекомендует использовать let In Functions для определения переменных вместо VAR:
var a = 2; {let a = 3; console.log (a); // 3} console.log (a); // 2Другим способом объявления переменных, которые также действительны в области на уровне блока, является констант, который может объявить постоянную. В ES6 константа, объявленная Const, аналогична указателю, что указывает на ссылку, что означает, что этот «const» не является статичным, например:
{const arr = [5,6]; Arr.push (7); console.log (arr); // [5,6,7] arr = 10; // typeError}Есть несколько моментов, чтобы отметить:
Пусть ключевые слова объявленные переменными не имеют функции подъема
Объявления Let and Const действительны только в ближайшем блоке (в кудрявых скобках)
При использовании постоянного объявления Const используйте переменные верхнего регистрации, такие как: Capital_casing
Конст должен быть назначен при объявлении
2. Функции стрелы
В ES6 функция стрелки представляет собой короткую форму функции, используя кронштейны для обертывания параметров, за которым следует an =>, за которым следует корпус функции:
var getPrice = function () {return 4.55;}; // реализация с фондом стрелки getPrice = () => 4.55;Следует отметить, что функция стрелки GetPrice в каштане выше использует краткую функцию корпуса, что не требует оператора резервного управления. Каштан ниже использует нормальную функциональную корпус:
Пусть arr = ['Apple', 'banana', 'Orange']; Пусть завтрак = arr.map (fruit => {return fruit + 's';}); Консоль.log (завтрак); // яблоки бананы апельсиныКонечно, функции стрел - это не только сделать код кратким, но и в функции, это привязка всегда указывает на сам объект. Для получения подробной информации вы можете взглянуть на следующие каштаны:
function person () {this.age = 0; setInterval (function grovup () {// В не-строговом режиме эта функция growUp () указывает на объект окна this.age ++;}, 1000);} var person = new Person ();Нам часто нужно использовать переменную, чтобы сохранить ее, а затем ссылаться на ее в функции Growup:
function person () {var self = this; self.age = 0; setInterval (function grogup () {self.age ++;}, 1000);}И использование функций стрелки может сохранить эту проблему:
function person () {this.age = 0; setInterval (() => {// | this | point to person object this.age ++;}, 1000);} var person = new Person ();3. Значение параметра функции по умолчанию
ES6 позволяет устанавливать значения по умолчанию для параметров функции:
Пусть getFinalPrice = (цена, налог = 0,7) => цена + цена * налог; getFinalPrice (500); // 850
4. Распространение/Оператор REST
Оператор распространения / отдыха относится к ..., будь то распространение или отдых, зависит от контекста.
При использовании в итераторе это оператор спреда:
function foo (x, y, z) {console.log (x, y, z);} arr = [1,2,3]; foo (... arr); // 1 2 3При использовании для передачи аргумента функции это оператор REST:
function foo (... args) {console.log (args);} foo (1, 2, 3, 4, 5); // [1, 2, 3, 4, 5]5. Объект лексического расширения
ES6 позволяет объявлять сокращенный синтаксис при объявлении объектных литералов для инициализации методов определения переменных и функций атрибута, а также позволяет операции расчета в свойствах объекта:
Функция getCar (Make, Model, значение) {return {// Аббревиационная переменная создает, // эквивалентно для создания: сделать модель, // эквивалентный для модели: значение модели, // эквивалентное значению: значение // Атрибут можно рассчитать с использованием выражений ['Make' + Make]: True, // игнорировать `function` abbreviation object function object overciate () {this. this. this. this. this. }};} let car = getCar ('barret', 'lee', 40000); // Вывод: {// MAKE: 'Barret', // Модель: 'Lee', // Значение: 40000, // MakeBarret: true, // rempreciate: function () //}6. Бинальные и восьмиугольные литералы
ES6 поддерживает бинарные и восьмиугольные литералы, которые могут быть преобразованы в двоичные значения, добавив 0o или 0o перед числом:
let ovalue = 0o10; console.log (ovalue); // 8 пусть bvalue = 0b10; // Использовать `0b` или` 0b` console.log (bvalue); // 2
7. Разрушение объекта и массива
Деконструкция может избежать генерации промежуточных переменных при назначении объекта:
function foo () {return [1,2,3];} all arr = foo (); // [1,2,3] пусть [a, b, c] = foo (); console.log (a, b, c); // 1 2 3 Function Bar () {return {x: 4, y: 5, z: 6};} let {x: x, y: y, z: z} = bar (); console.log (x, y, z); // 4 5 68. Object Superclass
ES6 позволяет использовать супер метод в объектах:
var parent = {foo () {console.log ("Привет от родителя"); }} var Child = {foo () {super.foo (); console.log ("Привет от ребенка"); }} Object.setPrototypeof (ребенок, родитель); child.foo (); // Привет от родителя // Привет от ребенка9. Шаблон Синтаксис и сепаратор
Существует очень краткий способ собрать кучу струн и переменных в ES6.
$ {...} используется для визуализации переменной
`как сепаратор
let user = 'barret'; console.log (`hi $ {user}!`); // Привет Баррет!10. для ... vs для ... в
Ибо ... из них используется для прохождения итератора, например, массив:
Пусть Necknames = ['di', 'boo', 'cankeee']; nicknames.size = 3; for (пусть прозвище прозвища) {console.log (никнам);} Результат: di, boo, PankeeeeeИбо ... in используется для прохождения свойств в объекте:
Пусть Necknames = ['di', 'boo', 'cankeee']; nicknames.size = 3; for (let wickname в прозвищах) {console.log (никман);} Результат: 0, 1, 2, размер11. Карта и слабая карта
В ES6 есть два новых набора структуры данных: MAP и Shade Map. На самом деле, каждый объект может рассматриваться как карта.
Объект состоит из нескольких пар клавиш. На карте любой тип может использоваться в качестве ключа объекта, например:
var mymap = new Map (); var keystring = "a String", keyObj = {}, keyfunc = function () {}; // Установить значение mymap.set (keystring, "значение связано с" строкой ""); mymap.set (keyobj, «значение связано с KeyObj»); mymap.set (keyfunc, "значение связано с KeyFunc"); mymap.size; // 3 // Получить значение mymap.get (keystring); // "значение связано с" строкой "mymap.get (keyobj); // "значение связано с" строкой "mymap.get (keyobj); // "значение связано с" строкой "mymap.get (keyobj); // "Значение ассоциируется с KeyObj" mymap.get (keyfunc); // "значение, связанное с KeyFunc"Слабая карта
Слабая карта - это карта, но все его ключи - это слабые ссылки, что означает, что вещи в слабой карте не рассматриваются при сборе мусора, и вам не нужно беспокоиться о утечках памяти при ее использовании.
Еще одна вещь, которую следует отметить, это то, что все ключи слабой карты должны быть объектами. Он имеет только четыре метода: удалить (ключ), есть (ключ), get (key) и set (key, val):
Пусть w = new Sleedmap (); w.set ('a', 'b'); // uncaught typeerror: неверное значение, используемое в качестве слабой карты клавиши карты var o1 = {}, o2 = function () {}, o3 = window; W.Set (O1, 37); W.Set (O2, "Azercy"); W.Set (O3, Undefined); W.Get (O3); // неопределенное, потому что это установленное значение w.has (O1); // truew.delete (O1); w.has (O1); // ЛОЖЬ12. Установить и слабый набор
Устанавливающий объект представляет собой набор неразрешенных значений, и дубликаты значений будут игнорироваться. Типы значений могут быть примитивными и эталонными типами:
Пусть mySet = новый набор ([1, 1, 2, 2, 3, 3]); mySet.Size; // 3myset.has (1); // truemyset.add ('Strings'); myset.add ({a: 1, b: 2});Вы можете пересечь объекты через Foreach и для ...
myset.foreach ((item) => {console.log (item); // 1 // 2 // 3 // 'Strings' // Object {a: 1, b: 2}}); для (let value of myset) {console.log (value); // 1 // 2 // 3 // 'Strings' // Object {a: 1, b: 2}}SET также имеет методы DELETE () и CLEAR ().
Слабый набор
Подобно слабым, объект ShoodSet позволяет вам сохранять слабые ссылки на объекты в сборе, а объекты в SleedSet разрешены только один раз:
var ws = new Sleedset (); var Obj = {}; var foo = {}; ws.add (window); ws.add (obj); ws.has (window); // trueWs.has (foo); // false, Foo не был успешно добавлен ws.delete (window); // Удалить объект окна из комбинации ws.has (window); // ложный, окно -объект был удален13. Класс
В ES6 есть синтаксис класса. Стоит отметить, что класс здесь не является новой моделью наследования объекта, это просто синтаксическая экспрессия сахара цепочки прототипа.
Методы и свойства конструктора определены в функции с использованием статического ключевого слова:
класс задачи {constructor () {console.log ("Задача создания!"); } showid () {console.log (23); } static loadall () {console.log ("Загрузка всех задач .."); }} console.log (typeof askect); // функциональная задача = новая задача (); // "Задача создана!" task.showid (); // 23task.loadall (); // "Загрузка всех задач .."Наследство и суперсеты в классе:
Class Car {constructor () {console.log («Создание нового автомобиля»); }} класс Porsche Extends car {constructor () {super (); console.log («Создание Porsche»); }} let c = new porsche (); // Создание нового автомобиля // Создание PorscheExtends позволяет подклассу наследовать родительский класс. Следует отметить, что функция Super () должна выполняться в функции конструктора подкласса.
Конечно, вы также можете назвать методы родительского класса в методах подкласса, таких как Super.ParentMethodName ().
Узнайте больше о классе здесь.
Есть несколько моментов, которые стоит отметить:
Объявление класса не будет поднимать. Если вы хотите использовать класс, вы должны определить его перед его использованием, в противном случае ошибка ссылочной ошибки будет выбрана.
Определение функций в классах не требует использования ключевых слов функции
14. Символ
Символ - это новый тип данных, значения которых уникальны и неизменны. Цель символа, предложенная в ES6, состоит в том, чтобы генерировать уникальный идентификатор, но вы не можете получить доступ к этому идентификатору:
var sym = symbol («Некоторое необязательное описание»); console.log (typeof sym); // символ
Обратите внимание, что новый оператор не может быть использован перед символом.
Если он используется в качестве свойства объекта, то это свойство будет неопределимым:
var O = {val: 10, [symbol ("random")]: "Я символ",}; console.log (object.getownpropertynames (o)); // valЕсли вы хотите получить свойство символа объекта, вам нужно использовать object.getOwnPropertySymbols (O).
15. Итераторы
Итератор допускает доступ к элементу набора данных каждый раз, когда доступ к элементу. Когда указатель указывает на последний элемент набора данных, итератор выходит. Он обеспечивает следующую () функцию итерации по последовательности, которая возвращает объект, содержащий атрибуты выполненного и значения.
В ES6 вы можете установить обход по умолчанию для объекта через Symbol.iterator. Независимо от того, когда объект должен быть пройден, метод @@ iterator, который выполняет его метод @@ iterator, может вернуть итератор для получения значения.
Массив является итератором по умолчанию:
var arr = [11,12,13]; var itr = arr [symbol.iterator] (); itr.next (); // {value: 11, dode: false} itr.next (); // {value: 12, dode: false} itr.next (); // {value: 13, dode: false} itr.next (); // {value: undefined, dode: true}Вы можете настроить итератор для объекта через [symbol.iterator] ().
16. Генераторы
Функция генератора представляет собой новую функцию ES6, которая позволяет функции возвращать обходной объект для генерации нескольких значений.
В использовании вы увидите синтаксис * и новое доходность ключевого слова:
функция *InfinitEnumbers () {var n = 1; while (true) {will n ++; }} var numbers = infiniteNumbers (); // возвращает итерабируемые номера объектов.next (); // {value: 1, dode: false} numbers.next (); // {value: 2, dode: false} numbers.next (); // {value: 3, dode: false}Каждый раз, когда доходность выполняется, возвращаемое значение становится следующим значением итератора.
17. Обещания
ES6 имеет собственную поддержку для обещания. Обещание - это объект, ожидающий асинхронного исполнения. Когда его исполнение будет завершено, его состояние станет разрешено или отвергнуто.
var p = новое обещание (function (Resolve, dize) {if (/ * условие */) {// выполняется успешно разрешение (/ * value */);} else {// error, отклонение disject (/ * anuse */);}});Каждое обещание имеет метод, который принимает два параметра. Первый - справиться с обратным вызовом разрешенного состояния, а другой - справиться с обратным вызовом отклоненного состояния:
P.Then ((val) => console.log ("обещание разрешить", val), (err) => console.log ("обещание отклонить", err));Выше приведено введение в быстрое начало Ecmascript 6, составленное для всех. Друзья, которые нуждаются в этом, могут учиться и ссылаться на это.