What’s new in ECMAScript 6.0

const PI = 3.14159;
// Can't re-assign
PI = 3;
console.log(PI); // 3.14159
// Can't re-initialize
const PI = 4;
// Can't re-declare
var PI = 4;

var name = "Eyal";
var age = 43;
var user = {
'name': name,
'age': age
};
var name = "Eyal";
var age = 43;
var user = { name, age };

var [start, end] = ["earth", "moon"] // initialize
console.log(start + " => " + end); // earth => moon
[start, end] = [end, start] // swapping
console.log(start + " => " + end); // moon => earth
function equinox() { return [20, "March", 2013, 11, 02]; }
var [date, month, , ,] = equinox();
console.log( date +" "+ month); // 20 March

function history( lang = "C", year = 1972 ) {
return lang + " was created around the year " + year;
}

// defining rest parameters with 3 dot syntax
function push(array, ...items) {
items.forEach(function(item) {
array.push(item);
console.log( item );
});
}
// 1 fixed + 3 variable parameters
var planets = [];
push(planets, "Mercury", "Venus", "Earth");

// Spread operator "...weblink"
function createURL (comment, path, protocol, subdomain, domain, tld)
{
// ...
}
var weblink = ["ht/w/abc.html", "http", "info", "cern", "ch"],
comment = "World's first Website";
createURL( comment, ...weblink );
Spread
operator

var PageHandler = {
id: "123456",
init: function() {
document.addEventListener("click",
event => this.doSomething(event.type), false);
},
console.log("Handling "+type+" for " + this.id);
}
};

class Answer(){
constructor(value){ this._val = value; }
get(){ return this._val; }
}

class Person {
constructor(name, age){
public name = name;
public age = age;
}
sayName(){
alert(this.name);
}
getOlder(years){
this.age += years;
}
}
this.name = name;
this.age = age;
}
Person.prototype.sayName =
function(){
alert(this.name);
};
Person.prototype.getOlder =
function(years){
this.age += years;
};

class Person {
public name = name;
private age = age;
}
sayName(){
alert(this.name);
}
getOlder(years){
private(this).age+= years;
}
}

class Person {
private innerTitle = "";
// getter and setter for title property.
get title() { return innerTitle; }
set title(value){ innerTitle = value; }
}
}

class Answer{
}
class FirmAnswer extends Answer {
constructor(value){ super(value); }
get(){ return super() + "!!"; }
}

class Answer{
}
class FirmAnswer extends Answer {
constructor(value){ super(value); }
get(){ return super() + "!!"; }
}
// ES 5.0
function FirmAnswer(name, age){
Answer.call(this, name, age);
}
FirmAnswer.prototype = new Answer();

class Answer{
}
class FirmAnswer prototype Answer {
constructor(value){
super(value);
}
get(){
return super() + "!!";
}
}

var engines = new Set(); // create new Set
engines.add("Webkit");
engines.add("Hippo");
engines.add("Hippo"); // note that Hippo is added twice
console.log(engines.has("Hippo")); // true
console.log(engines.has("Indigo")); // false
engines.delete("Hippo"); // delete item
console.log(engines.has("Hippo")); // false

var es6 = new Map(); // create new Map
es6.set(262, "standard"); // key is number
es6.set(undefined, "nah"); // key is undefined
var hello = function () { console.log("hello"); };
es6.set(hello, "Hello ES6!"); // key is function
console.log( es6.has("edition")); // true

var key = {},
map = new WeakMap();
map.set(key, "Hello!");
// Dereference the key so the value is also removed
key = null;

Array = [ value for each ( variable in values ) condition ];

//original array
var numbers = [0,1,2,3,4,5,6,7,8,9,10];
//just copy all items into a new array
var duplicate = [i for each (i in numbers)];
//get just the even numbers
var evens = [i for each (i in numbers) if (i % 2 == 0)];
//multiply every value by 2
var doubled = [i*2 for each (i in numbers)];
//multiply every odd number by 3
var tripledOdds =
[ i*3 for each (i in numbers) if ( i % 2 > 0 ) ];

var Size = new StructType(
{
width: uint32,
height: uint32
});
uint8 , uint16 , uint32
int8 , int16 , int32
float32, float64

var Size = new StructType({width:uint32, height:uint32 });
var SizeArray = new ArrayType(Size, 2);
Array
Type
Array
Size

let arr = [ "blue", "green" ];
arr.notAnIndex = 123;
Array.prototype.protoProp = 456;
for (k in arr) console.log(k);
Print:
> 0
> 1
> notAnIndex
> protoProp

