ECMAScript 6 — будущее JavaScript
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

ECMAScript 6 — будущее JavaScript

on

  • 318 views

Способы применения JavaScript сильно изменились за последнее время. Но сам язык начал меняться только сейчас. Я ...

Способы применения JavaScript сильно изменились за последнее время. Но сам язык начал меняться только сейчас. Я расскажу вам, что нового нас ожидает в ECMAScript 6. Вот несколько тезисов:

— новые методы базовых объектов,
— управление областью видимости,
— работа с коллекциями,
— мой любимый «…» префикс,
— генераторы,
— классы.

И, конечно, не забуду рассказать, что из этого можно использовать уже сейчас.

Statistics

Views

Total Views
318
Views on SlideShare
318
Embed Views
0

Actions

Likes
0
Downloads
2
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

ECMAScript 6 — будущее JavaScript Presentation Transcript

  • 1. Будущее JavaScript Алексей Симоненко технический директор Serenity 2013
  • 2. Раньше
  • 3. Сейчас
  • 4. 12 лет между последними большими изменениями спецификации JavaScript
  • 5. Новые методы базовых объектов Object String Array Number Math
  • 6. Новые методы базовых объектов String String.fromCodePoint String.prototype.contains String.prototype.startsWith String.prototype.endsWith String.prototype.repeat String.prototype.codePointAt String.prototype.toArray
  • 7. Новые методы базовых объектов String 18 'too much'.contains('too'); // true 'too much'.startsWith('t'); // true es6-shim ECMAScrip t-6 'too much'.endsWith('t'); // false
  • 8. Новые методы базовых объектов Object Object.is Object.assign Object.mixin Object.getOwnPropertyDescriptors Object.getPropertyDescriptor Object.getPropertyNames Object.setPrototypeOf
  • 9. Новые методы базовых объектов Object 23 19 Object.is(NaN, NaN); // true 15 es6-shim ECMAScrip t-6
  • 10. Новые методы базовых объектов Object 23 19 Object.is(NaN, NaN); // true 15 Object.assign({a: 1, b: 3}, {b: 2, c: 3}); // {a: 1, b: 2, c: 3} es6-shim ECMAScrip t-6
  • 11. Новые методы базовых объектов Array Array.from Array.of Array.prototype.find Array.prototype.findIndex Array.prototype.fill
  • 12. Новые методы базовых объектов Array 25 30 [1, 3, 15, 7, 15, 23].find(function(item) { return item / 3 === 5; }); // 15 [1, 3, 15, 7, 15, 23].findIndex(function(item) { return item / 3 === 5; }); // 2 es6-shim
  • 13. Новые методы базовых объектов Array Нет метода Array.prototype.unique()
  • 14. Новые методы базовых объектов Number Number.isNaN Number.isFinite Number.isInteger Number.toInteger Number.prototype.clz
  • 15. Новые методы базовых объектов 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
  • 16. Область видимости
  • 17. Область видимости 11 let 18 24 var tag = '#wstdays'; if (true) { let tag = '#404fest'; } google traceur es6ify
  • 18. Область видимости 11 let 18 24 var tag = '#wstdays'; if (true) { let tag = '#404fest'; console.log(tag); // "#404fest" } console.log(tag); // "#wstdays" google traceur es6ify
  • 19. Область видимости 11 const 18 24 const a = 10; 12 6 google traceur
  • 20. Область видимости 11 const 18 24 const a = 10; a = 15; 12 6 // SyntaxError: Assignment to constant variable. google traceur
  • 21. Область видимости 11 const 18 24 const a = 10; a = 15; 12 6 // SyntaxError: Assignment to constant variable. var a = 15; // SyntaxError: Variable 'a' has already been declared google traceur
  • 22. Область видимости 11 const 18 24 var a = 15; if (true) { const a = 10; console.log(a); // 10 } console.log(a); // 15 12 6 google traceur
  • 23. Коллекции
  • 24. Коллекции 11 Map 18 let data = new Map(); 29 data.set('key', 100); data.set(666, true); data.set(undefined, 'some text'); es6-shim ECMAScrip t-6 harmonycollections
  • 25. Коллекции 11 Map 18 let data = new Map(); 29 data.set('key', 100); data.set(666, true); data.set(undefined, 'some text'); let fn = function() { console.log('inside?'); } data.set(fn, 'function key'); es6-shim ECMAScrip t-6 harmonycollections
  • 26. Коллекции 11 Map 18 let data = new Map(); 29 data.set('key', 100); data.set(666, true); data.set(undefined, 'some text'); let fn = function() { console.log('inside?'); } data.set(fn, 'function key'); data.has('keys'); // false data.has(undefined); // true es6-shim ECMAScrip t-6 harmonycollections
  • 27. Коллекции 11 Map 18 let data = new Map(); 29 data.set('key', 100); data.set(666, true); data.set(undefined, 'some text'); let fn = function() { console.log('inside?'); } data.set(fn, 'function key'); data.has('keys'); // false data.has(undefined); // true data.delete(undefined); data.has(undefined); // false es6-shim ECMAScrip t-6 harmonycollections
  • 28. Коллекции 11 Map 18 let data = new Map(); 29 data.set('key', 100); data.set(666, true); data.set(undefined, 'some text'); let fn = function() { console.log('inside?'); } data.set(fn, 'function key'); data.has('keys'); // false data.has(undefined); // true data.delete(undefined); data.has(undefined); // false data.get(fn); // "function key" es6-shim ECMAScrip t-6 harmonycollections
  • 29. Коллекции 11 Set 24 let data = new Set([1, 3, 5, 3]); 29 es6-shim ECMAScrip t-6 harmonycollections
  • 30. Коллекции 11 Set 24 let data = new Set([1, 3, 5, 3]); 29 data.add(3); data.add(7); es6-shim ECMAScrip t-6 harmonycollections
  • 31. Коллекции 11 Set 24 let data = new Set([1, 3, 5, 3]); 29 data.add(3); data.add(7); data.has(3); // true data.has(9); // false es6-shim ECMAScrip t-6 harmonycollections
  • 32. Коллекции 11 Set 24 let data = new Set([1, 3, 5, 3]); 29 data.add(3); data.add(7); data.has(3); // true data.has(9); // false data.delete(3); data.has(3); // false es6-shim ECMAScrip t-6 harmonycollections
  • 33. Коллекции for-of 13 let tags = ['#404fest', '#wstdays', '#dconf']; for (let tag in tags) { console.log(tag); } // 0, 1, 2 google traceur es6ify
  • 34. Коллекции for-of 13 let tags = ['#404fest', '#wstdays', '#dconf']; for (let tag in tags) { console.log(tag); } // 0, 1, 2 for (let tag of tags) { console.log(tag); } // "#404fest", "#wstdays", "#dconf" google traceur es6ify
  • 35. Коллекции for-of let tags = new Set([ '#404fest', '#wstdays', '#404fest', '#dconf' ]); for (let tag of tags) { console.log(tag); } // "#404fest", "#wstdays", "#dconf" 24 google traceur es6ify
  • 36. Коллекции for-of 18 let data = new Map(); data.set('404fest', {'involve': true, 'speaker': true}); data.set('wstdays', {'involve': false, 'speaker': false}); data.set('dconf', {'involve': true, 'speaker': false}); for (let conf of data) { console.log(conf); } google traceur es6ify // ["404fest", {"involve": true, "speaker": true}] // ["wstdays", {"involve": false, "speaker": false}] // ["dconf", {"involve": true, "speaker": false}]
  • 37. Коллекции 11 WeakMap 23 29 let data = new WeakMap(); let element = document.querySelector('footer'); data.set(element, 'some text'); harmonycollections
  • 38. Коллекции 11 WeakMap 23 29 let data = new WeakMap(); let element = document.querySelector('footer'); data.set(element, 'some text'); data.has(element); // true data.get(element); // "some text" harmonycollections
  • 39. Коллекции 11 WeakMap 23 29 let data = new WeakMap(); let element = document.querySelector('footer'); data.set(element, 'some text'); data.has(element); // true data.get(element); // "some text" element = null; data.has(element); // false harmonycollections
  • 40. Странные конструкции
  • 41. Странные конструкции Destructuring assignment 12 let data = [10, 20, 30]; let [a, b, c] = data; // a = 10, b = 20, c = 30 google traceur es6ify
  • 42. Странные конструкции Destructuring assignment 12 let data = [10, 20, 30]; let [a, b, c] = data; // a = 10, b = 20, c = 30 let a = 10; let b = 20; [a, b] = [b, a]; // a = 20, b = 10 google traceur es6ify
  • 43. Странные конструкции Destructuring assignment 12 let [a, [[b], c]] = [10, [[20], 30]]; // a = 10, b = 20, c = 30 google traceur es6ify
  • 44. Странные конструкции Destructuring assignment 12 let [a, [[b], c]] = [10, [[20], 30]]; // a = 10, b = 20, c = 30 [, month, day, year] = Date().split(' '); // month = "Oct", day = "13", year = "2013" google traceur es6ify
  • 45. Странные конструкции Destructuring assignment 12 let data = {a: 10, b: 20, c: 30}; let {a, b, c} = data; // a = 10, b = 20, c = 30 google traceur es6ify
  • 46. Странные конструкции Destructuring assignment 12 let data = {a: 10, b: 20, c: 30}; let {a, b, c} = data; // a = 10, b = 20, c = 30 let {parse, stringify} = JSON; google traceur es6ify
  • 47. Странные конструкции Destructuring assignment function today() { return { d: 13, m: 9, y: 2013 }; } let {m: month, y: year} = today(); // month = 9, year = 2013 12 google traceur es6ify
  • 48. Странные конструкции Object literal property value shorthand let name = 'Alena'; let email = 'alena@serenity.su'; let profile = {'name': name, 'email': email}; google traceur
  • 49. Странные конструкции Object literal property value shorthand let name = 'Alena'; let email = 'alena@serenity.su'; let profile = {'name': name, 'email': email}; let profile = {name, email}; // {"name": "Alena", "email": "alena@serenity.su"} google traceur
  • 50. Странные конструкции let data = new Map(); data.set('404fest', {'involve': true, 'speaker': true}); data.set('wstdays', {'involve': false, 'speaker': false}); data.set('dconf', {'involve': true, 'speaker': false}); for (let [name, {involve}] of data) { console.log(name, involve); } // "404fest", true // "wstdays", false // "dconf", true
  • 51. Странные конструкции Spread operator 16 let params = [2013, 9, 13, 15, 30]; let date = new Date(...params); // Sun Oct 13 2013 15:30:00 GMT+0400 (MSK) google traceur es6ify
  • 52. Странные конструкции Spread operator 16 let params = [2013, 9, 13, 15, 30]; let date = new Date(...params); // Sun Oct 13 2013 15:30:00 GMT+0400 (MSK) let speak = ['#404fest', '#dconf']; let tags = ['#fronteers13', ...speak, '#wstdays']; // ["#fronteers13", "#404fest", "#dconf", "#wstdays"] google traceur es6ify
  • 53. Странные конструкции Rest parameter 16 function elastic(key, ...items) { console.log(items); } elastic('tags', '#404fest', '#dconf', '#wstdays'); // ["#404fest", "#dconf", "#wstdays"] google traceur es6ify
  • 54. Странные конструкции Нет метода Array.prototype.unique()? Сделаем его сами
  • 55. Странные конструкции let data = [ 10, 20, 10, 35, 'S', 'Y', 'S', 35, 10, 'S' ]; let unique = [...new Set(data)]; // [10, 20, 35, "S", "Y"]
  • 56. Функции 6 000 000 °
  • 57. Функции Default argument 16 function fn(a, b = false, c = 'world') { console.log(a, b, c); } fn(10); // a = 10, b = false, c = "world" google traceur es6ify
  • 58. Функции Default argument 16 function fn(a, b = false, c = 'world') { console.log(a, b, c); } fn(10); // a = 10, b = false, c = "world" fn(10, 'world', null); // a = 10, b = "world", c = null google traceur es6ify
  • 59. Функции Default argument 16 function fn(a, b = false, c = 'world') { console.log(a, b, c); } fn(10); // a = 10, b = false, c = "world" fn(10, 'world', null); // a = 10, b = "world", c = null fn(10, 'world', undefined); // a = 10, b = "world", c = "world" google traceur es6ify
  • 60. Функции Default argument function fn(that = this) { setTimeout(function() { console.log(that); }, 100); } 16 google traceur es6ify
  • 61. Функции Arrow function 23 [1, 3, 15, 7, 15, 23].find(function(item) { return item / 3 === 5; }); es6ify harmonizr
  • 62. Функции Arrow function 23 [1, 3, 15, 7, 15, 23].find(function(item) { return item / 3 === 5; }); [1, 3, 15, 7, 15, 23].find(item => item / 3 === 5); es6ify harmonizr
  • 63. Функции Arrow function 23 [1, 3, 15, 7, 15, 23].find(function(item) { return item / 3 === 5; }); [1, 3, 15, 7, 15, 23].find(item => item / 3 === 5); [1, 3, 15, 7, 15, 23].find(item => { let test = item / 3; return test === 5; }); es6ify harmonizr
  • 64. Генераторы
  • 65. Генераторы 26 function* compute(degree, max) { var a = 1; 29 for (let i = 0; i < max; i++) { yield a; a = a * degree; } } let gen = compute(2, 3); google traceur es6ify
  • 66. Генераторы 26 function* compute(degree, max) { var a = 1; 29 for (let i = 0; i < max; i++) { yield a; a = a * degree; } } let gen = compute(2, 3); google traceur es6ify gen.next(); // { value: 1, done: false } gen.next(); // { value: 2, done: false } gen.next(); // { value: 4, done: false }
  • 67. Генераторы 26 function* compute(degree, max) { var a = 1; 29 for (let i = 0; i < max; i++) { yield a; a = a * degree; } } let gen = compute(2, 3); google traceur es6ify gen.next(); // { value: 1, done: false } gen.next(); // { value: 2, done: false } gen.next(); // { value: 4, done: false } gen.next(); // { value: undefined, done: true }
  • 68. Генераторы 26 function* compute(degree, max) { var a = 1; 29 for (let i = 0; i < max; i++) { yield a; a = a * degree; } } for (let degree of compute(2, 5)) { console.log(degree); } // 1, 2, 4, 8, 16 google traceur es6ify
  • 69. Генераторы 26 function* seq(a) { yield a + 5; 29 let b = yield null; return a + b; } let gen = seq(5); google traceur es6ify
  • 70. Генераторы 26 function* seq(a) { yield a + 5; 29 let b = yield null; return a + b; } let gen = seq(5); google traceur gen.next().value; // 10 es6ify
  • 71. Генераторы 26 function* seq(a) { yield a + 5; 29 let b = yield null; return a + b; } let gen = seq(5); google traceur gen.next().value; // 10 es6ify gen.next().value; // null
  • 72. Генераторы 26 function* seq(a) { yield a + 5; 29 let b = yield null; return a + b; } let gen = seq(5); google traceur gen.next().value; // 10 es6ify gen.next().value; // null gen.next(8).value; // 13
  • 73. Классы
  • 74. Классы class Employee { constructor(title) { this.title = title; } who() { console.log(this.title); } } google traceur es6ify harmonizr
  • 75. Классы class Employee { constructor(title) { this.title = title; } who() { console.log(this.title); } } google traceur es6ify let ryan = new Employee('Райан Стоун'); ryan.who(); // Райан Стоун harmonizr
  • 76. Классы class Chief extends Employee { constructor(firstname, surname, role) { super(firstname + ' ' + surname); this.role = role; } fire(person) { person.dismiss(); } } google traceur es6ify harmonizr
  • 77. Классы 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
  • 78. Ответственный за поддержку стандартов
  • 79. let const Map Set WeakMap
  • 80. Спасибо. simonenko simonenko simonenko.su