1 、ES6 新特性

現在使用主流的前端框架中，如ReactJS、Vue.js、angularjs等，都會使用到ES6的新特性，作爲一名高級工程師而言，ES6也就成爲了必修課，所以本套課程先以ES6的新特性開始。

1.1、瞭解ES6

ES6，是ECMAScript 6的簡稱，它是 JavaScript 語言的下一代標準，己於 2015 年 6 月正式發布。
它的目標是使 JavaScript語言可以用於編寫複雜的大型應用程序，成爲企業級開發語言。

1.1.1.什麼是ECMAScript？

來看下前端的發展歷程：

web1.0時代：

最初的網頁以 HTML爲主，是純靜態的網頁。網頁是隻讀的，信息流只能從服務的到客戶端單向流通。開發人員
也只關心頁面的樣式和內容即可。
web2.0時代：

1995 年，網景工程師Brendan Eich 花了10天時間設計了JavaScript語言。
1996 年，微軟發佈了JScript，其實是JavaScript的逆向工程實現。
1997 年，爲了統一各種不同script腳本語言，ECMA（歐洲計算機製造商協會）以JavaScript爲基礎，制定了
ECMAscript 標準規範。JavaScript和JScript都是 ECMAScript 的標準實現者，隨後各大瀏覽器廠商紛紛實現了
ECMAScript 標準。

所以，ECMAScript是瀏覽器腳本語言的規範，而各種我們熟知的js語言，如JavaScript則是規範的具體實現。

1.1.2.ECMAScript的快速發展

而後，ECMAScript就進入了快速發展期。

1998 年6月，ECMAScript 2.0 發佈。
1999 年12月，ECMAScript 3.0 發佈。這時，ECMAScript 規範本身也相對比較完善和穩定了，但是接下來的事情，就比較悲劇了。
2007 年10月。。。。ECMAScript 4.0 草案發布。
這次的新規範，歷時頗久，規範的新內容也有了很多爭議。在制定ES4的時候，是分成了兩個工作組同時工作的。

一邊是以 Adobe, Mozilla, Opera 和 Google爲主的 ECMAScript 4 工作組。
一邊是以 Microsoft 和 Yahoo 爲主的 ECMAScript 3.1 工作組。

ECMAScript 4 的很多主張比較激進，改動較大。而 ECMAScript 3.1 則主張小幅更新。最終經過 TC39 的會
議，決定將一部分不那麼激進的改動保留髮布爲 ECMAScript 3.1，而ES4的內容，則延續到了後來的
ECMAScript5和6版本中

2009 年12月，ECMAScript 5 發佈。
2011 年6月，ECMAScript 5.1 發佈。
2015 年6月，ECMAScript 6，也就是 ECMAScript 2015 發佈了。並且從 ECMAScript 6 開始，開始採用年號來做版本。即 ECMAScript 2015，就是ECMAScript6。
2016 年 6月，小幅修訂的《ECMAScript 2016標準》 (簡稱 ES2016)如期發佈，這個版本可以看作是 ES6.1版，因爲兩者的差異非常小(只新增了數組實例的 includes 方法和指數運算符)，基本上可以認爲是同一個標準。
2017 年 6 月發佈了ES2017 標準。

因此， ES6 既是一個歷史名詞，也是一個泛指，含義是 5.1 版本以後的 JavaScript 的下一代標準，涵蓋了 ES2015、ES2016、 ES2017 等，而 ES2015 則是正式名稱，特指當年發佈的正式版本的語言標準

1.2、let 和 const 命令

var
之前，我們寫js定義變量的時候，只有一個關鍵字： var
var 有一個問題，就是定義的變量有時會莫名奇妙的成爲全局變量。
例如這樣的一段代碼：

for (var i = 0; i < 5; i++){
  console.log(i);
}
console.log("循環外：" + i)

運行打印的結果是如下：

可以看出，在循環外部也可以獲取到變量 i的值，顯然變量i的作用域範圍太大了，在做複雜頁面時，會帶來很大的問題。

let
let 所聲明的變量，只在 let 命令所在的代碼塊內有效。
我們把剛纔的 var 改成 let 試試：

for (let i = 0; i < 5; i++){
  console.log(i);
}
console.log("循環外：" + i)

結果：
這樣，就把變量的 i的作用域控制在了循環內部。

const
const 聲明的變量是常量，不能被修改，類似於java中final關鍵字。

  const a = 1;
  console.log("a = ", a);
  //給a重新賦值
  a = 2;
  console.log("a = ", a);

