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