Downloaded 42 times
![Rest Parameters
function foo(x = 5, ...rest) {!
rest;!
}!
!
foo(1, 2, 3, 4, 5, 6);!
// [2,3,4,5,6]](https://image.slidesharecdn.com/ecmascript6-140722021408-phpapp01/75/ECMAScript-6-36-2048.jpg)
![Spread Operator
function f(x, y, z) { }!
var args = [0, 1, 2];!
!
f.apply(null, args);!
!
f(...args);](https://image.slidesharecdn.com/ecmascript6-140722021408-phpapp01/75/ECMAScript-6-37-2048.jpg)
![Spread Operator
var arg2 = [...args, 3, 4];!
// [0,1,2,3,4]!
!
var arg3 = arg.push(...arg2);!
// [0,1,2,0,1,2,3,4]](https://image.slidesharecdn.com/ecmascript6-140722021408-phpapp01/75/ECMAScript-6-38-2048.jpg)
![Destructing Assign
var a, b;!
!
[a, b] = [1, 2];!
//a:1, b:2](https://image.slidesharecdn.com/ecmascript6-140722021408-phpapp01/75/ECMAScript-6-39-2048.jpg)
![Destructing Assign
[a, b] = [b, a];!
//swap!
!
[a, ,[b, c]] = [1, 0, [2, 3]];!
//a:1, b:2, c:3!
!
{lan: a, lon: b} = getPOS();!
//object destructing](https://image.slidesharecdn.com/ecmascript6-140722021408-phpapp01/75/ECMAScript-6-40-2048.jpg)
![Destructing and Spread
[a, ...b] = [1, 2, 3, 4, 5];!
//a:1, b:[2,3,4,5]](https://image.slidesharecdn.com/ecmascript6-140722021408-phpapp01/75/ECMAScript-6-41-2048.jpg)
![Class Extends
class People extends Counter {!
constructor(people) {!
this.people = people;!
for (let p in people) {!
this.tick();!
}!
}!
}!
!
var p = new People([1,2,3,4,5]);!
p.count; //5](https://image.slidesharecdn.com/ecmascript6-140722021408-phpapp01/75/ECMAScript-6-43-2048.jpg)
![Set
⚈ Like array, […]
⚈ Can’t get value at specific index
⚈ Use for…of](https://image.slidesharecdn.com/ecmascript6-140722021408-phpapp01/75/ECMAScript-6-48-2048.jpg)
![Iterable
ID = {};!
!
ID['@@iterator'] = idMaker;!
//or use Symbol!
ID[Symbol.iterator] = idMaker;!
!
for (id of ID) {!
id;!
//0,1,2,3,4,5!
}
http://people.mozilla.org/~jorendorff/es6-draft.html#table-1](https://image.slidesharecdn.com/ecmascript6-140722021408-phpapp01/75/ECMAScript-6-70-2048.jpg)
![Comprehension
var ns = [1, 2, 3, 4];!
!
var dbls = [for (i of ns) i*2];!
!
dbls; // [2, 4, 6, 8]
簡約式](https://image.slidesharecdn.com/ecmascript6-140722021408-phpapp01/75/ECMAScript-6-73-2048.jpg)
![CoffeeScript Syntax
arr = [1, 2, 3, 4];!
!
res = (x for x in arr);](https://image.slidesharecdn.com/ecmascript6-140722021408-phpapp01/75/ECMAScript-6-74-2048.jpg)
![2 Level Comprehension
var ms = [1, 2, 3, 4];!
var ns = [2, 3, 4, 5];!
!
[for (i of ms) for (j of ns) i*j];!
// [2, 6, 12, 20]](https://image.slidesharecdn.com/ecmascript6-140722021408-phpapp01/75/ECMAScript-6-75-2048.jpg)
![Conditional Comprehension
var ns = [1, 2, 3, 4];!
!
[for (i of ns) if (i % 2) i];!
//[1, 3]](https://image.slidesharecdn.com/ecmascript6-140722021408-phpapp01/75/ECMAScript-6-76-2048.jpg)
![Comprehension for Iterator
var ns = [1, 2, 3, 4];!
!
(for (i of ns) if (i % 2) i);!
//iterator with values [1, 3]](https://image.slidesharecdn.com/ecmascript6-140722021408-phpapp01/75/ECMAScript-6-77-2048.jpg)
Uploaded by偉格 高
ECMAScript 6
This document provides an overview of ECMAScript 6 (ES6), also known as ECMAScript 2015. It discusses the history and standardization of JavaScript and ECMAScript. It then covers many of the new features introduced in ES6, including let and const block scoping, arrow functions, template literals, classes, generators, iterators, promises, and modules. It encourages using ES6 features today via tools like Traceur and Babel that compile ES6 to ES5 for browser compatibility. It also looks ahead to future features planned for ECMAScript 7 and beyond.
More Related Content
ECMAScript 6
- 1.
- 2.
- 3. Self Intro @othree https://blog.othree.net twitterweb standards murmur flickr photo guy for confs github html5.vim, tern-coffee… ntust phd candidate
- 4.
- 5. 1996 1997 1998 1999 History JavaScript 1.0 JScript 1.0JavaScript1.1 JScript 2.0 JScript 3.0 JavaScript 1.2 JavaScript 1.3 Netscape Microsoft
- 6. Standardization ⚈ Standard scriptlanguage running on browser ⚈ Host by ECMA
- 7.
- 8. ECMAScript ⚈ Standard ofJavaScript ⚈ ECMA-262, also called ECMAScript ⚈ 1.0, 2.0 published around 1997-1998 ⚈ Current Edition: 5.1 http://zh.wikipedia.org/wiki/ECMAScript
- 9. History ⚈ Browser War ⚈ES3 most supported ⚈ ES4 abandoned ⚈ ES5 current ⚈ ES6 talking today 1999 2009 2014
- 10. ES3 ⚈ Most supported ⚈IE6, 7, 8
- 11. ES4 ⚈ Flash, ActionScript ⚈Abandoned
- 12. ES5 ⚈ From 3.1 ⚈Strict mode ⚈ More solid spec
- 13. What is ESNow ⚈ ECMAScript is spec ⚈ JavaScript is implementation by Mozilla ⚈ IE’s: JScript ⚈ Host by ECMA International
- 14. JavaScript 1.5 ECMAScript 3 1.6array extras + array and string generics + E4X 1.7 Pythonic generators + iterators + let 1.8 generator expressions + expression closures 1.81 native JSON support 1.85 ECMAScript 5 compliance 1.86 more ES6 futures http://en.wikipedia.org/wiki/JavaScript#Version_history
- 15.
- 16. ES6 ⚈ Next worldwide web scripting language ⚈ Lots of new feature ⚈ Also called ECMAScript Harmony
- 17. Q&A ⚈ May Iuse today
- 18. Q&A ⚈ May Iuse today ⚈ Yes ⚈ Google is using (AngularJS 2.0)
- 19. ES5 You MayNot Know
- 20.
- 21.
- 22.
- 23.
- 24. let ⚈ Block scopelocal variable http://mdn.io/let
- 25. let {! let foo =100;! foo; // 100! }! ! foo; //undefined
- 26. let for (let i= 0; i < len; i++) {! // blah! }
- 27. const const foo =100;! foo; // 100! ! foo = 101;! ! foo; // 100
- 28. Template Literals var name= 'world';! ! var greeting = `hello ${name}`;! ! greeting; //hello world;
- 30. ` ⚈ Grave accent ⚈Back tick ⚈ Shell: execute command in between
- 31. Arrow Function var square= (x) => {! return x * x;! };! ! var square2 = x => x * x; http://mdn.io/arrow
- 32. Arrow Function // Emptyfunction body! var foo = (x) => {}! ! // Single parameter! var foo = x => {}! ! // No parameter! var foo = () => {}! ! // More parameters! var foo = (x, y) => {}
- 33. Arrow Function // Singleexpression! var foo = (x) => x*x! ! // Multiple expression! var foo = (x) => {! let y = x * x;! // need return! return y * x;! }
- 34. Arrow Function ⚈ Autoreturn result of single expression ⚈ Lexical this , like CoffeeScript
- 35. Default Parameter function foo(x= 5, y = 5) { }
- 36. Rest Parameters function foo(x= 5, ...rest) {! rest;! }! ! foo(1, 2, 3, 4, 5, 6);! // [2,3,4,5,6]
- 37. Spread Operator function f(x,y, z) { }! var args = [0, 1, 2];! ! f.apply(null, args);! ! f(...args);
- 38. Spread Operator var arg2= [...args, 3, 4];! // [0,1,2,3,4]! ! var arg3 = arg.push(...arg2);! // [0,1,2,0,1,2,3,4]
- 39. Destructing Assign var a,b;! ! [a, b] = [1, 2];! //a:1, b:2
- 40. Destructing Assign [a, b]= [b, a];! //swap! ! [a, ,[b, c]] = [1, 0, [2, 3]];! //a:1, b:2, c:3! ! {lan: a, lon: b} = getPOS();! //object destructing
- 41. Destructing and Spread [a,...b] = [1, 2, 3, 4, 5];! //a:1, b:[2,3,4,5]
- 42. Class class Counter {! constructor(){! this.count = 0;! }! tick() {! this.count++;! }! get count() {! return this.count;! }! }
- 43. Class Extends class Peopleextends Counter {! constructor(people) {! this.people = people;! for (let p in people) {! this.tick();! }! }! }! ! var p = new People([1,2,3,4,5]);! p.count; //5
- 44. Class ⚈ No multipleinheritance ⚈ Define property only in constructor
- 45. Map ⚈ Like object,{…} ⚈ Key, value pair data structure ⚈ Use non-string data as key ⚈ Native object’s key will use toString
- 46. Map m = newMap();! m.set(true, 'T');! m.set(false, 'F');! ! m.size; //2! ! m.get(true); //"T"! m.get(false); //"F"! ! m.get(1); // undefined
- 47. Map Methods clear has deletekeys entries set forEach values get
- 48. Set ⚈ Like array,[…] ⚈ Can’t get value at specific index ⚈ Use for…of
- 49. Set s = newSet();! s.add('A');! s.add('B');! s.add('C');! ! for (v of s) {! console.log(v);! }! // A, B ,C
- 50. Set Methods add forEach clearhas delete values entries
- 51.
- 52. for...of ⚈ New loopmethod ⚈ Like CoffeeScript’s for...in ⚈ Used to loop iterable object items
- 53.
- 54.
- 55.
- 56. Iterator ⚈ A newinterface in ES spec ⚈ User can implement custom iterator ⚈ An object with next method http://mdn.io/iterator
- 57. iterator.next ⚈ Return anobject with value and done! ⚈ value is next item’s value ⚈ done shows is this iterator finished ⚈ Can’t reuse
- 58. Iterator var it =idMaker();! ! console.log(it.next().value);! console.log(it.next().value);! console.log(it.next().value);
- 59. Generator ⚈ Like idMaker ⚈Generator is a function, generate iterator ⚈ Different invoke will create different iterator, iterate the same list.
- 60. Generator function idMaker() {! varindex = 0;! return {! next: function () {! return {! value: index++,! done: false! };! }! };! }
- 61. yield ⚈ yield isgenerator helper ⚈ Let you easy to create generator
- 62. yield function* idMaker(){! var index= 0;! while(true)! yield index++;! } http://mdn.io/generator
- 63. yield function* idMaker(){! var index= 0;! while(index < 6)! yield index++;! } http://mdn.io/generator
- 64. yield ⚈ * isthe indicator to tell runtime ⚈ yield is return point
- 65. yield function* idMaker(){! var index= 0;! while(index < 6)! yield index++;! } http://mdn.io/generator This is a generator
- 66. First Call function* idMaker(){! varindex = 0;! while(index < 6)! yield index++;! } http://mdn.io/generator return starts here
- 67. Second Call function* idMaker(){! varindex = 0;! while(index < 6)! yield index++;! } http://mdn.io/generator return starts here
- 68. yield ⚈ Function endwill return done: true
- 69. Iterable ⚈ Have generatorfunction in the object ⚈ Under @@iterator property
- 70. Iterable ID = {};! ! ID['@@iterator']= idMaker;! //or use Symbol! ID[Symbol.iterator] = idMaker;! ! for (id of ID) {! id;! //0,1,2,3,4,5! } http://people.mozilla.org/~jorendorff/es6-draft.html#table-1
- 71.
- 72.
- 73. Comprehension var ns =[1, 2, 3, 4];! ! var dbls = [for (i of ns) i*2];! ! dbls; // [2, 4, 6, 8] 簡約式
- 74. CoffeeScript Syntax arr =[1, 2, 3, 4];! ! res = (x for x in arr);
- 75. 2 Level Comprehension varms = [1, 2, 3, 4];! var ns = [2, 3, 4, 5];! ! [for (i of ms) for (j of ns) i*j];! // [2, 6, 12, 20]
- 76. Conditional Comprehension var ns= [1, 2, 3, 4];! ! [for (i of ns) if (i % 2) i];! //[1, 3]
- 77. Comprehension for Iterator varns = [1, 2, 3, 4];! ! (for (i of ns) if (i % 2) i);! //iterator with values [1, 3]
- 78. more… ⚈ Object LiteralExtensions ⚈ Proxy ⚈ Modules, Import, Export ⚈ Promise ⚈ Symbol
- 79.
- 81.
- 83.
- 84. ES6 for Web ⚈Precompile ES6 to ES5 ⚈ traceur-compiler ⚈ from Google ⚈ AngularJS 2.0 https://github.com/google/traceur-compiler
- 86. in Develop ⚈ Needwatch and compile when file changes ⚈ Use gulp to watch ⚈ gulp-traceur or es6ify to compile ⚈ https://github.com/othree/es6-skeleton
- 87. es6-skeleton ⚈ A projectseed ⚈ Based on gulp ⚈ browserify, es6ify ⚈ livereload
- 88. ECMAScript 7,8… Use ES6Today Conclusion
- 89. ES.future ES7 ES8 guards macros contracts parallelarrays (SIMD) event loop concurrency http://www.2ality.com/2011/09/es6-8.html
- 90.
- 91. Type ⚈ First seein ActionScript
- 92.
- 93. Type ⚈ TypeScript alsohas type imply syntax
- 97. Type in ES.future ⚈Called guards
- 98. let x ::Number = 37;! ! function f(p :: Int) :: cType {}! ! let o = {! a :: Number : 42,! b: “b"! };
- 99. let x ::Number = 37;! ! function f(p :: Int) :: cType {}! ! let o = {! a :: Number : 42,! b: “b"! };
- 100. Benefit ⚈ Write moresolid code ⚈ Better Performance ⚈ JS engine detects variable type change now ⚈ JSLint: confusion: true http://www.html5rocks.com/en/tutorials/speed/v8/
- 101. Where is newSpec
- 102.
- 103.
- 104.
- 105. ES Wiki ⚈ strawman:pre proposal ⚈ harmony: TC39 approved proposal
- 106.
- 107.
- 108. Conclusion ⚈ ES6 iscoming ⚈ You can use it today ⚈ Get ready for ES7, 8, 9, 10, 11
- 109.