Firefox | 41% - 65% |
---|---|
Chrome | 44% |
Safari | 20% |
IE | 15% |
Babel | 76% |
---|---|
Firefox | 41% - 65% |
Chrome | 44% |
Safari | 20% |
IE | 15% |
https://github.com/lukehoban/es6features
_.forEach(events, function(item) {
if (!item.author) {
item.author = profileResource.get({id: item.author_id});
}
});
_.forEach(events, item => {
if (!item.author) {
item.author = profileResource.get({id: item.author_id});
}
});
(share the this / like in coffee script)
class SkinnedMesh extends THREE.Mesh {
constructor(geometry, materials) {
super(geometry, materials);
this.idMatrix = SkinnedMesh.defaultMatrix();
}
update(camera) {
super.update();
}
get boneCount() {
return this.bones.length;
}
set matrixType(matrixType) {
this.idMatrix = SkinnedMesh[matrixType]();
}
static defaultMatrix() {
return new THREE.Matrix4();
}
}
Heavily discussed if this heaven or hell
var obj = {
// __proto__
__proto__: theProtoObj,
// Shorthand for ‘handler: handler’
handler,
// Methods
toString() {
// Super calls
return "d " + super.toString();
},
// Computed (dynamic) property names
[ 'prop_' + (() => 42)() ]: 42
};
Wow, I can update toString() and write the prototype directly
Oh, and dynamic properties
template: [
'<div class="attachments" ng-if="attachment">',
'<img class="attachments-selection" ng-src="{{ attachment.url }}">',
'<span ng-if="editing" ng-click="deleteAttachment(1)">Löschen</span>',
'<div class="attachments-preview" ng-repeat="attachment in attachments" ng-if="preview">',
'<img ng-src="{{ attachment.url }}" ng-click="selectAttachment($index)" >',
'<span ng-if="editing" ng-click="deleteAttachment($index)">Löschen</span>',
'</div>',
'</div>'
].join(''),
template: `<div class="attachments" ng-if="attachment">
<img class="attachments-selection" ng-src="{{ attachment.url }}">
<span ng-if="editing" ng-click="deleteAttachment(1)">Löschen</span>
<div class="attachments-preview" ng-repeat="attachment in attachments" ng-if="preview">
<img ng-src="{{ attachment.url }}" ng-click="selectAttachment($index)" >
<span ng-if="editing" ng-click="deleteAttachment($index)">Löschen</span>
</div>
</div>`
no more ['<div>', '</div'>].join('')
template: [
'<div class="attachments">',
'<p> x is ' + x + '!</p>',
'</div>'
].join(''),
template: `
<div class="attachments">
<p> x is ${ x }!</p>
</div>`
In a non angular context
// list matching
var [a, , b] = [1,2,3];
// object matching
var { op: a, lhs: { op: b }, rhs: c }
= getASTNode()
// object matching shorthand
// binds `op`, `lhs` and `rhs` in scope
var {op, lhs, rhs} = getASTNode()
// Can be used in parameter position
function g({name: x}) {
console.log(x);
}
g({name: 5})
Can you hear the haskell?
// Fail-soft destructuring
var [a] = [];
a === undefined;
// Fail-soft destructuring with defaults
var [a = 1] = [];
a === 1;
// Array comprehensions
var results = [
for(c of customers)
if (c.city == "Seattle")
{ name: c.name, age: c.age }
]
Well, kinda like in haskell
This is an experimental feature in babel
function f(x, y=12) {
// y is 12 if not passed (or passed as undefined)
return x + y;
}
f(3) == 15
function f(x, ...y) {
// y is an Array
return x * y.length;
}
f(3, "hello", true) == 6
function f(x, y, z) {
return x + y + z;
}
// Pass each elem of array as argument
f(...[1,2,3]) == 6
function f() {
{
let x;
{
// okay, block scoped name
const x = "sneaky";
// error, const
x = "foo";
}
// error, already declared in block
let x = "inner";
}
}
Not the heroes we wanted, but the ones we needed
var foo = {
background: '#263238'
}, bar = {
color: 'red'
}, foobar = {foo, bar};
See you next campfire :)
// lib/mathplusplus.js
export * from "lib/math";
export const e = 2.71828182846;
export default function(x) {
return Math.exp(x);
}
// app.js
import exp, {pi, e} from "lib/mathplusplus";
alert("2π = " + exp(pi, e));
like in AMD or Common.js <= default for babel
System.import('lib/math').then(function(m) {
alert("2π = " + m.sum(m.pi, m.pi));
});
var loader = new Loader({
global: fixup(window) // replace ‘console.log’
});
loader.eval("console.log('hello world!');");
Dynamic loading – ‘System’ is default loader
Create execution sandboxes - new Loader
// Sets
var s = new Set();
s.add("hi").add("bye").add("hi");
s.size === 2;
s.has("hi") === true;
// Maps
var m = new Map();
m.set("hello", 42);
m.set(s, 34);
m.get(s) == 34;
// Weak Sets
var ws = new WeakSet();
ws.add({ data: 42 });
// Weak Maps
var wm = new WeakMap();
wm.set(s, { extra: 42 });
wm.size === undefined
And their weak counterparts
Because the object has no reference it will not be held in the set/map
// Proxying a function object
var target = function () { return 'I am the target'; };
var handler = {
apply: function (receiver, ...args) {
return 'I am the proxy';
}
};
var p = new Proxy(target, handler);
p() === 'I am the proxy';
Also for objects