ES6學習隨筆--字符串模板、解構賦值、對象、循環、函數、Promise、Generrator

在線編譯器：babel、github

在nongjs中使用
'use strict'
let a = 12;

運行node ：
node --harmony_destructuring  xxx.js


代碼塊：
    用{}包起來的代碼塊，比如 if for while
    特點：只能在代碼塊里面使用

    var 只有函數作用域，可以重復聲明，
    let const 有塊級作用域，不可重復聲明

    封閉空間
    ES5:
    (function() {
        var a = 12;
    })();

    ES6:
    {
        let a = 12;
    }


    總結：塊級作用域，其實就匿名函數立即調用

const：用來定義常量，一旦賦值，再也修改不了；const 定義常量，聲明的時候必須有初始值。


【字符串】
定義字符串： const str = `繼續前行，不忘初心`;

字符串的拼接： 
    ES5：
    'abc'+變量+'def'
    ES6：
    `abc${變量}def`


【解構賦值】：左邊和右邊的解構是一樣的
    var [a,b,c] = [12,5,8];
    alert(b);  // => 5

    var {a,b,c} = {b:5,a:12,c:8}
    alert(a);  // =>12   json和順序無關，json是無序的

    let [a,[b,c],d] = [1,[2,3],4];
    console.log(a,b,c,d);     // 模式匹配  ==》左側和右側格式相同

    解構賦值可以給默認值：
    ES5:
    var a = json.a || 12;
    ES6:
    let {time = 12, id = 0} = {};


    function getPos() {
        return {left: 100, top:200};
    }

    let {left, top} = getPos();
    console.log(left, top);

【數組的復制】    
1》var arr = [1,2,3];
var arr2 = [];
for(var i=0; i<arr.length;i++) {
    arr2[i] = arr[i]
}
arr2.pop();  // arr不會改變
console.log(arr, arr2)


2》let arr = [1,2,3];
let arr2 = Array.from(arr);

3》Es6：
    let arr = [1,2,3];
    let arr2 = [...arr];
    arr.pop();
    console.log(arr2,arr);
4》argument 
    function show(){
        console.log(arguments);  // =>arguments是不定參數的數組，只有數組的長度和下標，沒有數組的方法，在這里執行數組的arguments.push(5) 會報錯
    }
    function show(...args) {
        console.log(args);   // 使用超級復制...可以在新數組中使用數組的方法
    }
    show(1,2,3,4);

【map對象】
    var map = new Map();
    //設置  map.set(name,value);
    map.set('a','apple');
    map.set('b','banana');
    console.log(map);  // =>  {a => apple, b => banana}
    //獲取  map.get(name);
    alert(map.get('a'));  // => apple
    //刪除  map.delelte(name)
    map.delelte(a);
    console.log(map);

【循環】
    ES6中新增： for of 循環，遍歷(迭代，循環)，整個對象，表現類似於for in，
    區別： 可以循環數組，不可以循環json，真正的目的是為了循環map對象
    
    let arr = ['a','b','c','d'];

    for(var i in arr) {
        console.log(i);   // 遍歷的是數組的索引
    }

    for(let i of arr) {
        console.log(i);   // 遍歷的是數組的每一項
    }
   ---------------------------------------------------
    var map = new Map();
    map.set('a','apple');
    map.set('b','banana');
    map.set('c','ccc');
    map.set('d','ddd');

    // map函數不能使用for in循環
    for(let name of map) {
        console.log(name);   //  name代表整個鍵值對  a,apple  本質是循環了map.entries()
    }
    // 如果想循環出key 和 value 
    for(let [key,value] of map) {
        console.log(key, value);    // a apple
    }
    // 只循環key   也可以循環數組
    for(let key of may.key()) {
        console.log(key);
    }
    // 只循環value
    for(let val of map.values()) {
        console.log(val)
    }

