ES6中比较常见的语法总结

说明

关于ES6部分，平时常用的语法记录。

let 和 const

原则上在ES6中舍弃了var来声明变量。一般情况下使用const声明变量，当变量值需要重新赋值的时候使用let。

// bad
var a = 1;

// good
const b = 2;

let c = 3;
c = 4;

解构赋值

一种便利的赋值方式。

• 普通对象：

// ES6
var { op, lhs, rhs } = getASTNode()

// ES5
var tmp = getASTNode();
var op  = tmp.op;
var lhs = tmp.lhs;
var rhs = tmp.rhs;

• 重命名，深度匹配：

// ES6
var { op: a, lhs: { op: b }, rhs: c } = getASTNode();

// ES5
var tmp = getASTNode();
var a = tmp.op;
var b = tmp.lhs.op;
var c = tmp.rhs;

• 数组：

// ES6
var list = [ 1, 2, 3 ]
var [ a, , b ] = list
[ b, a ] = [ a, b ]

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

• 函数参数的解构赋值：

很推荐的一种写法。可以让函数更加容易阅读。

// ES6
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);
};
f([ "bar", 42 ]);
g({ name: "foo", val:  7 });
h({ name: "bar", val: 42 });

• 默认值：

这里是当值为undefined的时候，才去默认值

// ES6
var obj = { a: 1 }
var list = [ 1 ]
var { a, b = 2 } = obj
var [ x, y = 2 ] = list


// 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];

模板字符串

使用 ` 而不是 ’ 来包含字符串

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

// ES5
var message = "Hello " + customer.name + ",\n" +
"want to buy " + card.amount + " " + card.product + " for\n" +
"a total of " + (card.amount * card.unitprice) + " bucks?";

箭头函数

箭头函数是一个匿名函数，不修改this的指向。

// ES6
odds  = evens.map(v => v + 1)
pairs = evens.map(v => ({ even: v, odd: v + 1 }))
nums  = evens.map((v, i) => v + i)

// ES5
odds  = evens.map(function (v) { return v + 1; });
pairs = evens.map(function (v) { return { even: v, odd: v + 1 }; });
nums  = evens.map(function (v, i) { return v + i; });

// ES6
nums.forEach(v => {
   if (v % 5 === 0)
       fives.push(v)
})

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

// ES6
this.nums.forEach((v) => {
    if (v % 5 === 0)
        this.fives.push(v)
})

// ES5
//  variant 1
var self = this;
this.nums.forEach(function (v) {
    if (v % 5 === 0)
        self.fives.push(v);
});

//  variant 2
this.nums.forEach(function (v) {
    if (v % 5 === 0)
        this.fives.push(v);
}, this);

//  variant 3 (since ECMAScript 5.1 only)
this.nums.forEach(function (v) {
    if (v % 5 === 0)
        this.fives.push(v);
}.bind(this));