ES6
簡介
- ECMAScript和JavaScript的關系是，前者是后者的規格，后者是前者的一種實現。一般來說，這兩個詞是可以互換的。
let命令
- ES6新增了
let命令，用來聲明變量，它的用法類似於var，但是所聲明的變量，只在let命令所在的代碼塊內有效。
{
let a = 10;
var b = 1;
}
a // ReferenceError: a is not defined.
b // 1let命令避免了循環變量泄露為全局變量
var s = 'hello';
for (var i = 0; i < s.length; i++) {
console.log(s[i]);
}
console.log(i); // 5上面代碼中，變量i只用來控制循環，但是循環結束后，它並沒有消失，泄露成了全局變量。
變量的解構賦值
- ES6允許按照一定模式，從數組和對象中提取值，對變量進行賦值，這被稱為解構（Destructuring）。
- 本質上，這種寫法屬於“模式匹配”，只要等號兩邊的模式相同，左邊的變量就會被賦予對應的值。下面是一些使用嵌套數組進行解構的例子。
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 // []
var { foo, bar } = { foo: "aaa", bar: "bbb" };
foo // "aaa"
bar // "bbb"
var { bar, foo } = { foo: "aaa", bar: "bbb" };
foo // "aaa"
bar // "bbb"
var { baz } = { foo: "aaa", bar: "bbb" };
baz // undefined- 解構賦值允許指定默認值。
var [foo = true] = [];
foo // true
[x, y = 'b'] = ['a']; // x='a', y='b'
[x, y = 'b'] = ['a', undefined]; // x='a', y='b'模版字符串
傳統的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）是增強版的字符串，用反引號（`）標識。它可以當作普通字符串使用，也可以用來定義多行字符串，或者在字符串中嵌入變量。
// 普通字符串
`In JavaScript '\n' is a line-feed.`
// 多行字符串
`In JavaScript this is
not legal.`
console.log(`string text line 1
string text line 2`);
// 字符串中嵌入變量
var name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`Number全局對象
ES6將全局方法parseInt()和parseFloat()，移植到Number對象上面，行為完全保持不變。
函數變化
- ES6允許為函數的參數設置默認值，即直接寫在參數定義的后面。
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- ES6引入rest參數（形式為“…變量名”），用於獲取函數的多余參數，這樣就不需要使用arguments對象了。rest參數搭配的變量是一個數組，該變量將多余的參數放入數組中。
function add(...values) {
let sum = 0;
for (var val of values) {
sum += val;
}
return sum;
}
add(2, 5, 3) // 10- 箭頭函數
ES6允許使用“箭頭”（=>）定義函數。
var f = () => 5;
// 等同於
var f = function () { return 5 };
var sum = (num1, num2) => num1 + num2;
// 等同於
var sum = function(num1, num2) {
return num1 + num2;
};
const full = ({ first, last }) => first + ' ' + last;
// 等同於
function full(person) {
return person.first + ' ' + person.last;
}擴展運算符
擴展運算符（spread）是三個點（…）。它好比rest參數的逆運算，將一個數組轉為用逗號分隔的參數序列。
function push(array, ...items) {
array.push(...items);
}
function add(x, y) {
return x + y;
}
var numbers = [4, 38];
add(...numbers) // 42擴展運算符的應用
// ES5
[1, 2].concat(more)
// ES6
[1, 2, ...more]
var arr1 = ['a', 'b'];
var arr2 = ['c'];
var arr3 = ['d', 'e'];
// ES5的合並數組
arr1.concat(arr2, arr3);
// [ 'a', 'b', 'c', 'd', 'e' ]
// ES6的合並數組
[...arr1, ...arr2, ...arr3]
// [ 'a', 'b', 'c', 'd', 'e' ]
// ES5
a = list[0], rest = list.slice(1)
// ES6,與解構賦值結合
[a, ...rest] = list
//函數的返回值
var dateFields = readDateFields(database);
var d = new Date(...dateFields);對象
- ES6允許直接寫入變量和函數，作為對象的屬性和方法。這樣的書寫更加簡潔。
var birth = '2000/01/01';
var Person = {
name: '張三',
//等同於birth: birth
birth,
// 等同於hello: function ()...
hello() { console.log('我的名字是', this.name); }
};- 屬性名表達式,ES6 允許字面量定義對象時，用方法二（表達式）作為對象的屬性名，即把表達式放在方括號內。
let propKey = 'foo';
let obj = {
[propKey]: true,
['a' + 'bc']: 123
};