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>
  #box div{
    width:4rem;
    height:4rem;
    background:#ccc;
    border:0.01rem solid #000;
    display:none;
  }
  #box .on{
    background: #f60;
    color: aqua
  }
style>

<div id="box">
  <input type="button" value="aaa"  class="on">
  <input type="button" value="bbb">
  <input type="button" value="ccc">
  <div style="display:block;">1111div>
  <div>2222div>
  <div>3333div>
div>         

JS: <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');
 script>

【模块化】---也可以解决变量冲突，定义加载顺序
导出：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   
  }