ecmascript 6 major changes
TRANSCRIPT
ECMAScript 6 Harmony
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
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”;
‘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};}
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;}
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;};
Default parameter• function (x=2) { } function Point7(x = 0, y = 0) {
return { x: x, y: y };}
var p = Point7();
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));
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);
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);
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)];
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
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}.`;
Binary, octet, unicode literal• 0b010101
• 0o77
• '\u{1d306}' == '\ud834\udf06'