ES6特徵 (一)

Constants常量

const PI = 3.1415926
PI > 3.0

Scoping做用域

Block-Scoped Variables

for (let i = 0; i < a.length; i++) {
       let x = a[i]
       …
   }
   
   console.log(i); //i is not defined
   
   for (let i = 0; i < b.length; i++) {
       let y = b[i]
       …
   }
   
   let callbacks = []
   for (let i = 0; i <= 2; i++) {
       callbacks[i] = function () { return i * 2 }
   }
   callbacks[0]() === 0 //true
   callbacks[1]() === 2 //true
   callbacks[2]() === 4 //true

Block-Scoped Functions

{
       function foo () { return 1 }
       foo() === 1
       {
           function foo () { return 2 }
           foo() === 2
       }
       foo() === 1
   }

Arrow Functions箭頭函數

Expression Bodies

v => v+1
    //ES5
    function(v){ return v+1;}

Statement Bodies

v => {
        if(v%5 === 0)
            fives.push(v)
    }
    //ES5
    function(v){
        if(v % 5 === 0)
            fives.push(v);
    }

Lexical this 不綁定this

var OBJ = function(){
        this.nums = [1,2,10,15,20,23,25,100];
        this.fives = [];
        this.nums.forEach( v => {
            if( v%5 === 0 )
                this.fives.push(v);
        })
    }

    //es5
    var OBJ = function(){
        this.nums = [1,2,10,15,20,23,25,100];
        this.fives = [];
        var self = this;
        this.nums.forEach( function(v) {
            if( v%5 === 0 )
                self.fives.push(v);
        });
    }

Extended Parameter Handling

Default Parameter Values 參數默認值

function f (x, y = 7, z = 42) {
        return x + y + z
    }
    f(1) === 50
    
    //es5
    function f (x, y, z) {
        if (y === undefined)
            y = 7;
        if (z === undefined)
            z = 42;
        return x + y + z;
    };
    f(1) === 50;

Rest Parameter 剩餘參數

function f (x, y, ...a) {
        return (x + y) * a.length
    }
    f(1, 2, "hello", true, 7) === 9
    
    //es5
    function f (x, y) {
        var a = Array.prototype.slice.call(arguments, 2);
        return (x + y) * a.length;
    };
    f(1, 2, "hello", true, 7) === 9;

Spread Operator 擴展操做

var params = [ "hello", true, 7 ]
    var other = [ 1, 2, ...params ] // [ 1, 2, "hello", true, 7 ]
    //es5
    var params = [ "hello", true, 7 ];
    var other = [ 1, 2 ].concat(params); // [ 1, 2, "hello", true, 7 ]

Template Literals模板

String Interpolation

var customer = { name: "Foo" }
    var card = { amount: 7, product: "Bar", unitprice: 42 }
    var message = `Hello ${customer.name},
    want to buy ${card.amount} ${card.product} for
    a total of ${card.amount * card.unitprice} bucks?`
    
    //es5
    var customer = { name: "Foo" };
    var card = { amount: 7, product: "Bar", unitprice: 42 };
    var message = "Hello " + customer.name + ",\n" +
    "want to buy " + card.amount + " " + card.product + " for\n" +
    "a total of " + (card.amount * card.unitprice) + " bucks?";

Custom Interpolation自定義插值

get`http://example.com/foo?bar=${bar + baz}&quux=${quux}`
    //es5
    get([ "http://example.com/foo?bar=", "&quux=", "" ],bar + baz, quux);

Raw String Access原始字符串訪問

function quux (strings, ...values) {
        strings[0] === "foo\n"
        strings[1] === "bar"
        strings.raw[0] === "foo\\n"
        strings.raw[1] === "bar"
        values[0] === 42
    }
    quux `foo\n${ 42 }bar`
    
    String.raw `foo\n${ 42 }bar` === "foo\\n42bar"
    //es5未實現

Extended Literals擴展

Binary & Octal Literal 二進制和八進制

