ecmascript 6 major changes

14
ECMAScript 6 Harmony

Upload: hayato

Post on 06-May-2015

307 views

Category:

Technology


2 download

TRANSCRIPT

Page 1: ECMAScript 6 major changes

ECMAScript 6 Harmony

Page 2: ECMAScript 6 major changes

Major Changes• class, module

• ‘const’, ‘let’, destructuring

• for of

• Iterator and generator

• Default parameter

• Rest parameter and spread

• Arrow function

• Map, Set, WeakMap

• Array comprehension

• Proxy

• String extra, quasi-string literal

• Binary, octet, unicode literal

Page 3: ECMAScript 6 major changes

class, module• class, extends

• constructor

• super

• module

• import, export

import $ from “jQuery”;

module “point” { export class PointT extends Time { constructor(x, y, t) { super(t); public getX() { return x; } public getY() { return y; } } toString() { return '<' + this.getX() + ',' + this.getY() + '>'; } }}

import PointT from “point”;

Page 4: ECMAScript 6 major changes

‘const’, ‘let’, destructuring• const

• let

• [x, y] = [y, x]

function Point5(x, y) { const offset = 5; if (x < offset) { let y = 1; x += y; } [x, y] = [ x+offset, y + offset]; return {x: x, y: y};}

Page 5: ECMAScript 6 major changes

for of• for (n of [ 1, 2, 3, 4, 5]) function Point6(x, y) {

var r = [1, 2, 3, 4, 5, 6, 7, 8, 9]; for (n of r) { y = x + n; } return y;}

Page 6: ECMAScript 6 major changes

Iterator and generator • Iterator()

• #.next()

• yield

function Range(low, high) { this.low = low; this.high = high;}function RangeIterator(range) { this.range = range; this.current = this.range.low;}RangeIterator.prototype.next = function() { if (this.current > this.range.high) throw StopIteration; else return this.current++;};Range.prototype.__iterator__ = function() { return new RangeIterator(this);};

var range = new Range(3, 5);for (var i in range) console.log(i);

function Range(low, high){ this.low = low; this.high = high;}Range.prototype.__iterator__ = function(){ for (var i = this.low; i <= this.high; i++) yield i;};

Page 7: ECMAScript 6 major changes

Default parameter• function (x=2) { } function Point7(x = 0, y = 0) {

return { x: x, y: y };}

var p = Point7();

Page 8: ECMAScript 6 major changes

Rest parameter and spread• function (...z) { }

• [1, 2, 3, ...[5, 6, 7]]

• f(...[2, 4, 6])

function f(w, x, y, z) { return w * 1000 + x * 100 + y * 10 + z;}

function g(...v) { var w = v.length > 0 ? v[0] : 0; var x = v.length > 1 ? v[1] : 0; var y = v.length > 2 ? v[2] : 0; var z = v.length > 3 ? v[3] : 0; return w * 1000 + x * 100 + y * 10 + z;}

var p = [2, 4, 6];var q = [5, 7, ...p];

console.log(f(2,4,6,0));console.log(g(2,4,6));console.log(g(...q));

Page 9: ECMAScript 6 major changes

Arrow function• function (a, b) { return a * b; }

• (a, b) => { a * b; }

• (a, b) => a * b;

• x => x * 3;

• () => {};

let empty = () => {}; let identity = x => x; let square = x => x * x; let key_maker = val => ({key: val}); let odds = evens.map(v => v + 1); let fives = [];nats.forEach(v => { if (v % 5 === 0) fives.push(v); }); const obj = { method: function () { return () => this; }};assert(obj.method()() === obj);

Page 10: ECMAScript 6 major changes

Map, Set, WeakMap• new Map()

• new Set()

• new WeakMap()

var m = new Map();var s = new Set();var w = new WeakMap();

var ko = {}, kf = function(){};

m.set(ko “object”);m.set(kf, “function”);m.set(“a”, “string”);m.size == 3;m.get(“a”);m.get(ko);m.get(kf);

s.set(5);s.set(“string”);s.size == 2;s.has(5);for (var n of s) console.log(n);

Page 11: ECMAScript 6 major changes

Array comprehension• [n for (n of [5, 6, 7])] var a = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

var b = [n*2 for (n of a)];

var c = [n for (n of a) if (n % 2)];

var d = [i+j for (i of a) for (j of a)];

Page 12: ECMAScript 6 major changes

Proxy• new Proxy({}, {}) var handler = {

get: function(target, name){ return name in target? target[name] : 37; }};

var p = new Proxy({}, handler);p.a = 1;p.b = undefined;

console.log(p.a, p.b); // 1, undefinedconsole.log('c' in p, p.c); // false, 37

Page 13: ECMAScript 6 major changes

String extra, quasi-string literal• startsWith

• endsWith

• contains

• toArray

• f`hello ${name}`

var s = “String extra, quasi-string literal”;

s.startsWith(“String”) == true;s.endsWith(“literal”) == true;s.contains(“quasi”) == true;s.toArray();

function f(s) { console.log(s); return s;}

var name = “everyone”;f`hello ${name}.`;

Page 14: ECMAScript 6 major changes

Binary, octet, unicode literal• 0b010101

• 0o77

• '\u{1d306}' == '\ud834\udf06'