ECMAScript 6 — будущее JavaScript

Slide 1

Slide 1 text

Алексей Симоненко веб-евангелист HTML Academy Будущее JavaScript 2014

Slide 2

Slide 2 text

Раньше

Slide 3

Slide 3 text

Сейчас

Slide 4

Slide 4 text

12 лет между последними большими изменениями спецификации JavaScript

Slide 5

Slide 5 text

Новые методы базовых объектов Object String Array Number Math

Slide 6

Slide 6 text

Новые методы базовых объектов String String.fromCodePoint ! String.prototype.contains String.prototype.startsWith String.prototype.endsWith String.prototype.repeat String.prototype.codePointAt String.prototype.toArray

Slide 7

Slide 7 text

Новые методы базовых объектов String 'too much'.contains('too'); // true 'too much'.startsWith('t'); // true 'too much'.endsWith('t'); // false 18 es6-shim 30 ECMAScript-6

Slide 8

Slide 8 text

Новые методы базовых объектов Object Object.is Object.assign Object.mixin Object.getOwnPropertyDescriptors Object.getPropertyDescriptor Object.getPropertyNames Object.setPrototypeOf

Slide 9

Slide 9 text

Новые методы базовых объектов Object Object.is(NaN, NaN); // true 23 19 15 es6-shim ECMAScript-6

Slide 10

Slide 10 text

Новые методы базовых объектов Object Object.assign({a: 1, b: 3}, {b: 2}); // {a: 1, b: 2} Object.is(NaN, NaN); // true 23 19 15 es6-shim ECMAScript-6

Slide 11

Slide 11 text

Новые методы базовых объектов Array Array.from Array.of ! Array.prototype.find Array.prototype.findIndex Array.prototype.fill

Slide 12

Slide 12 text

Новые методы базовых объектов Array [1, 15, 7].find(function(num) { return num / 3 === 5; }); // 15 [1, 15, 7].findIndex(function(num) { return num / 3 === 5; }); // 1 25 30 es6-shim

Slide 13

Slide 13 text

Новые методы базовых объектов Array var $ = document.querySelectorAll; ! Array.from($('div')); ! // [...] es6-shim ECMAScript-6

Slide 14

Slide 14 text

Новые методы базовых объектов Array Нет метода Array.prototype.unique()

Slide 15

Slide 15 text

Новые методы базовых объектов Number Number.isNaN Number.isFinite Number.isInteger Number.toInteger ! Number.prototype.clz

Slide 16

Slide 16 text

Новые методы базовых объектов Math Math.sign Math.imul Math.log1p Math.log2 Math.log10 Math.expm1 Math.fround Math.hypot Math.trunc Math.cosh Math.sinh Math.tanh Math.acosh Math.asinh Math.atanh

Slide 17

Slide 17 text

Область видимости

Slide 18

Slide 18 text

Область видимости let var tag = '#wstdays'; ! if (true) { let tag = '#404fest'; } 11 18 24 google traceur es6ify

Slide 19

Slide 19 text