0b111110111 === 503
    0o767 === 503
    //es5
    parseInt("111110111", 2) === 503;
    parseInt("767", 8) === 503;
    0767 === 503; // only in non-strict, backward compatibility mode

Unicode String & RegExp Literal Unicode字符串和正則表達式

"?".length === 2
    "?".match(/./u)[0].length === 2
    "?" === "\uD842\uDFB7"
    "?" === "\u{20BB7}"
    "?".codePointAt(0) == 0x20BB7
    for (let codepoint of "?") console.log(codepoint)
    
    //es5
    "?".length === 2;
    "?".match(/(?:[\0-\t\x0B\f\x0E-\u2027\u202A-\uD7FF\uE000-\uFFFF][\uD800-\uDBFF][\uDC00-\uDFFF][\uD800-\uDBFF](?![\uDC00-\uDFFF])(?:[^\uD800-\uDBFF]^)[\uDC00-\uDFFF])/)[0].length === 2;
    "?" === "\uD842\uDFB7";
    //  no equivalent in ES5
    //  no equivalent in ES5
    //  no equivalent in ES5

Enhanced Regular Expression加強正則表達式

(懵....)

Enhanced Object Properties加強對象屬性

Property Shorthand屬性簡寫

obj = { x, y }
    //es5
    obj = { x: x, y: y };

Computed Property Names計算屬性名稱

let obj = { foo:'bar', ['a'+'b']:31}
    //es5
    var obj = {foo:'bar'}
    obj['a'+'b'] = 31

Method Properties方法屬性

let obj = {
        foo(a, b){
            ...
        },
        bar(x, y){
            ...
        }
    }
    //es5
    var obj = {
        foo: function(a, b){
            ...
        },
        bar: function(x, y){
            ...
        }
    }

Destructuring Assignment解構賦值

Array Matching解構數組

let list = [1, 2, 3]
    let [a,,b] = list //a=1, b=3
    [b, a] = [a, b]
    //es5
    var list = [1, 2, 3]
    var a = list[0], b = list[2]
    var tmp = a; a = b; b = tmp;

Object Matching, Shorthand Notation對象匹配，簡寫符號

var obj = {op: 1, lhs: 2, rhs: 3}
    var {op, lhs, rhs } = obj
    //es5
    var obj = {op: 1, lhs: 2, rhs: 3}
    var op = obj.op;
    var lhs = obj.lhs;
    var rhs = obj.rhs;

Object Matching, Deep Matching對象匹配，深度匹配

var obj = {op: 1, lhs: {op: 2}, rhs: 3}
var { op: a, lhs: {op: b}, rhs: c} = obj
//es5
var obj = {op: 1, lhs: {op: 2}, rhs: 3}
var a = obj.op;
var b = obj.lhs.op;
var c = obj.rhs;

Object And Array Matching, Default Values對象數組匹配，默認值

var obj = { a: 1 }
   var list = [ 1 ]
   var { a, b = 2 } = obj // a=1, b=2
   var [ x, y = 2 ] = list //x=1, y=2
   //es5
   //var obj = {a, 1}
   var list = [1];
   var a = obj.a;
   var b = obj.b === undefined ? 2 : obj.b;
   var x = list[0];
   var y = list[1] === undefined ? 2 : list[1];

Parameter Context Matching參數上下文匹配

function f([name, val]){
    console.log(name, val)
}
function g({name:n, val:v}){
    console.log(n, v);
}
function h({name, val}){
    console.log(name,val);
}
f([ "bar", 42 ])
g({ name: "foo", val:  7 })
h({ name: "bar", val: 42 })
//es5
function f(arg){
    var name = arg[0];
    var val = arg[1];
    console.log(name, val);
}
function g(arg){
    var n = arg.name;
    var v = arg.val;
    console.log(n,v);
}
function h(arg){
    var name = arg.name;
    var val = arg.val;
    console.log(name, val);
}

Fail-Soft Destructuring失敗軟解析

var list = [ 7, 42 ]
 var [ a = 1, b = 2, c = 3, d ] = list
 a === 7
 b === 42
 c === 3
 d === undefined

FROM：
http://es6-features.org