可以看到，變量 a的值是不能修改的。

1.3、字符串擴展

在ES6中，爲字符串擴展了幾個新的API：
includes() ：返回布爾值，表示是否找到了參數字符串。
startsWith() ：返回布爾值，表示參數字符串是否在原字符串的頭部。
endsWith() ：返回布爾值，表示參數字符串是否在原字符串的尾部。
實驗一下：

< script>
  let str = "hello heima";
  console.log(str, " 中是否包含了heima => ", str.includes("heima"));
  console.log(str, " 中是否包含了baima => ", str.includes("baima"));
  console.log(str, " 中是否以h開頭 => ", str.startsWith("h"));
  console.log(str, " 中是否以a開頭 => ", str.startsWith("a"));
  console.log(str, " 中是否以a結束 => ", str.endsWith("a"));
  console.log(str, " 中是否以h結束 => ", str.endsWith("h"));
</script>

字符串模板
ES6中提供了`來作爲字符串模板標記。我們可以這麼玩：

< script>
  let str = `
  hello
  itheima
  itcast
  `;
  console.log(str);
</script>

在兩個 `之間的部分都會被作爲字符串的值，可以任意換行。

1.3 、解構表達式

什麼是解構？ – ES6中允許按照一定模式從數組和對象中提取值，然後對變量進行賦值，這被稱爲解構 (
Destructuring)。

1.3.1、數組解構

比如有一個數組：

let arr = [1,2,3]

之前，我想獲取其中的值，只能通過角標。ES6可以這樣：

   let arr = [1,2,3]
  const [x,y,z] = arr;// x，y，z將與arr中的每個位置對應來取值
  // 然後打印
  console.log(x,y,z);
  const [a] = arr; //只匹配1個參數
  console.log(a);

結果：

1.3.2、對象解構

例如有個person對象：

const person = {
  name:"jack",
  age:21,
  language: ['java','js','css']
}

我們可以這麼做：

//  解構表達式獲取值
const {name,age,language} = person;
// 打印
console.log(name);
console.log(age);
console.log(language);

結果：

如過想要用其它變量接收，需要額外指定別名：

{name:n} ：name是person中的屬性名，冒號後面的n是解構後要賦值給的變量。

1.4、函數優化

在ES6中，對函數的操作做了優化，使得我們在操作函數時更加的便捷。

1.4.1、函數參數默認值

在ES6以前，我們無法給一個函數參數設置默認值，只能採用變通寫法：

 function add(a , b) {
    // 判斷b是否爲空，爲空就給默認值1
    b = b || 1;
    return a + b;
 }
  // 傳一個參數
  console.log(add(10));

現在可以這麼寫：

function add(a , b = 1) {
  return a + b;
}
// 傳一個參數
console.log(add(10));

1.4.2、箭頭函數

ES6中定義函數的簡寫方式：
一個參數時：

var print = function (obj) {
  console.log(obj);
}
// 簡寫爲：
var print2 = obj => console.log(obj);

多個參數：

//  兩個參數的情況：
var sum = function (a , b) {
  return a + b;
}
// 簡寫爲：
var sum2 = (a,b) => a+b;

// 沒有參數時，需要通過()進行佔位，代表參數部分

let sayHello = () => console.log("hello!");
sayHello();

代碼不止一行，可以用 {} 括起來。

var sum3 = (a,b) => {
  return a + b;
}
// 多行，沒有返回值
let sayHello = () => {
  console.log("hello!");
  console.log("world!");
}
sayHello();

1.4.3、對象的函數屬性簡寫

比如一個Person對象，裏面有eat方法：

let person = {
  name: "jack",
  // 以前：
  eat: function (food) {
    console.log(this.name + "在吃" + food);
 },
  // 箭頭函數版：
  eat2: food => console.log(person.name + "在吃" + food),// 這裏拿不到this
  // 簡寫版：
  eat3(food){
    console.log(this.name + "在吃" + food);
 }
}

1.4.4、箭頭函數結合解構表達式

比如有一個函數：

const person = {
  name:"jack",
  age:21,
  language: ['java','js','css']
}
function hello(person) {
  console.log("hello," + person.name)
}

如果用箭頭函數和解構表達式

var hi = ({name}) =>  console.log("hello," + name);
hi(person)

1.5、map和reduce

