Обзор ES2015(ES6)

17 июня 2015 года генеральное собрание Ecma International официально одобрило стандарт ECMA-262 6 версии

• TC39 (Ecma Technical Committee 39): комитет по развитию стандарта ECMA-262.
• ECMAScript: официальное название языка
• JavaScript - это диалект языка ECMAScript
• ECMAScript Harmony: улучшения после ECMAScript 5 (ES6 и ES7)
• ECMAScript.next: кодовое название ECMAScript 6

История

Шаблоны строк

				"В ES5 \n - это перенос строки."
			

				`В ES6 стало возможным
				писать так.`
			

				var name = 'John', age = 22;
				`${name} is ${age} years old`
			

Спецификация 12.2.9, 12.3.7

let + const

function f() {
  let x; 
  {
    const x = "sneaky"; // ok, block scoped name
    x = "foo"; // error, const
  }
  let x = "inner"; // error, already declared in block
}

Спецификация 13.2.1

Сокращённый формат задания объектов

				var a = {'obj1': obj1, 'obj2': obj2}
				// аналогично
				var a = {obj1, obj2}
			

Спецификация 13.2.1

Значения по умолчанию для аргументов функций

				function f(x, y=12) {
				  return x + y;
				}
				f(3) == 15 //true
			

Спецификация 19.2

Модули

Позволяют загружать код по требованию (асинхронно) и обеспечивают уровень абстракции

Модули

Экспорт

				// calculator/lib/calc.js
				let notExported = 'abc';
				export function square(x) {
				  return x * x;
				}
				export const MY_CONSTANT = 123;
			

Модули

Импорт

				// calculator/main.js
				import { square } from 'lib/calc';
				console.log(square(3));
			

Модули

Импорт

				import { square, MY_CONSTANT } from 'lib/calc';
				import 'lib/calc' as c;
				import { square as squ } from 'lib/calc';
			

Модули

Настройка загрузки модулей

• проверка валидности модуля при импорте (к примеру при помощи JSHint)
• автоматическая трансляция модулей при импорте (они могут содержать код CoffeeScript или TypeScript);
• использовать существующие модули (AMD, Node.js)

Arrow-функции

Для быстрого определения анонимных функций

var x = function() {}
• собственный scope
• нет неявного return

let x = () => {}
• "лексический" scope
• есть неявный return, но не всегда

Arrow-функции

По-старому: сохраняем this

	
this.x = "yes";
var self = this;
var y = function(){
  "use strict"
  console.log(self.x)
};
	

Arrow-функции

По-новому: this из внешнего scope

	
this.x = "yes";
let y = () => {
  "use strict"
  console.log(this.x)
};
y();  //'yes'
	

Arrow-функции

Неявный return

				let add = (a,b) => a + b;
				add(2, 3);	//5
			

Явный return

				let add = (a,b) => { return a + b };
				add(2, 3);	//5
			

Тип Symbol

Применяется для идентификаторов свойств объектов.

				var sym1 = Symbol();
				var sym2 = Symbol("foo");
				var sym3 = Symbol("foo");
				 
				Symbol("foo") === Symbol("foo"); // false O_o
			

Тип Symbol

Пример

	var MyClass = (function() {
	  var key = Symbol("key"); // module scoped symbol
	  function MyClass(prvtData) { 
	    this[key] = prvtData; 
	  }
	  return MyClass;
	})();
	var c = new MyClass("hello")
	c["key"] === undefined

Тип Symbol

Символы не приватные!

Симовол уникален, но не приватен, т.к он может быть получен в результате рефлексии через метод Object.getOwnPropertySymbols

Map и Set

Упрощают работу со специфичными типами коллекций. Map позволяет определять коллекции наборов в формате ключ/значение. В качестве ключа и значения могут выступать любые выражения JavaScript. По аналогии Set позволяет задать множество любых выражений JavaScript

Map

				let data = new Map();
				data.set('key', 100);
				data.set(undefined, 'some text');
				data.has('tag');	//false
				data.has(undefined);	//true
				data.delete(undefined);
				data.has(undefined);	//false
			

Set

				let data = new Set([1, 3, 5, 3]);
				data.add(3);
				data.size;    //3				
				data.add(7);
				data.has(3);    //true
				data.has(9);    //false
				data.delete(3);
				data.has(3);    //false
			

WeakSet и WeakMap

То же самое, но безопасно, т.е не заботимся об утечках памяти!

Объект удаляется, если на него больше не осталось ссылок, кроме ссылки из текущей коллекции, что позволяет не беспокоиться об утечках памяти.

WeakMap

Cтруктуры данных

Итог

• Map — коллекция записей вида ключ: значение. Допускает любые ключи.
• Set — коллекция уникальных элементов, также допускает любые ключи.
• WeakMap и WeakSet — «урезанные» варианты Map/Set. Не коллекции. Ключи только Object. Если ссылка на объект осталась только в WeakMap/WeakSet — объект удаляется.

