almost 4 years ago

資料來源 http://www.es6fiddle.net/

Arrow Functions

let square = x => x * x;
let add = (a, b) => a + b;
let pi = () => 3.1415;

console.log(square(5)); // 25
console.log(add(3, 4)); // 7
console.log(pi()); // 3.1415

Block Scope

var x = 0;

for (let i = 0; i < 10; i++) {
    x += 10;
}

try {
    console.log(i);
} catch(e) {
    console.log(
        'i does not exist here!'
    );
}

// show i does not exist here!

Classes and Inheritance

class Polygon {
    constructor(height, width) { //class constructor
        this.name = 'Polygon';
        this.height = height;
        this.width = width;
    }

    sayName() { //class method
        console.log('Hi, I am a', this.name + '.');
    }
}

class Square extends Polygon {
    constructor(length) {
        super(length, length); //call the parent method with super
        this.name = 'Square';
    }

    get area() { //calculated attribute getter
        return this.height * this.width;
    }
}

let s = new Square(5);

s.sayName(); // Hi, I am a Square.
console.log(s.area); // 25

可參考 http://www.codedata.com.tw/javascript/es6-4-maximally-minimal-classes/

Default Parameters

function sayMsg(msg='This is a default message.') {
    console.log(msg);
}

sayMsg(); // This is a default message.
sayMsg('This is a different message!'); // This is a different message!

Destructured Assignment

let [one, two] = [1, 2];
let {three, four} = {three: 3, four:  4};

console.log(one, two, three, four); // 1 2 3 4

Generators

function* range(start, end, step) {
    while (start < end) {
        yield start;
        start += step;
    }
}

for (let i of range(0, 10, 2)) {
    console.log(i);
}

// 0
// 2
// 4
// 6
// 8

可參考 http://www.codedata.com.tw/javascript/es6-3-generator/

Iterators

let arr = [1, 2, 3, 4, 5];
let sum = 0;

for (let v of arr) {
    sum += v;
}

console.log('1 + 2 + 3 + 4 + 5 =', sum); // 1 + 2 + 3 + 4 + 5 = 15

Map

let x = new Map([[1, 'is a number key']]);
let today = new Date()

//anything can be a key
x.set(today.toString(), 111)
x.set(today, 222);
x.delete(today.toString());

console.log('The map contains', x.size, 'elements.'); // The map contains 2 elements.
console.log('The map has a today Date key:', x.has(today)); // The map has a today Date key: true
console.log('The map has a today string key:', x.has(today.toString())); // The map has a today string key: false

//values and keys
x.forEach((value, key, map) => console.log(value, key, map)); 
// is a number key 1 [object Map]
// 222 Thu Jan 14 2016 10:34:11 GMT+0800 (台北標準時間) [object Map]

//iterable
for (let value of x) {
  console.log(value);
}
// 1,is a number key
// Thu Jan 14 2016 10:35:08 GMT+0800 (台北標準時間),222

//iterable values
for (let value of x.values()) {
  console.log(value);
}
// is a number key
// 222

//iterable keys
for (let value of x.keys()) {
  console.log(value);
}
// 1
// Thu Jan 14 2016 10:36:42 GMT+0800 (台北標準時間)

//iterable entries (key, value)
for (let value of x.entries()) {
  console.log(value);
}
// 1,is a number key
// Thu Jan 14 2016 10:37:10 GMT+0800 (台北標準時間),222

Promises

var longFn = function() {
    return new Promise(function(res, rej) {
        setTimeout(res, 1000);
    });
};

var coolFn = function() {
    console.log('cool');
};

// logs cool after 1 second
longFn().then(coolFn); // cool

可參考 https://davidwalsh.name/promises

Rest Parameters

function format(str, ...args) {
    return str.replace(/\{\s*(\d+)\s*\}/g, function(m, n) {
        return args[n];
    });
}

let msg = format(
    'The {0}st arg is a string, the {1} are {2}.',
    1,
    'rest',
    'unknown'
);

console.log(msg); // The 1st arg is a string, the rest are unknown.

Set

let x = new Set([1, 2, 3, 4, 4, 4, 5]);

x.add(6);
x.delete(2);

console.log('The set contains', x.size, 'elements.'); // The set contains 5 elements.
console.log('The set has 1:', x.has(1)); // The set has 1: true
console.log('The set has 8:', x.has(8)); // The set has 8: false

//values and keys are the same in a set
x.forEach((value, key, set) => console.log(value, key, set));
/*
1 1 [object Set]
3 3 [object Set]
4 4 [object Set]
5 5 [object Set]
6 6 [object Set]
*/

//iterable
for (let value of x) {
  console.log(value);
}
/*
1
3
4
5
6
*/
//iterable values
for (let value of x.values()) {
  console.log(value);
}
/*
1
3
4
5
6
*/
//iterable keys
for (let value of x.keys()) {
  console.log(value);
}
/*
1
3
4
5
6
*/
//iterable entries (key, value)
for (let value of x.entries()) {
  console.log(value);
}
/*
1,1
3,3
4,4
5,5
6,6
*/

Spread Operator

function add(a, b) {
    return a + b;
}

let nums = [5, 4];

console.log(add(...nums)); // 9

Template Literals

let person = {name: 'John Smith'};
let tpl = `My name is ${person.name}.`;

console.log(tpl); // My name is John Smith.
← Chrome Console API 小技巧 設定 React ES6 環境 採用 Webpack 和 Babel →
 
comments powered by Disqus