ES6

var me = this;
service.getData()
    .then(function (data) {
        me.data = data;
    });

Arrow functions

service.getData()
    .then(data => {
        this.data = data;
    });
function MyClass() {
    MySuperClass.call(this);
}
MyClass.prototype = Object.create(MySuperClass.prototype);
MyClass.prototype.doStuff = function () {
    MySuperClass.prototype.doStuff.call(this);
}
MyClass.doStaticStuff = function () { ... }

Classes

class MyClass extends MySuperClass {
    constructor() {
        super();
    }
    doStuff() {
        super.doStuff();
    }
    static doStaticStuff() { ... }
}
function doStuff(name) {
    var a = 1;
    var b = 2;
    var data = {
        a: a,
        b: b,
    };

    data[name] = 'Demo';
    return data;
}

Objects

function doStuff(name) {
    var a = 1;
    var b = 2;
    return {
        a,
        b,
        [name]: 'Demo'
    };
}
  
function helloWorld(name) {
    return 'Hello ' + name + '!';
}

Template strings

function helloWorld(name) {
    return `Hello ${name}!`;
}
var result = doStuff();
var a = result[0];
var b = result[2];

Destructuring assignment

var [a, , b] = doStuff();
var result = doStuff();
var a = result.a;
var b = result.b;
var {a, b} = doStuff();
function helloWorld(name) {
    return 'Hello ' + (name || 'world') + '!';
}

function doStuff(a, b) {
    var cs = Array.prototype.slice.call(arguments, 2);
}

Function parameters

function helloWorld(name = 'world') {
    return `Hello ${name}!`;
}

function doStuff(a, b, ...cs) {

}
var data;
if (demo) {
    data = calculateStuff();
    return data;
} else {
    data = calculateOtherStuff();
    return data;
}

Proper variable scoping

if (demo) {
    let data = calculateStuff();
    return data;
} else {
    let data = calculateOtherStuff();
    return data;
}
var _ = require('lodash');
var DoStuffService = require('./stuff/DoStuffService');

module.exports = {
    demo: ...,
    demo2: ...
};

Modules

import _ from 'lodash';
import DoStuffService from './stuff/DoStuffService';

export var demo1 = ...;

export var demo2 = ...;
import {demo1, demo2} from './demo';


export default class Demo3 {
    ...
}
var demo1 = {};
var demo2 = {};

var map = {};
map[demo1] = 1;
map[demo2] = 2;

console.log(map[demo1]); // 2

Real maps/sets

var demo1 = {};
var demo2 = {};

var map = new Map();
map.set(demo1, 1);
map.set(demo2, 2);

console.log(map.get(demo1)); // 1

http://babeljs.io

 

https://github.com/lukehoban/es6features

import React from "react";
import md5 from "md5";

export default class Gravatar extends React.Component {
    getUrl() {
        var hash = md5.digest_s(this.props.email.toLocaleLowerCase());
        var size = Math.ceil(this.props.size * (window.devicePixelRatio || 1));
        return `https://secure.gravatar.com/avatar/${hash}?d=mm&s=${size}`;
    }

    render() {
        return (
            <img src={this.getUrl()}/>
        );
    }
}
function(module, exports, __webpack_require__) {
  var React = _interopRequire(__webpack_require__(1));
  var md5 = _interopRequire(__webpack_require__(81));
  var Gravatar = (function (_React$Component) {
    function Gravatar() {
      _classCallCheck(this, Gravatar);

      if (_React$Component != null) {
        _React$Component.apply(this, arguments);
      }
    }

    _inherits(Gravatar, _React$Component);

    _prototypeProperties(Gravatar, null, {
      getUrl: {
        value: function getUrl() {
          var hash = md5.digest_s(this.props.email.toLocaleLowerCase());
          var size = Math.ceil(this.props.size * (window.devicePixelRatio || 1));
          return "https://secure.gravatar.com/avatar/" + hash + "?d=mm&s=" + size;
        },
        writable: true,
        configurable: true
      },
      render: {
        value: function render() {
          return React.createElement("img", { src: this.getUrl() });
        },
        writable: true,
        configurable: true
      }
    });

    return Gravatar;
  })(React.Component);

  module.exports = Gravatar;
}

ES6

By Bo Gotthardt

Made with Slides.com

ES6

  • 909

More from Bo Gotthardt