ECMAScript 6 major changes

657 views

Published on

Published in: Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
657
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
5
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

ECMAScript 6 major changes

  1. 1. ECMAScript 6 Harmony
  2. 2. 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
  3. 3. 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”;
  4. 4. ‘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}; }
  5. 5. 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; }
  6. 6. 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; };
  7. 7. Default parameter • function (x=2) { } function Point7(x = 0, y = 0) { return { x: x, y: y }; } var p = Point7();
  8. 8. 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));
  9. 9. 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);
  10. 10. 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);
  11. 11. 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)];
  12. 12. 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, undefined console.log('c' in p, p.c); // false, 37
  13. 13. 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}.`;
  14. 14. Binary, octet, unicode literal • 0b010101 • 0o77 • 'u{1d306}' == 'ud834udf06'

×