Standardization
⚈ Standard script language running on browser
⚈ Host by ECMA
Slide 7
Slide 7 text
ECMA
₭ᇝểₔ⚧ᄯഅ⇐
Slide 8
Slide 8 text
ECMAScript
⚈ Standard of JavaScript
⚈ ECMA-262, also called ECMAScript
⚈ 1.0, 2.0 published around 1997-1998
⚈ Current Edition: 5.1
http://zh.wikipedia.org/wiki/ECMAScript
Slide 9
Slide 9 text
History
⚈ Browser War
⚈ ES3 most supported
⚈ ES4 abandoned
⚈ ES5 current
⚈ ES6 talking today
1999
2009
2014
Slide 10
Slide 10 text
ES3
⚈ Most supported
⚈ IE6, 7, 8
Slide 11
Slide 11 text
ES4
⚈ Flash, ActionScript
⚈ Abandoned
Slide 12
Slide 12 text
ES5
⚈ From 3.1
⚈ Strict mode
⚈ More solid spec
Slide 13
Slide 13 text
What is ES Now
⚈ ECMAScript is spec
⚈ JavaScript is implementation by Mozilla
⚈ IE’s: JScript
⚈ Host by ECMA International
Slide 14
Slide 14 text
JavaScript
1.5 ECMAScript 3
1.6 array 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
Slide 15
Slide 15 text
New in JavaScript
https://developer.mozilla.org/en-US/docs/Web/JavaScript/New_in_JavaScript
Slide 16
Slide 16 text
ES6
⚈ Next world wide web scripting language
⚈ Lots of new feature
⚈ Also called ECMAScript Harmony
Slide 17
Slide 17 text
Q&A
⚈ May I use today
Slide 18
Slide 18 text
Q&A
⚈ May I use today
⚈ Yes
⚈ Google is using (AngularJS 2.0)
Slide 19
Slide 19 text
ES5 You May Not
Know
Slide 20
Slide 20 text
http://youtu.be/UTEqr0IlFKY
Slide 21
Slide 21 text
ES6 Features
Slide 22
Slide 22 text
Major Features
Module Class
Iterator Syntax
Slide 23
Slide 23 text
Syntax
History
Iterator
Slide 24
Slide 24 text
let
⚈ Block scope local variable
http://mdn.io/let
Slide 25
Slide 25 text
let
{!
let foo = 100;!
foo; // 100!
}!
!
foo; //undefined
Template Literals
var name = 'world';!
!
var greeting = `hello ${name}`;!
!
greeting; //hello world;
Slide 29
Slide 29 text
No content
Slide 30
Slide 30 text
`
⚈ Grave accent
⚈ Back tick
⚈ Shell: execute command in between
Slide 31
Slide 31 text
Arrow Function
var square = (x) => {!
return x * x;!
};!
!
var square2 = x => x * x;
http://mdn.io/arrow
Slide 32
Slide 32 text
Arrow Function
// Empty function body!
var foo = (x) => {}!
!
// Single parameter!
var foo = x => {}!
!
// No parameter!
var foo = () => {}!
!
// More parameters!
var foo = (x, y) => {}
Slide 33
Slide 33 text
Arrow Function
// Single expression!
var foo = (x) => x*x!
!
// Multiple expression!
var foo = (x) => {!
let y = x * x;!
// need return!
return y * x;!
}
Slide 34
Slide 34 text
Arrow Function
⚈ Auto return result of single expression
⚈ Lexical this , like CoffeeScript
Class
class Counter {!
constructor() {!
this.count = 0;!
}!
tick() {!
this.count++;!
}!
get count() {!
return this.count;!
}!
}
Slide 43
Slide 43 text
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
Slide 44
Slide 44 text
Class
⚈ No multiple inheritance
⚈ Define property only in constructor
Slide 45
Slide 45 text
Map
⚈ Like object, {…}
⚈ Key, value pair data structure
⚈ Use non-string data as key
⚈ Native object’s key will use toString
Map Methods
clear has
delete keys
entries set
forEach values
get
Slide 48
Slide 48 text
Set
⚈ Like array, […]
⚈ Can’t get value at specific index
⚈ Use for…of
Slide 49
Slide 49 text
Set
s = new Set();!
s.add('A');!
s.add('B');!
s.add('C');!
!
for (v of s) {!
console.log(v);!
}!
// A, B ,C
Slide 50
Slide 50 text
Set Methods
add forEach
clear has
delete values
entries
Slide 51
Slide 51 text
for…of
Slide 52
Slide 52 text
for...of
⚈ New loop method
⚈ Like CoffeeScript’s for...in
⚈ Used to loop iterable object items
Slide 53
Slide 53 text
Iterable
Array String
Map Set
Slide 54
Slide 54 text
Create Custom
Iterable Object
Slide 55
Slide 55 text
Iterator
Syntax
Use ES6 Today
Slide 56
Slide 56 text
Iterator
⚈ A new interface in ES spec
⚈ User can implement custom iterator
⚈ An object with next method
http://mdn.io/iterator
Slide 57
Slide 57 text
iterator.next
⚈ Return an object with value and done!
⚈ value is next item’s value
⚈ done shows is this iterator finished
⚈ Can’t reuse
Slide 58
Slide 58 text
Iterator
var it = idMaker();!
!
console.log(it.next().value);!
console.log(it.next().value);!
console.log(it.next().value);
Slide 59
Slide 59 text
Generator
⚈ Like idMaker
⚈ Generator is a function, generate iterator
⚈ Different invoke will create different iterator,
iterate the same list.
Slide 60
Slide 60 text
Generator
function idMaker() {!
var index = 0;!
return {!
next: function () {!
return {!
value: index++,!
done: false!
};!
}!
};!
}
Slide 61
Slide 61 text
yield
⚈ yield is generator helper
⚈ Let you easy to create generator
Slide 62
Slide 62 text
yield
function* idMaker(){!
var index = 0;!
while(true)!
yield index++;!
}
http://mdn.io/generator
Slide 63
Slide 63 text
yield
function* idMaker(){!
var index = 0;!
while(index < 6)!
yield index++;!
}
http://mdn.io/generator
Slide 64
Slide 64 text
yield
⚈ * is the indicator to tell runtime
⚈ yield is return point
Slide 65
Slide 65 text
yield
function* idMaker(){!
var index = 0;!
while(index < 6)!
yield index++;!
}
http://mdn.io/generator
This is a generator
Slide 66
Slide 66 text
First Call
function* idMaker(){!
var index = 0;!
while(index < 6)!
yield index++;!
}
http://mdn.io/generator
return
starts here
Slide 67
Slide 67 text
Second Call
function* idMaker(){!
var index = 0;!
while(index < 6)!
yield index++;!
}
http://mdn.io/generator
return
starts here
Slide 68
Slide 68 text
yield
⚈ Function end will return done: true
Slide 69
Slide 69 text
Iterable
⚈ Have generator function in the object
⚈ Under @@iterator property
Slide 70
Slide 70 text
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
Slide 71
Slide 71 text
Iterable Features
Slide 72
Slide 72 text
for…of
Slide 73
Slide 73 text
Comprehension
var ns = [1, 2, 3, 4];!
!
var dbls = [for (i of ns) i*2];!
!
dbls; // [2, 4, 6, 8]
ᾏ≌ൔ
Slide 74
Slide 74 text
CoffeeScript Syntax
arr = [1, 2, 3, 4];!
!
res = (x for x in arr);
Slide 75
Slide 75 text
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]
Slide 76
Slide 76 text
Conditional Comprehension
var ns = [1, 2, 3, 4];!
!
[for (i of ns) if (i % 2) i];!
//[1, 3]
Slide 77
Slide 77 text
Comprehension for Iterator
var ns = [1, 2, 3, 4];!
!
(for (i of ns) if (i % 2) i);!
//iterator with values [1, 3]