ES6快速指南

磨刀不误砍柴工

尼古拉·特斯拉：“如果爱迪生在一大堆草里找一根针，他一定立刻像一只蜜蜂那样，不辞辛苦的一根稻草一根稻草翻看看，直至找到他所要的东西为止。其实如果要是懂一点点理论稍微计算一下的话，那么他可以很轻松的省掉90%的劳动。”

怎么寻找钢针？请用磁铁。

新特性

  1. 块级作用域变量声明: let/const
  2. 箭头函数：=>
  3. 不定参数、默认参数, 对象语法扩展，解构...
  4. 模块

Browser Compatibility

块级作用域变量声明

Block-Scoped Declarations

let/const


var a=2;
{
    let a=3;
    console.log( a );
}
console.log( a );
                        


'use strict';
{
    const a=2;
    console.log( a );
    a=3;    //TypeError
}

More info: let statements const statement

模板字符串

Template Literals


'use strict';
var text =
`Now is the time for
    all good men to come to the aid of their country!`;
console.log( text );

var name = "Kyle";
var greeting = `Hello ${name}!`;
console.log( greeting ); // "Hello Kyle!"
console.log( typeof greeting );// "string"


function foo(str) {
    var name = "foo";
    console.log( str );
}
function bar() {
    var name = "bar";
    foo( `Hello from ${name}!` );
}
var name = "global";
bar(); // "Hello from bar!"

More info: MDN Template Strings

展开/不定参数

Spread/Rest


'use strict';
var a = [2,3,4];
var b=[1,...a,5];
console.log( b ); // [1,2,3,4,5]

function foo(x, y, ...z) {
    console.log( x, y, z );
}
foo( 1, 2, 3, 4, 5 ); // 1 2 [3,4,5]

More info: Spread Operator Rest parameters

默认参数

Default Parameter Values


'use strict';
function foo(x = 11, y = 31) {
    console.log( x + y );
}
foo(); // 42

More info: Default parameters

对象语法拓展

Object Literal Extensions


'use strict';

var x=2,y=3,
    o={ x: x, y:y};
var x=2,y=3,//Concise Properties
    o={x,y};

var x=2,y=3,
    o={
        x: function() {
            // ..
        },
        y: function() {
            // ..
        }
    };
var x=2,y=3,//Concise Methods
    o={
        x() {
            // ..
        },
        y() {
            // ..
        }
    };

More info: MDN Grammer and types: Object literals

解构

Destructuring


'use strict';

var [a,b,c]= [1,2,3];
console.log( a, b, c ); // 1 2 3
var {x:x,y:y,z:z} = { x: 4, y: 5, z:6 };
console.log( x, y, z ); // 4 5 6

function foo({x,y}){
    console.log( x, y );
}
foo( { y: 1, x: 2 } );// 2 1
foo( { y: 42 } );// undefined 42
foo( {} );// undefined undefined

More info: MDN Destructuring assignment

不引入新的变量，互换两个变量的值


var a = 1, b = 2;
console.info(`a=${a}, b=${b}`);
[a, b] = [b, a];
console.info(`a=${a}, b=${b}`);

var a = 1, b = 2;
console.info(`a=${a}, b=${b}`);
({a, b} = {a: b, b: a});
console.info(`a=${a}, b=${b}`);

箭头函数

Arrow Functions


'use strict';
function foo(x,y) { return x + y;}
// versus
var foo=(x,y)=>x+y;

var a = [1,2,3,4,5];
a=a.map(v=>v*2);
console.log( a ); // [2,4,6,8,10]

function Bar() {
    this.myvals = [1,2,3,4,5];
    // 'this' refers to the Bar instance when run inside an ES6 transpiler
    //this.myvals.map(function () { console.log(this) });
    this.myvals.map(() => { console.log(this) });
    //var self = this;
    //this.myvals.map(function () { console.log(self) });
    //this.myvals.map((function () { console.log(this) }).bind(this));
}

var b = new Bar();

More info: MDN Arrow Functions

类

Classes


'use strict';
class Foo {
    constructor(a,b) {
        this.x = a;
        this.y = b;
    }
    gimmeXY() {
        return this.x * this.y;
    }
}
class Bar extends Foo {
    constructor(a,b,c) {
        super( a, b );
        this.z = c;
    }
    gimmeXYZ() {
        return super.gimmeXY() * this.z;
    }
}
var b= new Bar(5,15,25);
b.x; // 5
b.y; // 15
b.z; // 25
b.gimmeXYZ(); // 1875

More info: MDN Classes

模块

Modules

ES6 modules are file-based, meaning one module per file.

ES6的模块是基于文件的，也就是说单独一个文件就是一个单独的模块。 


'use strict';
export default function foo() { .. }
export function bar() { .. }
export function baz() { .. }

import FOOFN, { bar, baz as BAZ } from "foo";
FOOFN();
bar();
BAZ();

More info: import statement export statement

参考资料地址