ES6

簡介

• ECMAScript和JavaScript的關係是，前者是後者的規格，後者是前者的一種實現。一般來說，這兩個詞是可以互換的。

let命令

• ES6新增了let命令，用來宣告變數，它的用法類似於var，但是所宣告的變數，只在let命令所在的程式碼塊內有效。

{
  let a = 10;
  var b = 1;
}

a // ReferenceError: a is not defined.
b // 1

• let命令避免了迴圈變數洩露為全域性變數

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
};