Область видимости let var tag = '#wstdays'; ! if (true) { let tag = '#404fest'; console.log(tag); // "#404fest" } ! console.log(tag); // "#wstdays" 11 18 24 google traceur es6ify

Slide 20

Slide 20 text

Область видимости const const a = 10; 11 18 24 12 6 google traceur

Slide 21

Slide 21 text

Область видимости const const a = 10; a = 15; // SyntaxError: Assignment to constant variable. 11 18 24 12 6 google traceur

Slide 22

Slide 22 text

Область видимости const const a = 10; a = 15; // SyntaxError: Assignment to constant variable. var a = 15; // SyntaxError: Variable 'a' has already been declared 11 18 24 12 6 google traceur

Slide 23

Slide 23 text

Область видимости const var a = 15; ! if (true) { const a = 10; console.log(a); // 10 } ! console.log(a); // 15 18 11 24 12 6 google traceur

Slide 24

Slide 24 text

Коллекции

Slide 25

Slide 25 text

Коллекции Map let data = new Map(); ! data.set('key', 100); data.set(undefined, 'some text'); 11 18 29 es6-shim harmony- collections ECMAScript-6

Slide 26

Slide 26 text

Коллекции Map let data = new Map(); ! data.set('key', 100); data.set(undefined, 'some text'); data.has('tags'); // false data.has(undefined); // true 11 18 29 es6-shim harmony- collections ECMAScript-6

Slide 27

Slide 27 text

Коллекции Map let data = new Map(); ! data.set('key', 100); data.set(undefined, 'some text'); data.has('tags'); // false data.has(undefined); // true data.delete(undefined); data.has(undefined); // false 11 18 29 es6-shim harmony- collections ECMAScript-6

Slide 28

Slide 28 text

Коллекции Map let fn = function() { console.log('inside?'); }; 11 18 29 es6-shim harmony- collections ECMAScript-6

Slide 29

Slide 29 text

Коллекции Map let fn = function() { console.log('inside?'); }; 11 18 29 es6-shim harmony- collections let data = new Map(); ! data.set(fn, '#wstdays'); ECMAScript-6

Slide 30

Slide 30 text

Коллекции Map let fn = function() { console.log('inside?'); }; data.get(fn); // "#wstdays" 11 18 29 es6-shim harmony- collections let data = new Map(); ! data.set(fn, '#wstdays'); ECMAScript-6

Slide 31

Slide 31 text

Коллекции Set let data = new Set([1, 3, 5, 3]); 11 24 29 es6-shim harmony- collections ECMAScript-6

Slide 32

Slide 32 text

Коллекции Set let data = new Set([1, 3, 5, 3]); data.add(3); data.add(7); 11 24 29 es6-shim harmony- collections ECMAScript-6

Slide 33

Slide 33 text

Коллекции Set let data = new Set([1, 3, 5, 3]); data.add(3); data.add(7); data.has(3); // true data.has(9); // false 11 24 29 es6-shim harmony- collections ECMAScript-6

Slide 34

Slide 34 text

Коллекции Set let data = new Set([1, 3, 5, 3]); data.add(3); data.add(7); data.has(3); // true data.has(9); // false data.delete(3); data.has(3); // false 11 24 29 es6-shim harmony- collections ECMAScript-6

Slide 35

Slide 35 text

Коллекции for-of let tags = ['#f8', '#wstdays']; ! for (let tag in tags) { console.log(tag); } ! // 0, 1

Slide 36

Slide 36 text

Коллекции for-of 13 google traceur es6ify let tags = ['#f8', '#wstdays']; ! for (let tag of tags) { console.log(tag); } ! // "#f8", "#wstdays"

Slide 37

Slide 37 text

Коллекции for-of let tags = new Set([ '#f8', '#wstdays', '#f8' ]); ! for (let tag of tags) { console.log(tag); } ! // "#f8", "#wstdays" 24 es6-shim harmony- collections google traceur es6ify ECMAScript-6

Slide 38

Slide 38 text

Коллекции for-of let data = new Map(); ! data.set('f8', {'a': 1, 'b': 0}); data.set('wd', {'a': 0, 'b': 1}); ! for (let params of data) { console.log(params); } ! // ["f8", {"a": 1, "b": 0}] // ["wd", {"a": 0, "b": 1}] 18 es6-shim harmony- collections google traceur es6ify ECMAScript-6

Slide 39

Slide 39 text

Коллекции WeakMap let a = document.querySelector('a'); let data = new WeakMap(); ! data.set(a, 'some text'); 11 23 29

Slide 40

Slide 40 text

Коллекции WeakMap let a = document.querySelector('a'); let data = new WeakMap(); ! data.set(a, 'some text'); data.has(a); // true data.get(a); // "some text" 11 23 29

Slide 41

Slide 41 text

Коллекции WeakMap let a = document.querySelector('a'); let data = new WeakMap(); ! data.set(a, 'some text'); data.has(a); // true data.get(a); // "some text" a = null; data.has(a); // false 11 23 29

Slide 42

Slide 42 text

Странные конструкции

Slide 43

Slide 43 text

let [a, b, c] = [10, 20, 30]; ! // a = 10, b = 20, c = 30 Странные конструкции Destructuring assignment 12 google traceur es6ify

Slide 44

Slide 44 text

let [a, b, c] = [10, 20, 30]; ! // a = 10, b = 20, c = 30 let a = 10; let b = 20; ! [a, b] = [b, a]; ! // a = 20, b = 10 Странные конструкции Destructuring assignment 12 google traceur es6ify

Slide 45

Slide 45 text

let [a, [[b], c]] = [10, [[20], 30]]; ! // a = 10, b = 20, c = 30 Странные конструкции Destructuring assignment 12 google traceur es6ify

Slide 46

Slide 46 text

let [a, [[b], c]] = [10, [[20], 30]]; ! // a = 10, b = 20, c = 30 let [, m, d, y] = Date().split(' '); ! // m = "Mar", d = "15", y = "2014" Странные конструкции Destructuring assignment 12 google traceur es6ify

Slide 47

Slide 47 text

let data = {a: 10, b: 20, c: 30}; let {a, b, c} = data; ! // a = 10, b = 20, c = 30 Странные конструкции Destructuring assignment 12 google traceur es6ify

Slide 48

Slide 48 text

Slide 49

Slide 49 text

function today() { return {d: 15, m: 2, y: 2014}; } ! let {m: month, y: year} = today(); ! // month = 2, year = 2014 Странные конструкции Destructuring assignment 12 google traceur es6ify

Slide 50

Slide 50 text

let name = 'Alexey'; let mail = '[email protected]'; ! let user = {'name': name, 'mail': mail}; Странные конструкции Object literal property value shorthand google traceur

Slide 51

Slide 51 text

let name = 'Alexey'; let mail = '[email protected]'; ! let user = {'name': name, 'mail': mail}; let user = {name, mail}; ! // { // "name": "Alexey", // "mail": "[email protected]" // } Странные конструкции Object literal property value shorthand google traceur

Slide 52

Slide 52 text

Странные конструкции let data = new Map(); ! data.set('f8', {'a': 1, 'b': 0}); data.set('wd', {'a': 0, 'b': 1}); ! for (let [name, {a}] of data) { console.log(name, a); } ! // "f8", 1 // "wd", 0 18 es6-shim ECMAScript-6 harmony- collections google traceur es6ify

Slide 53

Slide 53 text

let params = [2014, 2, 15, 15, 0]; let date = new Date(...params); ! // Sat Mar 15 2014 15:00:00 GMT+0400 (MSK) Странные конструкции Spread operator 16 google traceur es6ify

Slide 54

Slide 54 text

let params = [2014, 2, 15, 15, 0]; let date = new Date(...params); ! // Sat Mar 15 2014 15:00:00 GMT+0400 (MSK) let soon = ['#404fest', '#wstdays']; let last = ['#yac', ...soon, '#f8']; ! // ["#yac", "#404fest", "#wstdays", "#f8"] Странные конструкции Spread operator 16 google traceur es6ify

Slide 55

Slide 55 text

function elastic(...items) { console.log(items); } ! elastic('#404fest', '#dconf', '#wstdays'); ! // ["#404fest", "#dconf", "#wstdays"] Странные конструкции Rest parameter 16 google traceur es6ify

Slide 56

Slide 56 text

Странные конструкции Нет метода Array.prototype.unique()? Сделаем его сами

Slide 57

Slide 57 text

let data = [ 10, 20, 10, 35, 'S', 'Y', 'S', 35, 10, 'S' ]; ! let unique = [...new Set(data)]; ! // [10, 20, 35, "S", "Y"] 24 google traceur es6ify Странные конструкции Array.prototype.unique

Slide 58

Slide 58 text

Функции 6 000 000 °

Slide 59

Slide 59 text

Функции Default argument function fn(a, b = true, c ='hi') { console.log(a, b, c); } ! fn(10); // a = 10, b = true, c = "hi" 16 google traceur es6ify

Slide 60

Slide 60 text

Функции Default argument function fn(a, b = true, c ='hi') { console.log(a, b, c); } ! fn(10); // a = 10, b = true, c = "hi" fn(10, 'world', null); // a = 10, b = "world", c = null 16 google traceur es6ify

Slide 61

Slide 61 text

Функции Default argument function fn(a, b = true, c ='hi') { console.log(a, b, c); } ! fn(10); // a = 10, b = true, c = "hi" fn(10, 'world', undefined); // a = 10, b = "world", c = "hi" fn(10, 'world', null); // a = 10, b = "world", c = null 16 google traceur es6ify

Slide 62

Slide 62 text

Функции Default argument function fn(that = this) { ! setTimeout(function() { console.log(that); }, 100); ! } 16 google traceur es6ify

Slide 63

Slide 63 text

Функции Arrow function 23 es6ify harmonizr google traceur [1, 15].find(function(num) { return num / 3 === 5; });

Slide 64

Slide 64 text

Функции Arrow function [1, 15].find(num => num / 3 === 5); 23 es6ify harmonizr google traceur [1, 15].find(function(num) { return num / 3 === 5; });

Slide 65

Slide 65 text

Функции Arrow function [1, 15].find(num => { let test = num / 3; return test === 5; }); [1, 15].find(num => num / 3 === 5); 23 es6ify harmonizr google traceur [1, 15].find(function(num) { return num / 3 === 5; });

Slide 66

Slide 66 text

Генераторы

Slide 67

Slide 67 text

Генераторы function* compute(degree) { let num = 1; ! while (true) { yield num; num = num * degree; } } ! let gen = compute(2); 26 29 google traceur es6ify regenerator

Slide 68

Slide 68 text

Генераторы function* compute(degree) { let num = 1; ! while (true) { yield num; num = num * degree; } } ! let gen = compute(2); gen.next(); // { value: 1, done: false } gen.next(); // { value: 2, done: false } gen.next(); // { value: 4, done: false } gen.next(); // { value: 8, done: false } gen.next(); // { value: 16, done: false } 26 29 google traceur es6ify regenerator

Slide 69

Slide 69 text

Генераторы 26 29 function* compute(degree) { let num = 1; ! while (true) { yield num; num = num * degree; } } ! for (let degree of compute(2)) { if (degree > 64) break; ! console.log(degree); } ! // 1, 2, 4, 8, 16, 32, 64 google traceur es6ify regenerator

Slide 70

Slide 70 text

Генераторы function* seq(a) { yield a + 5; ! let b = yield null; ! return a + b; } ! let gen = seq(5); 26 29 google traceur es6ify regenerator

Slide 71

Slide 71 text

Генераторы function* seq(a) { yield a + 5; ! let b = yield null; ! return a + b; } ! let gen = seq(5); gen.next(); // { value: 10, done: false } 26 29 google traceur es6ify regenerator

Slide 72

Slide 72 text

Генераторы function* seq(a) { yield a + 5; ! let b = yield null; ! return a + b; } ! let gen = seq(5); gen.next(); // { value: 10, done: false } gen.next(); // { value: null, done: false } 26 29 google traceur es6ify regenerator

Slide 73

Slide 73 text

Генераторы function* seq(a) { yield a + 5; ! let b = yield null; ! return a + b; } ! let gen = seq(5); gen.next(); // { value: 10, done: false } gen.next(); // { value: null, done: false } gen.next(8); // { value: 13, done: true } 26 29 google traceur es6ify regenerator

Slide 74

Slide 74 text

Классы

Slide 75

Slide 75 text

Классы class Employee { constructor(title) { this.title = title; } ! who() { console.log(this.title); } } google traceur es6ify harmonizr

Slide 76

Slide 76 text

Классы class Employee { constructor(title) { this.title = title; } ! who() { console.log(this.title); } } let ryan = new Employee('Райан Стоун'); ryan.who(); ! // Райан Стоун google traceur es6ify harmonizr

Slide 77

Slide 77 text

Классы class Chief extends Employee { constructor(firstname, surname, role) { super(firstname + ' ' + surname); this.role = role; } ! fire(person) { person.dismiss(); } } google traceur es6ify harmonizr

Slide 78

Slide 78 text

Классы class Chief extends Employee { constructor(firstname, surname, role) { super(firstname + ' ' + surname); this.role = role; } ! fire(person) { person.dismiss(); } } let mat = new Chief('Мэтт', 'Ковальски', 'owner'); mat.who(); ! // Мэтт Ковальски google traceur es6ify harmonizr