ECMAScript 6（以下簡稱ES6）是JavaScript語言的下一代標準。因為當前版本的ES6是在2015年發布的，所以又稱ECMAScript 2015。
阮一峰的ECMAScript 6 入門全面介紹了es6的新特性，大神的書還是寫的還是很詳細的,于是我提取了書中的精華，分上中下三篇介紹es6的新特性
es6全家桶（一）——let和const命令、解構賦值、默認參數、模板字符串
let命令和const命令
let命令和var的區別
- let所聲明的變量，只在let命令所在的代碼塊內有效，即僅在塊級作用域內有效
var a = [];
for (let i = 0; i < 10; i++) {
a[i] = function () {
console.log(i);
};
}
而var聲明的變量在全局范圍內都有效，所以全局只有一個變量
var a = [];
for (var i = 0; i < 10; i++) {
a[i] = function () {
console.log(i);
};
}
a[6](); // 10
- let命令不存在變量提升，它所聲明的變量一定要在聲明后使用，否則報錯。
// var的情況
console.log(foo); // 輸出undefined
var foo = 2;
// let 的情況
console.log(bar); // 報錯ReferenceError
let bar = 2;
- 不允許重復聲明，let不允許在相同作用域內，重復聲明同一個變量。
// 報錯
function () {
let a = 10;
var a = 1;
}
// 報錯
function () {
let a = 10;
let a = 1;
}
塊級作用域
- es5和es6比較：es5 只有全局作用域和函數作用域，沒有塊級作用域。可能出現兩種場景：
1.內層變量可能會覆蓋外層變量
var tmp = new Date();
function f() {
console.log(tmp);
if (false) {
var tmp = 'hello world';
}
}
f(); // 輸出undefined，變量提升，導致內層的tmp變量覆蓋了外層的tmp變量。
2.用來計數的循環變量泄露為全局變量。
var s = 'hello';
for (var i = 0; i < s.length; i++) {
console.log(s[i]);
}
console.log(i); // 輸出5， 變量i只用來控制循環，但是循環結束后，它并沒有消失，泄露成了全局變量。
let實際上為javascript新增了塊級作用域
es6 允許塊級作用域的任意嵌套。
es5規定函數只能在頂層作用域和函數作用域之中聲明，不能在塊級作用域聲明，嚴格模式下會報錯。為ES5和es6環境避免報錯，應不要在塊級作用域里聲明函數。
塊級作用域的出現，實際上使得獲得廣泛應用的立即執行函數表達式（IIFE）不再必要了。
// IIFE 寫法
(function () {
var tmp = ...;
...
}());
// 塊級作用域寫法
{
let tmp = ...;
...
}
const命令
const聲明一個只讀的常量。一旦聲明，常量的值就不能改變。
對于復合類型的變量，變量名不指向數據，而是指向數據所在的地址。const命令只是保證變量名指向的地址不變，并不保證該地址的數據不變，所以將一個對象聲明為常量必須非常小心。
const foo = {};
// 為 foo 添加一個屬性，可以成功
foo.prop = 123;
foo.prop // 123
// 將 foo 指向另一個對象，就會報錯
foo = {}; // TypeError: "foo" is read-only
頂層對象的屬性
ES6為了保持兼容性，var命令和function命令聲明的全局變量，依舊是頂層對象的屬性；另一方面規定，let命令、const命令、class命令聲明的全局變量，不屬于頂層對象的屬性。也就是說，從ES6開始，全局變量將逐步與頂層對象的屬性脫鉤。
var a = 1;
// 如果在Node的REPL環境，可以寫成global.a
// 或者采用通用方法，寫成this.a
window.a // 1
let b = 1;
window.b // undefined
變量的解構賦值
數組的解構賦值
- 匹配模式
let [foo, [[bar], baz]] = [1, [[2], 3]];
foo // 1
bar // 2
baz // 3
let [ , , third] = ["foo", "bar", "baz"];
third // "baz"
let [x, , y] = [1, 2, 3];
x // 1
y // 3
let [head, ...tail] = [1, 2, 3, 4];
head // 1
tail // [2, 3, 4]
let [x, y, ...z] = ['a'];
x // "a"
y // undefined
z // []
- 不完全解構，即等號左邊的模式，只匹配一部分的等號右邊的數組。
let [x, y] = [1, 2, 3];
x // 1
y // 2
let [a, [b], d] = [1, [2, 3], 4];
a // 1
b // 2
d // 4
- 如果等號的右邊不是數組（或者嚴格地說，不是可遍歷的結構，參見《Iterator》一章），那么將會報錯。
// 報錯
let [foo] = 1;
let [foo] = false;
let [foo] = NaN;
let [foo] = undefined;
let [foo] = null;
let [foo] = {};
- 解構賦值允許指定默認值。
let [foo = true] = [];
foo // true
let [x, y = 'b'] = ['a']; // x='a', y='b'
let [x, y = 'b'] = ['a', undefined]; // x='a', y='b'
注意，ES6 內部使用嚴格相等運算符（===），判斷一個位置是否有值。所以，如果一個數組成員不嚴格等于undefined，默認值是不會生效的。
對象的解構賦值
- 對象的屬性沒有次序，變量必須與屬性同名，才能取到正確的值。
let { bar, foo } = { foo: "aaa", bar: "bbb" };
foo // "aaa"
bar // "bbb"
let { baz } = { foo: "aaa", bar: "bbb" };
baz // undefined
如果變量名與屬性名不一致，必須寫成下面這樣。
var { foo: baz } = { foo: 'aaa', bar: 'bbb' }; baz // "aaa"
- 與數組一樣，解構也可以用于嵌套結構的對象。
let obj = {
p: [
'Hello',
{ y: 'World' }
]
};
let { p: [x, { y }] } = obj;
x // "Hello"
y // "World"
對象的解構賦值的內部機制，是先找到同名屬性，然后再賦給對應的變量。真正被賦值的是后者，而不是前者。
var node = {
loc: {
start: {
line: 1,
column: 5
}
}
};
var { loc, loc: { start }, loc: { start: { line }} } = node;
line // 1
loc // Object {start: Object}
start // Object {line: 1, column: 5}
默認參數
ES6 之前，不能直接為函數的參數指定默認值，只能采用變通的方法。ES6 允許為函數的參數設置默認值，即直接寫在參數定義的后面。參數變量是默認聲明的，所以不能用let或const再次聲明。
function log(x, y = 'World') {
console.log(x, y);
}
log('Hello') // Hello World
log('Hello', 'China') // Hello China
log('Hello', '') // Hello
參數默認值可以與解構賦值的默認值，結合起來使用。
function foo({x, y = 5}) {
console.log(x, y);
}
foo({}) // undefined, 5
foo({x: 1}) // 1, 5
foo({x: 1, y: 2}) // 1, 2
foo() // TypeError: Cannot read property 'x' of undefined
模版字符串
傳統的JavaScript語言，輸出模板通常是這樣寫的。
$('#result').append(
'There are <b>' + basket.count + '</b> ' +
'items in your basket, ' +
'<em>' + basket.onSale +
'</em> are on sale!'
);
上面這種寫法相當繁瑣不方便，ES6引入了模板字符串解決這個問題。
$('#result').append(`
There are <b>${basket.count}</b> items
in your basket, <em>${basket.onSale}</em>
are on sale!
`);
模板字符串（template string）是增強版的字符串，用反引號（`）標識。它可以當作普通字符串使用，也可以用來定義多行字符串，或者在字符串中嵌入變量。模板字符串中嵌入變量，需要將變量名寫在${}之中。
如果在模板字符串中需要使用反引號，則前面要用反斜杠轉義。
- 大括號內部可以放入任意的JavaScript表達式，可以進行運算，以及引用對象屬性。
var x = 1;
var y = 2;
`${x} + ${y} = ${x + y}`
// "1 + 2 = 3"
`${x} + ${y * 2} = ${x + y * 2}`
// "1 + 4 = 5"
var obj = {x: 1, y: 2};
`${obj.x + obj.y}`
// 3
- 模板字符串之中還能調用函數。
function fn() {
return "Hello World";
}
`foo ${fn()} bar`
// foo Hello World ba
- 模板字符串甚至還能嵌套
const tmpl = addrs => `
<table>
${addrs.map(addr => `
<tr><td>${addr.first}</td></tr>
<tr><td>${addr.last}</td></tr>
`).join('')}
</table>
`;
- 由于模板字符串的大括號內部，就是執行JavaScript代碼，因此如果大括號內部是一個字符串，將會原樣輸出。
`Hello ${'World'}`
// "Hello World"
