ES6實用新特性

兼容性

http://kangax.github.io/compat-table/es5/
http://kangax.github.io/compat-table/es6/

• ES6(ES2015)兼容環境:
  IE10以上，Chrome、FireFox、移動端、NodeJS
• 在低版本環境中使用的解決方案：
  1 在線轉換 brower.js
  2 提早編譯

ES6新特性

1. 變量
2. 函數
3. 數組
4. 字符串
5. 面向對象
6. Promise
7. generator/yield(對Promise的封裝)
8. 模塊化

1、變量

• var 的缺陷：

1. 能夠重複聲明

var a = 1;
var a = 2;

1. 沒法限制修改
   常量：PI
2. 沒有塊級做用域

• let、const的特性

1. 不能重複聲明
2. 聲明能夠修改的變量/不可修改的常量
3. 擁有塊級做用域{}

2、箭頭函數

對函數的簡寫

() => {

}

• 特色：

1. 若是隻有一個參數， () 能夠省略
2. 若是函數塊中只有一個 return這一行代碼， {} 能夠省略

let show = a => a * 2;
alert(show(1));

3、函數參數

• 三個點 ...
... + 數組名 = 數組名[0] ,數組名[1] ,數組名[2], ..,數組名[length-1] }，做爲參數時互相轉換

1. 擴展形參，接收剩餘參數，...args必須是最後一個參數

function show(a, b, ...args) {
    alert(a);
    alert(b);
    alert(args);  //3,4,5   args是一個數組
}

show(1, 2, 3, 4, 5)

1. 展開實參

function show(a, b, c) {
    alert(a);
    alert(b);
    alert(c);
}
let arr = [1, 2, 3]
//show(1, 2, 3)
show(...arr)

1. 默認參數

function show(a, b = 2, c = 3) {
    alert(a)
    alert(b)
    alert(c)
}
show(1,5)

4、解構賦值

1. 必須是聲明且賦值語句
2. 等號左右兩邊結構必須相同
3. 右邊必須是值
4. 寫法形式數組[]和JSON字符串{}
5. 解構賦值，賦值也很關鍵

• 數組形式

let [a, b] = [1, [2]];  //同時聲明數組a、b而且賦值
console.log(a, b);  //  1, [2]

• 右邊是JSON字符串形式

相比數組寫法，左邊是a、b右邊也必須是 a 和 b，寫法：a: + 值 和 b: + 值 。若是是 c: + 值 和 d: + 值，那麼 a、b 的值爲
undefind，至關於只是聲明瞭a和b

let {a, b, c} = {a: 1, b: [2],c: {c: 3}};
console.log(a, b, c);  //  1, [2], {c: 3}

• 二者結合

let [{a, b} ,[c, d], e] = [{a: 1,b: 2}, ['3', ['d']],'e'] 
console.log(a, b, c, d, e);  //  1 2 "3" ["d"] "e"

• 注意點

錯誤1：只能是[]中包含{}，否則無法寫，會報錯，由於最外層就決定了最大的基調是變量 : 值的形式，[b]的變量不知道是什麼

let {a,[b]} = {a: 1, :[2]]};  //報錯
console.log(a, b);

總結：左邊聲明多個變量，右邊用不一樣寫法爲變量賦值，能夠賦值任意類型
錯誤2：

let [a, b] = {a: 1 ,b: 2}  //  結構不一樣 報錯 Uncaught TypeError: {(intermediate value)(intermediate value)} is not iterable
let [a, b] = [a: 1 ,b: 2]  //  寫法錯誤 報錯 Uncaught SyntaxError: Unexpected token :
let {a, b} = {1 , 2}  //  寫法錯誤 Uncaught SyntaxError: Unexpected token ,

錯誤3：聲明和賦值不在一塊兒

let [a, b];  //  沒有這樣的聲明變量方式
[a, b] = {a: 1 ,b: 2}    // Uncaught SyntaxError: Missing initializer in destructuring declaration

5、數組

