</lylijincheng>

ES6 Examples

Source: tagtree.io/courses/expert-es6/do

Arrow functions

1
2
3
4
5
6
7
8
9
let func = (x,y) => x + y;

let func = (x,y) => {
    let result = x + y;

    console.log('calculated result as ', result);

    return result;
}

Arrow scope

1
2
3
4
5
6
7
8
9
10
function sayHello(){
    this.name = 'hendrik';

    setTimeout(()=>{
        console.log('hello ' + this.name);
    }, 1500);
}

sayHello();
//output: 'hello hendrik'

String templates

1
2
3
4
function sayHello(name, surname){
    console.log(`hello there ${name} ${surname}.
    The time is now     ${new Date()}`);
}

Let scope

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var name = 'Fido';
var breed = 'schnauzer';
var owners = ['Hendrik', 'Alice'];

console.log(`${name} (${breed}):`);
for(let i = 0; i < owners.length; i++){
    let name = owners[i];
    console.log('Owner ' + name);
}

console.log(name);

//output:
//Fido (schnauzer):
//Owner Hendrik
//Owner Alice
//Fido

Destructuring arrays

1
2
3
4
5
6
let positions = ['Guy that won the race', 'Runner up', 'Third guy'];

let [winner,runnerUp] = positions;

// winner === 'Guy that won the race'
// runnerUp === 'Runner up'

Destructuring objects

1
2
3
4
5
6
7
8
9
function sayHello(args){
    let {firstName: name, lastName: surname, message: message} = args;

    console.log(`${message} ${name} ${surname}`);
}

sayHello({firstName: 'Hendrik', lastName: 'Swanepoel', message: 'Hi there '});

//output: Hi there Hendrik Swanepoel

Object literals

1
2
3
4
5
6
7
let genre = 'Alternative';
let band = 'Radiohead';

let searchRequest = {
    genre,
    band
};

Default args

1
2
3
function ajax(url, method='GET'){
    //do some xhr magic here
}

Spread operator

1
2
3
4
5
6
7
function sayHello(name, surname){

}

let args = ['Thom', 'Yorke'];

sayHello(...args);

Classes

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
class Album {
    constructor(currentSales) {
        this.sales = currentSales;
    }

    recordSales(nr) {
        this.sales+= nr;
    }
}

let album = new Album(50);

album.recordSales(5);

console.log(album.sales);

//output: 55

Class inheritance

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
class Ball {
    constructor(colour) {
        this.colour = colour
    }

    getShape() {
        return "round";
    }

    kick() {
        return "fly in opposite direction of foot";
    }
}

// The super keyword allows you to call the 
// corresponding function on the class you are extending.
class RugbyBall extends Ball {
    constructor(colour) {
        super(colour);
    }

    getShape() {
        return "oval";
    }

    kick(contact) {
        if(contact == 'clean') {
            return super();
        }else {
            return "Some random direction";
        }
    }
}

let myBall = new RugbyBall('brown')

Generators

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// Tell the JS engine that the function is a generator function
function* generate5(){
    let i = 0;

    while(true){
        i += 5;

        yield i;
    }
}


let gen5 = generate5();

for(let i = 0; i < 10; i += 1){
    console.log(gen5.next().value);
}

Comments