ES6中，數組新增了map和reduce方法。

1.5.1、map

map() ：接收一個函數，將原數組中的所有元素用這個函數處理後放入新數組返回。
舉例：有一個字符串數組，我們希望轉爲int數組

let arr = ['1','20','-5','3'];
console.log(arr)
let newArr = arr.map(s => parseInt(s));
console.log(newArr)

1.5.1、reduce

reduce() ：接收一個函數（必須）和一個初始值（可選），該函數接收兩個參數：

第一個參數是上一次 reduce處理的結果
第二個參數是數組中要處理的下一個元素

reduce() 會從左到右依次把數組中的元素用reduce處理，並把處理的結果作爲下次reduce的第一個參數。如果是
第一次，會把前兩個元素作爲計算參數，或者把用戶指定的初始值作爲起始參數
舉例：

const arr = [1,20,-5,3]

沒有初始值：

指定初始值：

1.6 、擴展運算符

擴展運算符(spread)是三個點(…)，將一個數組轉爲用逗號分隔的參數序列。
用法：

  console.log (...[1, 2, 3]); //1 2 3
  console.log(1, ...[2, 3, 4], 5); // 1 2 3 4 5
  function add(x, y) {
    return x + y;
 }
  var numbers = [1, 2];
  console.log(add(...numbers)); // 3
  // 數組合並
  let arr = [...[1,2,3],...[4,5,6]];
  console.log(arr); //[1, 2, 3, 4, 5, 6]
  // 與解構表達式結合
  const [first, ...rest] = [1, 2, 3, 4, 5];
  console.log(first, rest) //1  [2, 3, 4, 5]
  //將字符串轉成數組
  console.log([...'hello']) //["h", "e", "l", "l", "o"]

1.7、Promise

所謂Promise，簡單說就是一個容器，裏面保存着某個未來纔會結束的事件（通常是一個異步操作）的結果。從語法
上說，Promise 是一個對象，從它可以獲取異步操作的消息。Promise 提供統一的 API，各種異步操作都可以用同樣
的方法進行處理。
我們可以通過Promise的構造函數來創建Promise對象，並在內部封裝一個異步執行的結果。
語法：

const promise = new Promise(function(resolve, reject) {
 // ... 執行異步操作
 if (/* 異步操作成功 */){
  resolve(value);// 調用resolve，代表Promise將返回成功的結果
} else {
  reject(error);// 調用reject，代表Promise會返回失敗結果
}
});

這樣，在promise中就封裝了一段異步執行的結果。
如果我們想要等待異步執行完成，做一些事情，我們可以通過 promise的then方法來實現,語法：

promise .then(function(value){
  // 異步執行成功後的回調
});

如果想要處理promise異步執行失敗的事件，還可以跟上catch：

promise .then(function(value){
  // 異步執行成功後的回調
}).catch(function(error){
  // 異步執行失敗後的回調
})

示例：

const p = new Promise(function (resolve, reject) {
  // 這裏我們用定時任務模擬異步
  setTimeout(() => {
    const num = Math.random();
    // 隨機返回成功或失敗
    if (num < 0.5) {
      resolve("成功！num:" + num)
   } else {
      reject("出錯了！num:" + num)
   }
 }, 300)
})
// 調用promise
p.then(function (msg) {
  console.log(msg);
}).catch(function (msg) {
  console.log(msg);
})

結果：

1.8 、set和map

ES6提供了Set和Map的數據結構。
Set，本質與數組類似。不同在於Set中只能保存不同元素，如果元素相同會被忽略。和java中的Set集合非常相似。
構造函數：

// Set 構造函數可以接收一個數組或空
let set = new Set();
set.add(1);// [1]
// 接收數組
let set2 = new Set([2,3,4,5,5]);// 得到[2,3,4,5]

方法：

*set.add(1);//  添加
set.clear();// 清空
set.delete(2);// 刪除指定元素
set.has(2); // 判斷是否存在
set.forEach(function(){})//遍歷元素
set.size; // 元素個數。是屬性，不是方法。*

map，本質是與Object類似的結構。不同在於，Object強制規定key只能是字符串。而Map結構的key可以是任意對象。即：
object 是 <string,object>集合
map 是<object,object>集合
構造函數：

// map 接收一個數組，數組中的元素是鍵值對數組
const map = new Map([
 ['key1','value1'],
 ['key2','value2'],
])
// 或者接收一個set
const set = new Set([
 ['key1','value1'],
 ['key2','value2'],
])
const map2 = new Map(set)
// 或者其它map
const map3 = new Map(map);