【函數】    
    ES5：
        function show(a) {
            return a;
        }
        show(12);
    ES56:
        箭頭函數：
            1.箭頭函數中this的指向：this的指向指向window
            var a = 100;
            var json = {
                a: 1,
                b: 2,
                show: () => {
                    return this.a;
                }
            }
            
            alert(json.show());   // => 100,因為箭頭函數中的this指向了window

            2.箭頭函數中arguments不能使用了

        對象：對象語法簡潔化
            單體模式
                var  person = {
                     name: 'abc',
                     age: 16,
                     showName: function() {
                         alert(this.name);
                     },
                     showAge: function() {
                         alert(this.age);
                     }
                }
                // 解決this的指向window的問題
                var name = 'abc';
                var age = 100;
                var person ={
                    name,
                    age,
                    showName() {
                        return this.name;
                    },
                    showAge() {
                        return this.age;
                    }
                }

            面向對象：
                ES5：
                    function Person(name, age) {
                        this.name = name;
                        this.age = age;
                    }
                    Person.prototye.showName = function() {
                        return this.name;
                    }
                    Person.prototype.showAge = function() {
                        return this.age;
                    }

                    var p1 = new Person('json',18);
                    alert(p1.showAge());

                ES6:有類class，有構造函數 constructor()

                    class Person {   // 類
                        constructor(name = 'default' , age =0 ) {   //  函數的默認值
                            this.name = name;
                            this.age = age;
                        }
                        showName() {
                            return this.name;
                        }
                        showAge() {
                            return this.age;
                        }
                    }

                    let p1 = new Person('json',18);
                    let p2 = new Person('lison',99);

                    alert(p1.showName == p2.showName);  // => true
                    alert(p1.constructor == p2.constructor);  // => true

            函數的默認值

                function move(obj = '對象必須要填寫', json= {}, {time:500,easiong='ease-out'} = {}) {
                    console.log(json);
                }

                move();

            面向對象的繼承：
                ES5:   子類.prototype = new 父類();
                    function Worker(name,age) {
                        Person.apply(this, arguments);
                    }
                    Worker.prototype = new Person();

                    var p1 = new Person('jason',10,'要飯的')
                
                ES6:  使用super() 來繼承父級的構造函數，constructor表示自己獨有的，會覆蓋父級過來的屬性
                    class Person {   // 類
                        constructor(name = 'default' , age =0 ) {   //  函數的默認值
                            this.name = name;
                            this.age = age;
                        }
                        showName() {
                            return this.name;
                        }
                        showAge() {
                            return this.age;
                        }
                    }
                    class Worker extends Person {
                        constructor(name, age, job = '失業') {
                            surper(name, age);
                             this.job = job;
                        }
                        showJob() {
                            return this.job;
                        }
                    }

                    let p1 = new Person('aaa',11);
                    let w1 = new Worker('json',28);

                    alert(w1.showJob());   // => 失業


                    //面向對象選項卡
                        <style media="screen">
                          #box div{
                            width:4rem;
                            height:4rem;
                            background:#ccc;
                            border:0.01rem solid #000;
                            display:none;
                          }
                          #box .on{ 
                            background: #f60; 
                            color: aqua
                          }
                        </style>
                      </head>
                      <body>
                        <div id="box">
                          <input type="button" value="aaa"  class="on">
                          <input type="button" value="bbb">
                          <input type="button" value="ccc">
                          <div style="display:block;">1111</div>
                          <div>2222</div>
                          <div>3333</div>
                        </div>
                        
                      <script>
                        // 面向對象的選項卡
                        class Tab {
                          constructor(id) {
                            this.oBox = document.getElementById(id);
                            this.aBtn = this.oBox.getElementsByTagName('input');
                            this.aDiv = this.oBox.getElementsByTagName('div');
                            this.init();
                          }
                          init(){
                              for(let i=0; i<this.aBtn.length; i++){
                                  this.aBtn[i].onclick = function(){
                                      this.hide();
                                      this.show(i);
                                  }.bind(this);
                              }
                          }
                          hide() {
                            for(let i=0; i<this.aBtn.length; i++) {
                              this.aBtn[i].className = '';
                              this.aDiv[i].style.display = 'none';
                            }
                          }
                          show(index) {
                              this.aBtn[index].className = 'on';
                              this.aDiv[index].style.display = 'block';
                          }
                        }

                        new Tab('box');
                        
                        // 繼承（自動播放選項卡）
                        // 繼承
                        class AutoTab extends Tab {
                          constructor(id) {
                            super(id);
                            setInterval(this.next.bind(this),1000);
                          }
                          next() {
                            this.iNow++;
                            if(this.iNow == this.aBtn.length) {
                              this.iNow = 0;
                            }
                            this.hide();
                            this.show(this.iNow);
                          }
                        }

                        new Tab('box');
                        new AutoTab('autoBox');