• map，返回新數組，function依次操做數組元素，返回新數組元素
  arr 調用map函數的數組
  thisValue 在函數體中的this

var array = [1, 2, 3];
var thisValue = '4';
var newArray = array.map(function(value, index, arr){
    return (value + '-' + index + '-' + this + '-' + arr)
},thisValue)
console.log(newArray);  //  ["1-0-4-1,2,3", "2-1-4-1,2,3", "3-2-4-1,2,3"]

• reduce，彙總，從左向右每次取一個數組元素
  result 做爲每次的返回值
  thisValue 初始值，做爲循環value的值

//求和
var array = [1, 2, 3];
var thisValue = 4;
var newArray = array.reduce(function(result, value, index, arr){
    return result + value;  //下一次執行函數時，`result`參數的值

},thisValue)  //thisValue //第一次執行函數，`result`參數的值
console.log(newArray);  //  10

• filter過濾器
  對數組array中的元素依次按條件過濾，返回新數組，true留下，false丟棄
  thisValue,函數中this指代

var array = [1, 2, 3];
var thisValue = 4;
var newArray = array.filter(function(value, index, arr) {
    return value > 1 ? true : false;

}, thisValue)
console.log(newArray);  //  [2, 3]

• forEach迭代

var array = [1, 2, 3];
var thisValue = 4;
array.forEach(function(value, index, arr) {
    console.log(value + '-' + this + '-' + arr);
    //  1-4-1,2,3
    //  2-4-1,2,3
    //  3-4-1,2,3
}, thisValue)

6、字符串

• 新增方法：startsWith(str[, position])
  第一個參數用來比較，
  第二個參數(可省略)時原字符串開始的位置,默認0。從包含開始位置的地方開始比較

var str = 'abcd';
console.log(str.startsWith('a', 0));    //true
console.log(str.startsWith('a', 1));    //false

• 新增方法 endsWith(str[, position])
  從不包含末尾位置的地方開始

var str = 'abcd';
console.log(str.endsWith('d', 0));    //true
console.log(str.endsWith('d', 4));    //false 默認str.length

• 字符串模板
  能夠換行
  返單引號`+${}`

let str = 'abcd'
let str1 = `${str}ef
g
 h` 
console.log(str1); 
//abcdef
//g
// h  輸出也有一個空格

7、面向對象

1. 新增關鍵字class

• 舊寫法
  構造函數設置實例的屬性
  原型設置實例的方法

function Book(title) {
    this.title = title;
}

Book.prototype = {
    constructor: Book,
    showTitle: function() {
        console.log(this.title)
    }
}
var book = new Book('ES6');
book.showTitle(); //ES6

• 新寫法
  構造器constructor初始化屬性
  直接在類中添加方法，方法沒有使用function關鍵字

class Book{
    constructor(title){
        this.title = title;
    }

    showTitle(){
        console.log(this.title)
    }
}

let book = new Book('ES2015')
book.showTitle();   //ES2015

2. 繼承

執行父類的構造函數，使子類繼承父類的屬性和方法

• 舊寫法

function MyBook(title, name) {
    Book.call(this, title);  
    this.name = name;
}
MyBook.prototype = new Book();
MyBook.prototype.constructor = MyBook;
MyBook.prototype.showName = function() {
    console.log(this.name);
}

var myBook = new MyBook('ES6', 'wangcf');
myBook.showTitle(); //ES6
myBook.showName(); //wangc

• 新寫法

class Book {
    constructor(title) {
        this.title = title;
    }

    showTitle() {
        console.log(this.title)
    }
}

class MyBook extends Book {
    constructor(title, name) {
        super(title); //執行父類的構造函數
        this.name = name;
    }

    showName() {
        console.log(this.name)
    }
}

let myBook = new MyBook('ES2015', '張三')
myBook.showTitle(); //ES2015
myBook.showName(); //張三

8、JSON和對象

• 注意：JSON字符串中只能使用雙引號
  JSON字符串中的key必須用引號括起來

