ES6是JavaScript的版本標準，目前瀏覽器的 JavaScript 是 ES5 版本，大多數高版本的瀏覽器也支援 ES6，不過只實現了 ES6 的部分特性和功能。ES6的學習是在JS基礎學習之後進行的。

推薦用書：《ES6標準入門》

學習目錄：

一、let與const

ES6中增加了兩個宣告的關鍵字，let和const。

學習這兩個命令前要理解兩個概念：

塊級作用域，即在一對大括號內宣告的變數只在大括號內有效

變數提升：JS 程式碼執行之前，瀏覽器會預設把帶有 var 宣告的變數在記憶體中進行提前宣告或者定義

1.let命令

let最突出的特點就是宣告的變數只在程式碼塊內有效。

經典例題：

var a = [];
for (var i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };}
a[6](); // 列印10
//變數i是全域性的，函式執行時輸出的都是全域性作用域下的i值
---------------------------------------
let a = [];
for (let i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };}
a[6](); // 列印6
//每次迴圈都會產生一個塊級作用域，每個塊級作用域中的變數都是不同的，函式執行時輸出的是自己上一級（迴圈產生的塊級作用域）作用域下的i值.

　　let還有一個特點就是宣告的變數不存在變數提升，所以一定要在聲明後使用，否則報錯。

// var 的情況
console.log(a); // 輸出undefined
var a = 2;
// let 的情況
console.log(b); // 報錯ReferenceError
let b = 2;

2.const命令

const關鍵字用於宣告常量，宣告時必須初始化（如果宣告不賦值會報錯），聲明後常量的值不可更改。

3.let、const、var區別

二、解構賦值

ES6允許按照一定模式，從陣列和物件中提取值，對變數進行賦值，這被稱為解構。如果解構不成功，變數的值為undefined。

陣列解構：
let [x, , y] = [1, 2, 3];
x // 1
y // 3
物件解構:
let person = { name: 'zhangsan', age: 20 };
let {name: myName, age: myAge} = person; // myName myAge 屬於別名
console.log(myName); // 'zhangsan'
console.log(myAge); // 20
字串解構
const [x,y,z] = 'sea';
x// "s"
y // "e"
z // "a"　

[x, y] = [y, x];

函式引數的定義並且從函式返回多個值

//引數
function f([x, y, z]) { ... }
f([1, 2, 3]);
//返回值
function example() {
  return [1, 2, 3];
}
let [a, b, c] = example();

　提取json資料

let jsonData = {
  id: 42,
  status: "OK",
  data: [867, 5309]};
let { id, status, data: number } = jsonData;

　解構賦值的好處在於使程式碼更簡潔，語義更清晰，更方便獲取資料欄位。　

三、字串擴充套件

模板字串：

• 可以表示多行字串，所有的空格縮排都保留
• 可以在字串中嵌入變數
• 可以呼叫函式

let person={
name:'hl',
age:18,
}
let html=`<div>
<span>${person.name}</span>//空格和換行被保留，變數寫在${ }中，變數不宣告會報錯
<span>${person.sge}</span>
</div>`;

//呼叫函式

function fn() {
  return "Hello World";
}
let str=`${fn()}`//${ }中對函式呼叫
console.log(str);

四、陣列擴充套件

擴充套件運算子：（...),可以將一個數組轉為用逗號分隔的引數序列

應用：

• 合併陣列

const arr1 = ['a', 'b'];
const arr2 = ['c'];
const arr3 = ['d', 'e'];

// ES5 的合併陣列
arr1.concat(arr2, arr3);

// ES6 的合併陣列
[...arr1, ...arr2, ...arr3]

• 與解構賦值結合

//陣列解構賦值，
const [first, ...rest] = [1, 2, 3, 4, 5];
first // 1
rest  // [2, 3, 4, 5]

• 函式返回值
• 字串

五、函式擴充套件

　　1.函式預設值

ES6 允許為函式的引數設定預設值，即直接寫在引數定義的後面。在宣告函式的時候給引數設定一個預設值，如果函式呼叫時引數不賦值，引數就等於預設值，賦值則為新的值。非尾部引數函式呼叫時不可以忽略不復制（會error報錯），可以使用undefined代替。

  function fun(x=2,y=5){//x預設值使2，y預設值是5
         let z= x+y;
         console.log(z);
      }

      fun();//列印7，函式引數等於預設值
      fun(1,1);//2 函式引數為傳遞的值
      fun( ,4);//error 第一個引數不能忽略，報錯
      fun(undefined,4)//6 第一個引數為預設值，第二個引數為傳遞值
      fun(1,);//6 第二個引數未賦值為預設值

　　2.箭頭函式

const fn = () => {}

//ES5函式定義
var sum = function(num1, num2) {
  return num1 + num2;
};

//箭頭函式形式
var sum = (num1, num2) => num1 + num2;

function fn (v) {
 return v; }
//箭頭函式，省略引數括號
const fn = v => v;

let fun = (x,y) => {
　　console.log(x,y);
　　return x+y; //必須加return才有返回值
}

如果要返回物件時需要用小括號包起來，因為大括號被佔用解釋為程式碼塊了，正確寫法

let fun = ()=>({ name: hl })