For-of

Как 20 лет назад...

	
for (var index = 0; index < myArray.length; index++) {
  console.log(myArray[index]);
}
	

For-of

Как в ES5

	
myArray.forEach(function (value) {
  console.log(value);
});
	

For-of

А как насчет For-in?

	
for (var index in myArray) {
  console.log(myArray[index]);
}
	

но так делать не стоит...
• строковая арифметика (index - строка)
• проходит по expando-свойствам и свойствам из цепочки прототипов
• проход в случайном порядке! О_о

For-of

Нас спасет!

	
for (var index of myArray) {
  console.log(myArray[index]);
}
	

Выглядит неплохо
• самый лаконичный и наглядный синтаксис
• нет недостатков for-in
• в отличие от forEach(), он работает с break, continue и return

For-of

Итог

• for-in нужен для перебора свойств объекта.
• for-of нужен для перебора данных, например, значений массива
• for-of также хорошо работает с большинством массивоподобных объектов, вроде списков NodeList в DOM
• Работает с объектами Map и Set
• Работает со строками, рассматривая строку как набор символов Unicode

Генераторы

Генератор - позволяет организовать эффективное выполнение функций в асинхронном режиме.

Генераторы

Генераторы

	 
for (var value of range(10, 1000)) {
  console.log(value);
}
	

Генераторы

Где применить возможность генераторов вести себя как итераторы?

• Преобразование любого объекта в итерируемый
• Упрощение функций, создающих массивы
• Результаты необычной длины
• Рефакторинг сложных циклов
• Утилиты для работы с итерируемыми объектами

Генераторы

Генератор это

• Итератор, а итератор — это новый стандарт для данных и циклов во всём ES6
• Попытка избежать спагетти кода в асинхронном коде. К примеру Q.async() - это экспериментальная попытка сделать асинхронный код похожим на синхронный при помощи генераторов и промисов

Promise

Предназначен для получения значений в асинхронном режиме. Позволяет определить значение, которое пока неизвестно, но будут определено через какое-то время

Promise

				          };
				        })
				      });
				    });
				  });
				});
			

Это боль...

Promise

				new Promise(resolve, reject) {
				  if (testSomething) {
				    resolve(resValue);
				  } else {
				    reject(errValue);
				});				
			

Promise

				requestFromServer()
				.then(function(res) {return res2;})
				.then(function(res2) {return res3;})
				...
				.then(function(res3) {return res4;})
			

Так лучше!

Классы

				class Animal {
				  constructor() {
				    this.speed = 0;
				  }
				  toString() {
				    return this.speed === 0 ? ' sleep' : ' play'
				  }
				}
			

Классы

extends

				class Cat extends Animal {
				  constructor() {
				    super();
				    this.speed = 10;
				  }
				}
			

Классы

				let dog = new Animal();
				let cat = new Cat();
				console.log(dog.toString());	// sleep
				console.log(cat.toString());	// play
				console.log(cat instanceof Animal);	// true
				console.log(cat instanceof Cat);	// true
			

Классы

static

				class Util {
				  static inc(x) {return x + 1},
				  static dec(x) {return x - 1}
				}
				console.log(Util.inc(5));	// 6
			

Классы

get/set

				class O {
				  constructor() {
				    this.mx = 'initial';
				  }
				  get x() { return this.mx; }
				  set x(val) { this.mx = val; }
				}
			

Классы

"поднятие"

				var a = new ClassA(2);  // ReferenceError
				class ClassA {
				  constructor(n) {
				    this.x = n;
				  }
				}
			

Новые методы базовых объектов

• String
• Object
• Array
• Number
• Math

Новые методы базовых объектов

				Object.is(0, -0); // false
				Object.is(NaN, NaN) // true!
				 
				0 === -0; // true
				NaN === NaN; // false
			

Использует SameValue(x, y) алгоритм

Как использовать новые возможности ES2015 уже сейчас?

• chrome://flags/ -> Включить
• в io.js или Node достаточно включить флаг --harmony
• использовать транспайлеры es6-tools

Что умеет Babel?

• Поддержка новых фич и синтаксиса ES2015(ES6)
• Поддержка новых фич и синтаксиса ES2016(ES7)
• Транспайлинг некоторых фич напрямую в ES5
• Поддержка некоторых фич через полифилы
• Поддерживается пока не все (в частности Proxy)

Будущее Javascript

• Транспайлинг - не только как переходный этап
• Как только браузер начнет поддерживать новую фичу, отключаем ее транспайлинг

Ссылки

• Официальная спецификация ES 2015
• Exploring ES6: Upgrade to the next version of JavaScript
• es6-features.org
• Цикл статей ES6 In Depth
• Frontender Magazine