var colors = new Set(['rojo', 'amarillo', 'azul']);
colors.language = 'es'; // add an expando property
for (let name in colors)
alert(name); // "language" (the property name)
for (let word of colors)
alert(word); // "rojo", "amarillo", "azul" (the data)

import items from "@iter";
let obj = { first: "Jane", last: "Doe" };
for ( let [k,v] of items(obj) ) {
console.log( k + " = " + v );
}
Output:
first = Jane
last = Doe

Function* simpleGenerator(){
yield "Hello";
yield "World";
for (var i = 0; i < 2; i++)
yield i;
}
var g = simpleGenerator();
print(g.next()); // "Hello"
print(g.next()); // "World"
print(g.next()); // 0
print(g.next()); // 1

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;
};
var range = new Range(3, 5);
for (var i in range)
print(i); // 3, 4, 5 in sequence

module E4D {
//export this stuff
export let myobj = {};
export function hello(){
alert("hello"); };
//keep this stuff hidden
function goodbye(){
//...
}
}
//import just myobject
import myobj from E4D;
console.log(myobj);
//import everything
import * from E4D;
console.log(myobj);
console.log(hello);
//explicitly named imports
import {myobj, hello} from E4D;
console.log(myobj);
console.log(hello);
// use module directly
console.log(MyModule.hello);

module MyModule from "mymodule.js";
import myobject from MyModule;
blocking

var p = Proxy.create( {} ,{
get: function (target, name){
return 'Hello, '+ name;}
});
document.write( p.World ); // print 'Hello, World'

Operation Intercepted as
proxy[name] handler.get(proxy, name)
proxy[name] = val handler.set(proxy, name, val)
name in proxy handler.has(name)
delete proxy[name] handler.delete(name)
for (var name in proxy) {...} handler.iterate()
Object.keys(proxy) handler.keys()

getOwnPropertyDescriptor:
function(name) -> PropertyDescriptor | undefined
getPropertyDescriptor:
function(name) -> PropertyDescriptor | undefined
getOwnPropertyNames: function() -> [ string ]
getPropertyNames: function() -> [ string ]
defineProperty: function(name, propertyDescriptor) -> any
delete: function(name) -> boolean
fix: function() -> { string: PropertyDescriptor } | undefined

// Object.getOwnPropertyDescriptor(proxy, name)
// Object.getPropertyDescriptor(proxy, name) (not in ES5)
// Object.getOwnPropertyNames(proxy)
// Object.getPropertyNames(proxy) (not in ES5)
// Object.defineProperty(proxy,name,pd)
// delete proxy.name
// Object.{freeze|seal|preventExtensions}(proxy)

has: function(name) -> boolean
hasOwn: function(name) -> boolean
get: function(receiver, name) -> any
set: function(receiver, name, val) -> boolean
enumerate: function() -> [string]
keys: function() -> [string]

Proxy.createFunction( handler, callTrap, constructTrap );
// proxy() -> callTrap
// new proxy() -> constructTrap | callTrap
var fp = Proxy.createFunction({}, callTrap);
var o = { name: fp };
o.name(x); // reified as callTrap.apply(o,[x])

var name = "Eyal",
Expression
msg = `Hello, ${name}!`;
console.log(msg); // "Hello, Eyal!"

// calculation expression sample
var total = 30,
msg = `The total is ${total} (${total*1.05} with tax)`;
console.log(msg); // "The total is 30 (31.5 with tax)"

// HTML escaping sample
url = "http://e4d.com/";
message = query = "Hello & Goodbye";
color = "red";
safehtml`<a href="${url}?q=${query}" onclick= alert(${message})
style="color: ${color}"> ${message} </a>`
<a href="http://e4d.com/?q=Hello%20%26%20Goodbye"
onclick=alert('Hello x26 Goodbye') style="color: red">Hello &
Goodbye</a>
url = "javascript:alert(1337)";
color = "expression(alert(1337))";
<a href="#innocuous?q=Hello%20%26%20Goodbye"
onclick=alert('Hello x26 Goodbye') style="color: innocuous">Hello &
Goodbye</a>

http://www.2ality.com/
Kit Cambridge
A Few New Things Coming To JavaScript
HARMONY OF DREAMS COME TRUE
Harmony specification_drafts

eyalvardi.wordpress.com

What’s new in ECMAScript 6.0

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à What’s new in ECMAScript 6.0

Similaire à What’s new in ECMAScript 6.0 (20)

Plus de Eyal Vardi

Plus de Eyal Vardi (20)

Dernier

Dernier (20)

What’s new in ECMAScript 6.0