【模塊化】---也可以解決變量沖突，定義加載順序
導出：a.js: 
    const a = 12;
    export default a;

    // export default function sum() {  // 導出函數的返回值
    //     return a+b;
    // }
 
 引用：
     import modA from './a.js';

導出多個模塊：
    const a = 12;
    const b = 5;

    export default {  // 相當於導出一個json
        a,
        b
    }

【Promise】協議、承諾  是一個對象，用來異步操作數據（消息）
狀態：
    pending(等待、處理中) => Resolve(完成、fullFilled) 
                          => Rejected(拒絕、失敗)


    let p1 = new Promise(function(resolve,reject) {

    });

    p1.then(成功(resolve),失敗(reject));

    Promise.catch();   // 捕獲錯誤 

    let p1 = new Promise( (resolve, reject) => {
        resolve('成功了');
    });

    p1.then(function(value) {
        console.log(value);  // => 成功了
        throw '發生錯誤了';
    }).catch( function(err) {
        console.log(err);   // => 發生錯誤了
    })

    Promise.all([p1,p2,p3..])   // 全部，將多個promise對象組合，包裝成一個實例

    let p1 = Promise.resolve(12);
    let p2 = Promise.reject(5);

    Promise.all([p1,p2]).then(function(res) {
        console.log('錯誤了'+res);
    },function(res) {
        console.log('錯誤了'+res);
    });
    //  => 錯誤了5    只要一個失敗就返回失敗信息，全部成功才會返回成功信息

    Promise.race([p1,p2,p3...])   // 返回一個promise對象，返回的最先執行的promise

    let p1 = Promise( (resolve, reject) => {
        setTimeout(resolve,500,'先執行');
    });
    let p2 = Promise( (resolve, reject) => {
        setTimeout(resolve,1000,'后執行');
    });

    Promise.race( [ p1, p2] ).then(function(res) {
        console.log(res);    // => 先執行
    });

    Promise.reject()    //  生成一個錯誤的Promise
    Promise.resolve(value/promise)   //  生成一個成功的Promise ，value:成功的值; promise:成功后的promise;   
------------------------------------------------------------
  // 定義一個最簡單的ajax
  function ajax(url,fnSucc,fnFail) {
    var oAjax = new XMLHttpRequest();
    oAjax.open('GET',url,true);
    oAjax.send();
    oAjax.onload = function() {
      if(oAjax.readyState == 4 && oAjax.status == 200) {
        fnSucc(oAjax.responseText);
      }else{
        fnFail(oAjax.status);
      }
    };
  }
  // 點擊按鈕從a.txt獲取數據，如果成功展示到div中，如果失敗，在div中顯示錯誤碼
  let oBtn = document.getElementById('btn1');
  let oDiv = document.getElementById('div1');

  oBtn.onclick = function() {
    let pro = new Promise( (resolve, reject) => {
        ajax('a.txt', function(str) {
          resolve(str);
        },function(str) {
          reject(str);
        });
    });

    pro.then(function(value) {
      oDiv.innerHTML = value;
    },function(value) {
      oDiv.innerHTML = reject;
    })
  }

【Generrator】 生成器，是一個函數，可以遍歷，函數名前面有*，函數內部使用的yield語句，for of函數可以遍歷Generrator函數

    語法： function* show() {   // generrator 函數
        yield 'hello';
        yield 'world';
        yield 'ES6';
    }

    let res = show();   
    console.log(res.next());    // => Object   {value:'Hello',done:false}      done 表示還沒有結束,執行一次出現一次返回值   如果沒有return，最后一次循環會出現   {value:undefined, done:true}，如果有return，遇到return顯示return的值和done：true

    // Generrator 函數每次返回一個value和一個done

    yield語句本身沒有返回值，或者每次返回undefined

    next 可以帶參數，給上一個yield


    function* fn() {
        yield 1;
        yield 2;
        yield 3;
        yield 4;
        yield 5;
        yield 6;
        return 7
    }

    for(let v of fn()) {
        document.write(v);   // => 123456   
    }