方法：

map .set(key, value);// 添加
map.clear();// 清空
map.delete(key);// 刪除指定元素
map.has(key); // 判斷是否存在
map.forEach(function(key,value){})//遍歷元素
map.size; // 元素個數。是屬性，不是方法
map.values() //獲取value的迭代器
map.keys() //獲取key的迭代器
map.entries() //獲取entry的迭代器
用法：
for (let key of map.keys()) {
console.log(key);
}
或：
console.log(...map.values()); //通過擴展運算符進行展開

1.9、class（類）的基本語法

JavaScript 語言的傳統方法是通過構造函數定義井生成新對象。ES6中引入了class的概念，通過class關鍵字自定義
類。
基本用法：

< script>
  class User{
    constructor(name, age = 20){ // 構造方法
      this.name = name; // 添加屬性並且賦值
      this.age = age;
   }
    sayHello(){ // 定義方法
      return "hello";
   }
    static isAdult(age){ //靜態方法
      if(age >= 18){
        return "成年人";
     }
      return "未成年人";
   }
 }
  let user = new User("張三");
  // 測試
  console.log(user); // User {name: "張三", age: 20}
  console.log(user.sayHello()); // hello
  console.log(User.isAdult(20)); // 成年人
</script>

類的繼承：

< script>
  class User{
    constructor(name, age = 20){ // 構造方法
      this.name = name; // 添加屬性並且賦值
      this.age = age;
   }
    sayHello(){
      return "hello"; // 定義方法
   }
    static isAdult(age){ //靜態方法
      if(age >= 18){
        return "成年人";
     }
      return "未成年人";
   }
 }
  class ZhangSan extends User{
    constructor(){
      super("張三", 30); //如果父類中的構造方法有參數，那麼子類必須通過super調用父類的構造
方法
      this.address = "上海";//設置子類中的屬性，位置必須處於super下面
   }
 }
  // 測試
  let zs = new ZhangSan();
  console.log(zs.name, zs.address);
  console.log(zs.sayHello());
  console.log(ZhangSan.isAdult(20));
  < /script>

1.10、Generator函數

Generator 函數是 ES6 提供的一種異步編程解決方案，語法行爲與傳統函數完全不同。
Generator函數有兩個特徵: 一是 function命令與函數名之間有一個星號: 二是函數體內部使用 yield吾句定義不同的
內部狀態。
用法：

< script>
  function* hello () {
    yield "hello";
    yield "world";
    return "done";
 }
  let h = hello();
 
  console.log(h.next()); //{value: "hello", done: false}
  console.log(h.next()); //{value: "world", done: false}
  console.log(h.next()); //{value: "done", done: true}
  console.log(h.next()); //{value: undefined, done: true}
</script>

可以看到，通過hello()返回的h對象，每調用一次next()方法返回一個對象，該對象包含了value值和done狀態。直到遇到return關鍵字或者函數執行完畢，這個時候返回的狀態爲ture，表示已經執行結束了。

1.10.1、for…of循環

通過for…of可以循環遍歷Generator函數返回的迭代器。
用法：

< script>
  function* hello () {
    yield "hello";
    yield "world";
    return "done";
 }
  let h = hello();
  for (let obj of h) {
    console.log(obj);
 }
 < /script>
// 輸出：
hello
world

1.11、修飾器(Decorator)

修飾器(Decorator)是一個函數，用來修改類的行爲。 ES2017 引入了這項功能，目前 Babel 轉碼器己經支持。
使用：

< script>
  @T //通過@符號進行引用該方法，類似java中的註解
  class User {
    constructor(name, age = 20){
      this.name = name;
      this.age = age;
   }
 }
 
  function T(target) { //定義一個普通的方法
    console.log(target); //target對象爲修飾的目標對象，這裏是User對象
    target.country = "中國"; //爲User類添加一個靜態屬性country
 }
  console.log(User.country); //打印出country屬性值
</script>

運行報錯：

原因是，在 ES6中，並沒有支持該用法，在ES2017中才有，所以我們不能直接運行了，需要進行編碼後再運行。
轉碼的意思是：將ES6或ES2017轉爲ES5執行。類似這樣：

// 轉碼前
input .map(item =>item + 1);
//轉碼後
input.map(function (item) {
  return item + 1;
})

ES6 新特性