let obj = {
    a: 1,
    b: '2'
}
let json = JSON.stringify(obj)
console.log(json);  // {"a":1,"b":"2"}

• key和value變量的名字形同能夠簡寫

let a = 1;
let b = 2;
let json = { a: a, b: b };
let json1 = { a, b };
console.log(json); //{a: 1, b: 2}
console.log(json1); //{a: 1, b: 2}

• function能夠簡寫，省略:function

舊寫法

let obj = {
    a: 1,
    show: function(){
        console.log(this.a);
    }
}
obj.show();  // 1

新寫法

let obj = {
    a: 1,
    show(){
        console.log(this.a);
    }
}
obj.show();  // 1

9、Promise異步

不適用於解決下一個回調依賴上一次結果的狀況
適用一次性執行多個請求，各請求之間無關
用同步的方式書寫異步代碼

• Promise.all 所有成功執行resolve

• Promise.race 哪一個快就執行resolve

  建立一個單一的Promise

let p = new Promise(function(resolve, reject){
    //異步代碼
    //成功：resolve
    //失敗：reject
    if(true){
        resolve('成功');
    }else{
        reject('失敗')
    }
})

p.then(function(data){
    console.log(data);
},function(data){
    console.log(data);
})
// 成功

建立多個Promise

let p1 = new Promise(function(resolve, reject) {
    if (true) {
        resolve('成功1');
    } else {
        reject('失敗1')
    }
})

let p2 = new Promise(function(resolve, reject) {
    if (true) {
        resolve('成功2')
    } else {
        reject('失敗2')
    }
})

Promise.all([p1, p2]).then(function(arr) {
    //返回值是一個數組，順序保存多個Promise返回值
    console.log('p1和p2所有resolve');
    let [data1, data2] = [arr[0], arr[1]];
    console.log(data1 + data2);
}, function(data) {
    //有一個失敗就當即進入，不會繼續執行其餘Promise
    console.log('p1和p2其中有一個reject');
    console.log(data);
})

封裝Promise

function createPromise(num) {
    return new Promise(function(resolve, reject) {
        if (true) {
            resolve('成功' + num);
        } else {
            reject('失敗1' + num);
        }
    })
}

Promise.all([
    createPromise(1),
    createPromise(2)
]).then(function(arr) {
    //返回值是一個數組，順序保存多個Promise返回值
    console.log('p1和p2所有resolve');
    let [data1, data2] = [arr[0], arr[1]];
    console.log(data1 + data2);
}, function(data) {
    //有一個失敗就當即進入，不會繼續執行其餘Promise
    console.log('p1和p2其中有一個reject');
    console.log(data);
})

10、generator/yield

完美解決下一個回調依賴上一次執行結果的狀況
函數組成部分：*和yield，建立generator對象
通常函數：一直執行到完
generator函數：能夠在中間暫停,執行使用generatro.next

1.generator

function *show(){
    console.log(1)  //1

    yield;  // 暫停

    console.log(2)  //沒有next則不執行這段子函數
}

let gen = show();
//gen.next();
gen.next();  //執行到yield暫停

2.yield

將函數分割成多個子函數

• 能夠傳參
• 能夠有返回值，返回中間結果

function* show(num) {
    console.log(num); //5
    console.log(1); //1  
    let y = yield 7;    //y獲取第一個子函數的結果，第一個子函數的返回值
    console.log(2); //2
    console.log(y) //4
    console.log(num) //5
    return 6;   //最後一個子函數依賴return返回
}

let gen = show(5); //第一個子函數的參數在這裏傳遞
let res1 = gen.next(3);
let res2 = gen.next(4); //第二個next傳參才能夠接收
console.log(res1)   //{value: 7, done: false}
console.log(res2)   //{value: 6, done: true}

3.generator解決異步

引用runner和jQuery文件

runner(function *(){
    let data1 = yield $.ajax(url: xxx, dataType: 'json');
    let data2 = yield $.ajax(url: xxx, dataType: 'json');
    let data3 = yield $.ajax(url: xxx, dataType: 'json');
})