常用的ES6知識點
　　1，let和const
　　2，解構賦值
　　3，正則擴展
　　4，數值擴展
　　5，數組擴展
　　6，函數擴展
　　7，對象擴展
　　8，字符串擴展
　　9,Symbol
　　10,Promise 異步操作
　　11,Generator 異步操作
　　12,模塊化

//  1, let  和 const
// let 聲明的變量只在作用域有效
function test() {
    for (let i = 1;i<3;i++) {
        console.log(i);
    }
   // console.log(i); //報錯
    //ES6 強制使用嚴格模式  變量未聲明不能引用，所以不是undefined
    let a = 1;
    //let a = 2; 不能用一個變量定義

    const PI = 3.1415926; //常量 聲明的時候必須賦值
    //PI = 2; PI是一個只讀屬性 不能修改

    const obj = {
      a:1
    };
    obj.a = 3;
    console.log(obj); // obj可以改變  指針不改變
}

// 2， 解構賦值 （左右解構一一對應進行賦值）
//      分類 ： 數組解構賦值 對象解構賦值 字符串結構賦值
//            布爾值解構賦值  函數參數解構賦值  數值解構賦值

{
  let a,b,c;
  [a,b]=[1,2];
  console.log(a,b); // 1  2  數組類型解構賦值
}
{
    let a,b,c;
    [a,b,c]=[1,2];
    console.log(a,b,c); // 1  2  undefined  如果沒有配對成功，用默認值 undefined
}
{
  let a,b,c;
  [a,b,...c] = [1,2,3,4,5,6,7,8,9];
  console.log(a,b,c);// 1 2 [3, 4, 5, 6, 7, 8, 9]
}
{
    let a,b;
    ({a,b} = {a:1,b:2})
    console.log(a,b);// 1 2  對象解構賦值
}
// 使用場景 1, 變量交換
{
    let a = 1,b =2;
    [a,b] = [b,a];
    console.log(a,b); // 2 1 
}
// 使用場景2   選擇性的接受某個變量
{
    function fun() {
        return [1,2]
    }
    let a,b;
    [a,b] =fun();
    console.log(a,b) // 1,2
}
{
    function fun2() {
        return [1,2,3,4,5];
    }
    let a,b;
    [a,,,b] = fun2();
    console.log(a,b); // 1 4
}
{
    function fun3() {
        return [1,2,3,4,5];
    }
    let a,b;
    [a,...b] = fun3();
    console.log(a,b); // 1 [2,3,4,5]
}
//對象的解構賦值 (註意key對應)
{
    let obj = {a:111,b:false,c:‘test‘};
    let {a,b,c} = obj;
    console.log(a,b,c); // 111 false "test"
    let {x,y,z} = obj;
    console.log(x,y,z); //undefined undefined undefined
}
{
    let metaData = {
        title:‘abc‘,
        test:[{
            title:‘test‘,
            desc:‘description‘
        }]
    };
    let {title:esTitle,test:[{title:testTitle}]} =metaData;
    console.log(esTitle,testTitle); //abc test
}

//  ES6正則擴展
//     正則新增的特性： 構造函數的變化 正則方法的擴展，u修飾符，y修飾符，s修飾符
{   //es5寫法
    let reg1 = new RegExp(‘xyz‘,‘i‘);
    let reg2 = new RegExp(/xyz/i);
    console.log(reg1.test(‘xyz123‘),reg2.test(‘xyz123‘)); // true true
    //es6寫法 es6允許第一個參數是正則表達式,後面的修飾符會覆蓋前面表達式的修飾符
   let reg3 = new RegExp(/xyz/ig,‘i‘);
   console.log(reg3.flags); //i
}
{// y修飾符 y與g都是全局匹配，g是從上次匹配的位置開始繼續尋找，直到找到匹配的位置開始，中間任何匹配上都算。y修飾符緊跟著的笑一個必須匹配成功才算
    let a  = ‘aaaa_aaaa_a‘;
    let a1 = /a+/g;
    let a2 = /a+/y;
    console.log(‘one‘,a1.exec(a),a2.exec(a));//one ["aaaa", index: 0, input: "aaaa_aaaa_a"] ["aaaa", index: 0, input: "aaaa_aaaa_a"]
    console.log(‘two‘,a1.exec(a),a2.exec(a));//two ["aaaa", index: 5, input: "aaaa_aaaa_a"] null
    //是否開啟了y
    console.log(a1.sticky,a2.sticky);//false true
}
{// u修飾符 unicode  正則處理unicode的一個特征值
    //有大於兩個字節的時候 一定要加上u
     // . 只能匹配小於兩個字節的字符，也不能識別換行符，回車符，行分隔符，段分隔符 遇到這些要用s修飾符
    console.log(‘u-1‘,/^\uD83D/.test(‘\uD83D\uDC2A‘)); //當成兩個unicode    true
    console.log(‘u-2‘,/^\uD83D/u.test(‘\uD83D\uDC2A‘));//當成一個unicode解析     false
    console.log(‘\u{20BB7}‘); //??
    let s = ‘??‘;
    console.log(‘u1‘,/^.$/.test(s)); // false
    console.log(‘u2‘,/^.$/u.test(s)); // true
}

/*
* 字符串擴展
    字符串新增特性
        Unicode表示法：0xffff
        遍歷接口
        模板字符串
        新增方法（10種）
* */
import lesson17 from "./lesson17";

{ // Unicode表示法
    console.log(‘a‘, ‘\u0061‘); // a a
    //Unicode 大於兩個字節 0xffff
    console.log(‘s‘, ‘\u20BB7‘); // s ?7
    console.log(‘s‘, ‘\u{20BB7}‘); // s ??
}
{    //ES5
    let s = ‘??‘;
    console.log(‘length‘,s.length); // 2
    //字符
    console.log(‘0‘,s.charAt(0));  //0 ?
    console.log(‘1‘,s.charAt(1)); //1 ?
    //編碼值
    console.log(‘at0‘,s.charCodeAt(0)); //at0 55620
    console.log(‘at1‘,s.charCodeAt(1)); //at1 56611
}
{     //es6  4個字節
    let s1 = ‘??a‘;
    console.log(‘length‘,s1.length); // 2
    //字符
    console.log(‘0‘,s1.codePointAt(0));  //0 134071
    console.log(‘0‘,s1.codePointAt(0).toString(16));  //0 20bb7
    console.log(‘1‘,s1.codePointAt(1));  // 57271
    console.log(‘2‘,s1.codePointAt(2));  // 97
}
{
    console.log(String.fromCharCode(‘0x20bb7‘));//es5 亂碼?
    console.log(String.fromCodePoint(‘0x20bb7‘));//es6 ??
}
{ // 字符串的遍歷器接口
    let str = ‘\u{20bb7}abc‘;
    for (let i=0;i<str.length;i++) {
        console.log(‘es5‘,str[i]); // es5 ??abc
    }
    for (let code of str) {
        console.log(‘es6‘,code); //es6 ??abc
    }

}
{//字符串是否包含某個字符
    let str = ‘string‘;
    console.log(‘includes‘,str.includes(‘r‘));// true
    console.log(‘includes‘,str.includes(‘c‘));// false
    //判斷是不是已某些字符為起始的呢
    console.log(‘start‘,str.startsWith(‘s‘)); // true
    console.log(‘start‘,str.startsWith(‘t‘)); // false
    console.log(‘end‘,str.endsWith(‘ng‘)); // true
}
{   //重復
    let str = ‘abc‘;
    console.log(str.repeat(3)); //重復3遍
}
{ // 模板字符串    數字1左邊的那個鍵 ``    數據項${}
    let name =‘list‘;
    let info = ‘hello world‘;
    let m = `i am ${name},${info}`;
    console.log(m);//i am list,hello world
}
// {   //es7的草案  補白  使用需要babel-polyfill
//     console.log(‘1‘,padStart(2,‘0‘)); //01
//     console.log(‘1‘,endStart(2,‘0‘)); //10
// }
{//標簽模板 作用1，處理多語言轉換的時候2，xss攻擊
    let user = {
        name:‘list‘,
        info:‘hello world‘
    };
    abc`i am ${user.name},${user.info}`;
    function abc(s,v1,v2) {
        console.log(s,v1,v2);
        return s+v1+v2;
    }
}
{// raw 方法的使用    把\轉譯了
    console.log(String.raw`Hi\n${1+2}`);  //  Hi\n3
    console.log(`Hi\n${1+2}`); //  Hi 換行 3
}

/*
*  數值擴展
*       1，新增方法
*       2，方法調整
* */



{
// es6 二進制數值是以0b開頭  八進制0o開頭
    console.log(0b11111); //15  二進制
    console.log(0o11111)  //4681 八進制
}
{//判斷是不是有盡的
  console.log(‘15‘, Number.isFinite(15)); // true
  console.log(‘NaN‘, Number.isFinite(NaN)); //false
  console.log(‘1/0‘, Number.isFinite(‘true‘/0)); //false
  console.log(‘NaN‘, Number.isNaN(NaN)); //true
  console.log(‘NaN‘, Number.isNaN(0)); //false
}
{//判斷是不是整數 Number.isInteger  -2^53~2^53 不包括兩端
    console.log(‘25‘,Number.isInteger(25));//true
    console.log(‘25.0‘,Number.isInteger(25.0));//true
    console.log(‘25.1‘,Number.isInteger(25.1));//false
    console.log(‘String-25‘,Number.isInteger(‘25‘));//false
    console.log(‘NaN‘,Number.isInteger(NaN));//false
    console.log(Number.MAX_SAFE_INTEGER);
    console.log(Number.MIN_SAFE_INTEGER);
    //判斷是不是一個安全的數
    console.log(‘10‘,Number.isSafeInteger(10)); // 10 true
    console.log(‘a‘,Number.isSafeInteger(‘a‘)); // a false
}
{//取小數的整數部分
    console.log(4.1,Math.trunc(4.1)); // 4,4
    console.log(4.9,Math.trunc(4.9)); // 4,4
}
{
    //判斷是是正數負數  返回值 -1，0，1，NaN
 console.log(-5,Math.sign(-5)); // -1
 console.log(0,Math.sign(0));  // 0
 console.log(5,Math.sign(5)); // 1
 console.log(‘5‘,Math.sign(‘5‘)); // 1
 console.log(‘5aa‘,Math.sign(‘5aa‘)); // NaN
}

{ //立方根的計算 Math.cbrt()
    console.log(‘-1‘,Math.cbrt(-1)); //-1
    console.log(‘8‘,Math.cbrt(8)); //2
}

/*
*  數組新增特性
*   Array.from  Array.of copyWithin find\findIndex fill
*   inludes  entries\keys\values
*
* */

{  // 轉換成數組
    let arr = Array.of(3,4,7,8,9);
    console.log(arr); // [3, 4, 7, 8, 9]
    let arrEmpty = Array.of();
    console.log(arrEmpty); // []
}
{ // 把偽數組轉換成數組
    let a = document.querySelectorAll(‘a‘);
    console.log(a);
    let aArr = Array.from(a);
    aArr.forEach(function (item) {
        console.log(item.textContent);
    });
    console.log(Array.from([1,3,5],function (item) {
        return item*2;
    })); // [2,6,10]
}
{ //填充數組
    console.log(‘fill‘,[1,2,3,4].fill(8)); //  [8, 8, 8, 8]
    console.log(‘fill‘,[‘a‘,‘b‘,‘c‘,‘d‘].fill(8,1,3)); // ["a", 8, 8, "d"]
}
{   // 返回下標的集合
    for(let index of [‘1‘,‘b‘,‘c‘,‘d‘].keys() ) {
        console.log(‘keys‘,index); //  0123
    }
    // 兼容有問題
    for(let index of [‘1‘,‘b‘,‘c‘,‘d‘].values() ) {
        console.log(‘values‘,index); //1bcd
    }
    for(let [index,value] of [‘1‘,‘b‘,‘c‘,‘d‘].entries() ) {
        console.log(‘entries‘,index,value); // 01  1b 2c 3d
    }
}
{ //把指定位置的成員賦值到指定位置 copyWithin(從哪個位置開始替換,從哪個位置開始讀取數據,從哪個位置截止)
    console.log([1,2,3,4,5].copyWithin(0,3,4)); //[4, 2, 3, 4, 5]
}

{ //查找 find
    console.log([1,2,3,4,5,6].find(function (item) {
        return item >3;  // 4  find 只找第一個符合的成員
    }))
    console.log([1,2,3,4,5,6].findIndex(function (item) {
        return item >3;  // 3  find 只找第一個符合的成員
    }))
}
{
    console.log(‘number‘,[1,2,NaN].includes(1)); // true
    console.log(‘number‘,[1,2,NaN].includes(NaN)); // true
}

/*
*  函數的擴展部分
*       函數新增的特性
*           參數默認值  rest參數  擴展運算符 箭頭函數 this綁定  尾調用
* */


{   //默認值後面不能有沒有默認值的變量
    function test(x,y=‘world‘) {
        console.log(‘默認值‘,x,y);
    }
    test(‘hello‘);// hello world
    test(‘hello‘,‘你好‘);// hello 你好
}

{
    let x = ‘test‘;
    function test2(x,y=x) {
        console.log(‘作用域1‘,x,y);
    }
    test2(‘hello‘); // hello hello
}
{
    let x = ‘test‘;
    function test2(x,y=x) {
        console.log(‘作用域2‘,x,y);
    }
    test2(); //  undefined undefined
}

{
    let x = ‘test‘;
    function test2(c,y=x) {
        console.log(‘作用域3‘,c,y);
    }
    test2(‘hello‘); //  hello test
}

{ //把不確定的參數轉換成數組
    function test3(...arg) {
        for (let v of arg) {
            console.log(‘rest‘,v);
        }
    }
    test3(1,2,3,4,5,‘a‘);  //1 2 3 4 5 a
}
{
    // 擴展運算符
    console.log(...[1,2,3,4]); // 1 2 3 4
    console.log(‘a‘,...[1,2,3]); // a 1 2 3
}
//箭頭函數   參數 =>  返回值
    // 箭頭函數沒有自己的this, 它的this是繼承而來; 默認指向在定義它時,它所處的對象(宿主對象),而不是執行時的對象
{
    let arrow = v => v*2;
    console.log(arrow(3)); //6
    let arrow2 = () => 5;
    console.log(arrow2()); //5
}

{//函數偽調用   提升性能
    function tail(x) {
        console.log(‘tail‘,x);
    }
    function fx(x) {
        return tail(x);
    }
    fx(123);
}

/*
* ES6 語法
*   函數新增的方法
*       簡潔表示法
*       屬性表達式
*       擴展運算符
*       Object新增方法
* */
{
//    簡介表示法
    let o = 1;
    let k = 2;
    let es5 = {
        o:o,
        k:k
    };
    let es6 = {
        o,k
    }
    console.log(es5,es6);
    let es5_method = {
        hello:function () {
            console.log(‘hello‘)
        }
    };
    let es6_method = {
        hello() {
            console.log(‘hello‘);
        }
    }
    console.log(es5_method.hello(),es6_method.hello());
}
{
    // 屬性表達式
    let a = ‘b‘;
    let es5_obj = {
        a:‘c‘,
        b:‘c‘
    };
     let es6_obj = {
         [a]:‘c‘
     };
    console.log(es5_obj,es6_obj);
}
{
    //新增API
    console.log(‘字符串‘,Object.is(‘abc‘,‘abc‘),‘abc‘===‘abc‘);//true true
    console.log(‘數組‘,Object.is([],[]),[]===[]);// false false
//拷貝  淺拷  只拷貝自身的屬性，不拷貝繼承和不可枚舉的屬性
    console.log(‘拷貝‘,Object.assign({a:‘a‘},{b:‘b‘}));

    let  test = {k:123,v:456};
    for (let [key,value] of Object.entries(test)) {
        console.log([key,value]); // ["k", 123] ["v", 456]
    }
}
// {
//     // 擴展運算符 ‘babel-polyfill‘支持也不好，暫時不建議使用
//     let {a,b,...c} = {a:‘testa‘,b:‘testb‘,c:‘testc‘,d:‘testd‘};
//     c = {
//         c:‘testc‘,
//         d:‘testd‘
//     }
// }
/*
* Symbol 數據類型 es6 新增的數據類型
*       Symbol的概念
*       Symbol的作用 聲明的值永遠不相等，保證唯一
* */

{//聲明
    let  a1 = Symbol();
    let  a2 = Symbol();
    console.log(a1===a2); // false
    let a3 =Symbol.for(‘a3‘);//區別：a3是key值，如果註冊過，返回值
    let a4 = Symbol.for(‘a3‘);
    console.log(a3===a4); // true
}
{//作用
    let a1 = Symbol.for(‘abc‘);
    let obj = {
      [a1]:123,
       ‘abc‘:345,
        ‘c‘:345
    };
    console.log(obj);//{abc: 345, c: 345, Symbol(abc): 123}
//    對象中用Symble  for in 、let of 是拿不到屬性的
    for (let [key,value] of Object.entries(obj)) {
        console.log(‘let of‘,key,value);
    }
    let arr =  Object.getOwnPropertySymbols(obj);
    arr.forEach(function (item) {
        console.log(obj[item]); // 123
    })
    //包含非Symbol和 Symbol
    console.log(Reflect.ownKeys(obj));
}

/**
 *  數據結構
 *      set WeakSet Map WeakMap
 */
{
    let list = new Set();
    list.add(5);
    list.add(7);
    console.log(list.size); // 2
}
{
    let arr = [1,2,3,4,5];
    let list= new Set(arr);
    console.log(list.size); //5
}
{// set 唯一的  數組去重
    let list = new Set();
    list.add(1);
    list.add(3);
    list.add(1);
    console.log(list); // {1,3}
    //這種轉換不會進行數據類型的轉換
    let  arr = [1,2,3,1,3,4,5,6,7];
    let  list2 = new Set(arr);
    console.log(list2);
}
{ //delete has clear
    let arr = [‘add‘,‘delete‘,‘clear‘,‘has‘];
    let list = new Set(arr);
    console.log(‘has‘,list.has(‘add‘));
    console.log(‘delete‘,list.delete(‘add‘),list);
    console.log(‘clear‘,list.clear(),list);
}

{   //幾個遍歷方法
    let arr = [‘add‘,‘delete‘,‘clear‘,‘has‘];
    let list = new Set(arr);
    for(let key of list.keys()) {
        console.log(‘keys‘,key);
    }
    for(let value of list.values()) {
        console.log(‘values‘,value);
    }
    for(let value of list) {
        console.log(‘values‘,value);
    }
    for(let [key,value] of list.entries()) {
        console.log(key,value);
    }
    list.forEach(function (item) {
        console.log(item);
    })
}
{// 和set的區別 WeakSet只支持對象，對對象是弱引用，不檢查垃圾回收
    let weakList = new WeakSet();
    let  arg ={};
    weakList.add(arg); // 只能是對象
    console.log(weakList);
    //WeakSet 不能遍歷，沒有clear方法沒有size屬性
}
{
    let map  = new Map();
    let arr = [1,2,3];
    map.set(arr,345);
    console.log(map,map.get(arr)); //{Array(3) => 345}   345
    // size delete clear map  和 map 一樣
}
{   // key  也必須是對象 和weakset類似  不能遍歷，沒有clear，size
    let  weakmap  = new WeakMap();
}
// Map 與 Array的對比
{
    //數據結構的橫向對比增刪改查
    let map = new Map();
    let arr = [];
    //增
    map.set(‘t‘,1);
    arr.push({t:1});
    console.log(map,arr);
    //查
   let map_exist =  map.has(‘t‘);
   let arr_exist = arr.find(item=>item.t);
    console.log(map_exist,arr_exist); // true {t: 1}
    //改
    map.set(‘t‘,2);
    arr.forEach(item=>item.t?item.t=2:‘‘);
    console.log(map,arr);
    //刪除
    map.delete(‘t‘);
    let  index = arr.findIndex(item=>item.t);
    arr.splice(index,1);
    console.log(map,arr);
}

{// Set 與 Array的對比
    let set = new Set();
    let arr = [];
    //增
    set.add({t:1});
    arr.push({t:1});
    console.log(‘set-array‘,set,arr);
    //查
    let set_exist = set.has({t:1}); //false ，has查詢的是對象的引用，true
    let arr_exist = arr.find(item=>item.t);
    console.log(set_exist,arr_exist); // true {t: 1}

    //改
    set.forEach(item=>item.t?item.t=2:‘‘);
    arr.forEach(item=>item.t?item.t=2:‘‘);
    console.log(set,arr);
    //刪
    set.forEach(item=>item.t?set.delete(item):‘‘);
    let index =  arr.findIndex(item=>item.t);
    arr.splice(index,1);
    console.log(set,arr);
}
//map set  object的對比
{
   let item = {t:1};
   let set = new Set();
   let map = new Map();
   let obj = new Object()
    //增
   map.set(‘t‘,1);
   set.add(item);
   obj[‘t‘] =1 ;
   console.log(‘map set obj 對比‘,set,map,obj);
   //查
    console.log({
       map_exist:map.has(‘t‘),
       set_exist:set.has(item),
       obj_exist:‘t‘ in obj
    }); // true true true
    map.set(‘t‘,2);
    item.t=2;
    obj[‘t‘]=2;
    console.log(‘map set obj 查‘,set,map,obj);
    //刪除
    map.delete(‘t‘);
    set.delete(item);
    delete obj.t;
    console.log(obj,map,set);
}
//優先考慮set 和map 如果數組唯一考慮set 。

/*
* Proxy 和 Reflect
*   Proxy和Reflect的概念
*   Proxy和Reflect的使用場景
* */
{
    //代理的作用 用戶不能操作原始對象，在代理上可以設置讀寫
    let obj = {
        time:‘2022-02-22‘,
        name:‘net‘,
        _r:123
    };
    //映射obj
    let monitor = new Proxy(obj,{
        //攔截對象屬性的讀取
        get(target,key) {
            return target[key].replace(‘2022‘,‘1988‘);
        },
        //攔截對象的設置屬性
        set(target,key,value) {
            if (key===‘name‘) {
                return target[key] = value;
            }else {
                return target[key];
            }
        },
        //攔截 key in object 操作
        has(target,key) {
            if (key ===‘name‘){
                return target[key];
            }else {
                return false;
            }
        },
        //攔截delete
        deleteProperty(target,key) {
            if (key.indexOf(‘_‘) > -1) {
                delete target[key];
                return true
            }else {
                return  target[key];
            }
        },
        // 攔截object.keys,Object.getOwnPropertySymbols,Object.getOwnPropertyNames
        ownKeys (target) {
            return Object.keys(target).filter(item=>item!=‘time‘);
        }
    });
    console.log(‘get‘,monitor.time); //get 1988-02-22
    monitor.name = ‘app‘;
    console.log(‘set‘,monitor); //get 1988-02-22
    console.log(‘has‘,‘name‘ in monitor,‘time‘ in monitor);// true false
    delete monitor.time;
    delete monitor._r;
    console.log(‘delete‘,monitor); //{ time  name }
    console.log(‘ownkeys‘,Object.keys(monitor)); // 把time過濾了
}
{
    // Reflect用法和Proxy一樣
    let obj = {
        time:‘2022-02-22‘,
        name:‘net‘,
        _r:123
    };
    console.log(Reflect.get(obj,‘time‘)); //2022-02-22
    console.log(Reflect.set(obj,‘name‘,‘zhangsan‘)); // true
    console.log(obj);//{time: "2022-02-22", name: "zhangsan", _r: 123}
}
//用法
{
    //數據校驗
    function validator(target,validator) {
        return new Proxy(target,{
            _validator:validator,
            set(target,key,value,proxy) {
                if (target.hasOwnProperty(key)) {
                    let va = this._validator;
                    if (!!va(value)) {
                        return Reflect.set(target,key,value,proxy);
                    }else {
                        throw Error(`${key} 不存在`);
                    }
                }else {
                    throw Error(`${key} 不存在`);
                }
            }
        })
    }
    const personValidators = {
        name(val) {
            return typeof val === ‘string‘
        },
        age(val) {
            return typeof val === ‘number‘ && val>18;
        }
    };
    class Person {
        constructor(name,age) {
            this.name = name ;
            this.age =age;
            return validator(this,personValidators);
        }
    }
    const person = new Person(‘hanmeimei‘,29);
    console.log(person);
}

/*類與對象
*   基本語法  類的繼承  靜態方法 靜態方法 getter setter
* */
{//基本定義和生成實例
    class Parent {
        constructor(name=‘zhangsan‘) {
            this.name = name;
        }
    }
    let parent = new Parent(‘v‘);
    console.log(parent);// v
}
{//繼承
    class Parent {
        constructor(name=‘zhangsan‘) {
            this.name = name;
        }
    }
    class Child extends Parent {
    }
    let  chile = new Child();
    console.log(chile);//zhangsan

}
{//super 繼承傳遞參數
    class Parent {
        constructor(name=‘zhangsan‘) {
            this.name = name;
        }
    }
    class Child extends Parent {
        constructor(name=‘child‘) {
            super(name);
            this.type = ‘child‘;
      }
    }
    let  chile = new Child(‘lisi‘);
    console.log(chile);//{name: "lisi", type: "child"}
}
{//getter setter
    class Parent {
        constructor(name=‘123‘) {
            this.name = name;
        }
        get longName() {
            return ‘mk‘+this.name;
        }
        set longName(name) {
            return this.name = name;
        }
    }
    let parent = new Parent();
    console.log(parent.longName);// mk123
    parent.longName=‘hello‘;
    console.log(parent.longName);//mkhello
}
{
    //靜態方法
    class Parent {
        constructor(name=‘zhangsan‘) {
            this.name=name;
        }
        static tell () {
            console.log(‘tell‘);
        }
    }
    //通過類調用，不是通過是咧調用
    Parent.tell();
}
{
    // 靜態屬性
    class Parent {
        constructor(name=‘zhangsan‘) {
            this.name=name;
        }
        static tell () {
            console.log(‘tell‘);
        }
    }
    //定義靜態屬性
    Parent.type = ‘test‘;
    console.log(‘靜態屬性‘,Parent.type);// test
}
/*
* Promise 異步編程的解決方案
*    什麽是異步
*    Promise的作用
*    Promise的基本用法
* */
{
    let ajax = function (callback) {
        console.log(‘執行‘);
        setTimeout(function () {
            callback&&callback.call();
        },1000);
    }
    ajax(function () {
        console.log(‘timeout‘);
    });
     // 執行  timeout
}

{//用Promise
    let ajax = function () {
        console.log(‘執行2‘);
        return new Promise(function (resolve,reject) {
            setTimeout(function () {
                resolve();
            },1010);
        })
    }
    ajax().then(function () {
        console.log(‘promise‘,‘timeout‘);
    })
    //執行2  timeout
}
{
    let ajax = function () {
        console.log(‘執行3‘);
        return new Promise(function (resolve,reject) {
            setTimeout(function () {
                resolve();
            },1010);
        })
    }
    ajax()
        .then(function () {
      return new Promise(function (resolve,reject) {
          setTimeout(function () {

              resolve();
          },2000);
      })
       .then(function (resolve,reject) {
          console.log(‘timeout3‘);
      })
    })
    // 執行3  timeout3
}
{// Promise 捕獲異常錯誤catch
    let ajax = function (num) {
        return new Promise(function (resolve,reject) {
           if (num>5) {
               resolve();
           }else {
               throw new Error(‘出錯‘);
           }
        });
    }

    ajax(6).then(function () {
        console.log(‘log‘,6);
    }).catch(function (err) {
        console.log(‘catch‘,err);
    });  // 6
    ajax(3).then(function () {
        console.log(‘log‘,6);
    }).catch(function (err) {
        console.log(‘catch‘,err);
    });  // catch Error
}
{ //all
    // 所有圖片加載完成再添加到頁面
     function loadImage(src) {
         return new Promise((resolve,reject)=>{
             let img = document.createElement(‘img‘);
             img.src=src;
             img.onload=function () {
                 resolve(img);
             }
             img.onerror = function (err) {
                 reject(err);
             }
         })
     }
     function showImgs(imgs) {
         imgs.forEach(function (img) {
             document.body.appendChild(img);
         });
     }
     //都加載完成才執行
     Promise.all([
         loadImage(‘https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3261108149,2762297919&fm=27&gp=0.jpg‘),
         loadImage(‘https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=153589139,1805251811&fm=27&gp=0.jpg‘)
     ]).then(showImgs);
}

{
    //有一個圖片加載完就添加到頁面
    function loadImage(src) {
        return new Promise((resolve,reject)=>{
            let img = document.createElement(‘img‘);
            img.src=src;
            img.onload=function () {
                resolve(img);
            }
            img.onerror = function (err) {
                reject(err);
            }
        })
    }

    function showImgs(img) {
            let p = document.createElement(‘p‘);
            p.appendChild(img);
            document.body.appendChild(p);
    }
    // 有一個狀態改變，就執行 先到先得
    Promise.race([
        loadImage(‘https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=153589139,1805251811&fm=27&gp=0.jpg‘),
        loadImage(‘https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3261108149,2762297919&fm=27&gp=0.jpg‘)

    ]).then(showImgs);
}

/*
*   iterator，for of 循環
*   什麽是iterator接口
*   iterator的基本用法
*   for of循環
* */
{
    let arr = [‘hello‘,‘world‘];
    let map = arr[Symbol.iterator]();
    console.log(map.next());
    console.log(map.next());
    console.log(map.next());
}
{ // 自定義iterator
    let obj = {
        start:[1,3,2],
        end:[7,9,8],
        [Symbol.iterator](){
            let self = this;
            let index = 0;
            let arr = self.start.concat(self.end);
            let len = arr.length;
            return {
               next(){
                   //怎麽遍歷的過程
                   if(index<len) {
                        return {
                            value:arr[index++],
                            done:false // 是否結束 false表示沒有結束
                        }
                   }else {
                        return{
                            value:arr[index++],
                            done:true
                        }
                   }
               }
            }
        }
    };
    for (let key of obj) {
        console.log(key); // 1 3 2 7 9 8
    }
}

{ // for of 循環
    let arr = [‘hello‘,‘world‘];
    for (let value of arr) {
        console.log(value); // hello world
    }
}
/*
*   Generator 基本概念  異步編程的一種解決方案
*   next函數的用法
*   yield的語法
* */
{// genertaor基本定義  註意*  返回的是一個iterator
    let tell = function* () {
        yield ‘a‘;
        yield ‘b‘;
        return ‘c‘;
    }
    let k =tell();
    console.log(k.next()); //{value: "a", done: false}
    console.log(k.next());//{value: "b", done: false}
    console.log(k.next());//{value: "c", done: true}
    console.log(k.next());//{value:undefined,done:true}
}
{
    let obj = {};
    obj[Symbol.iterator]=function* () {
        yield 1;
        yield 2;
        yield 3;
    }
    for (let key of obj) {
        console.log(key); // 1 2 3
    }
}
{
    let state = function* () {
        while(1) {
            yield ‘A‘;
            yield ‘B‘;
            yield ‘C‘;
        }
    }
    let status = state();
    console.log(status.next());
    console.log(status.next());
    console.log(status.next());
    console.log(status.next());  // A B C A
}
// {//   async  await
//     let state = async function () {
//         while(1) {
//             await ‘A‘;
//             await ‘B‘;
//             await ‘C‘;
//         }
//     }
//     let status = state();
//     console.log(status.next());
//     console.log(status.next());
//     console.log(status.next());
//     console.log(status.next());  // A B C A
// }

{ // 應用案列  抽獎
    let draw = function (count) {
        //具體的業務邏輯
        console.log(`剩余${count}次`);
    }
    let residue = function* (count) {
        while (count>0) {
            count--;
            yield draw(count);
        }
    }
    //默認五次
    let start = residue(5);
    let btn = document.createElement(‘button‘);
    btn.id = ‘start‘;
    btn.textContent = ‘抽獎‘;
    document.body.appendChild(btn);
    document.getElementById(‘start‘).addEventListener(‘click‘,function () {
        start.next();
    },false);
}
{ // 長輪詢
    let ajax = function* () {
        yield new Promise((resolve,reject)=>{
            setTimeout(()=>{
                resolve({code:0});
            },1000);
        });
    }
    let pull = function () {
        let genertaor = ajax();
        let step = genertaor.next();
        step.value.then(function (d) {
           if (d.code!=0) {
            setTimeout(function () {
                console.info(‘wait‘);
                pull();
            },1000);
           }else {
               console.info(d)
           }
        });
    }
    pull();
}
/*
*  Decorator  修飾器  修飾器是一個函數，用來修改類的行為   !類！
*    基本用法 基本概念
*    
*    通過‘babel-polyfill‘ 找不到Decorator
*     需要 執行 npm install babel-plugin-transform-decorators-legacy --save-dev
 *  然後修改.babelre 增加 "plugins":["transform-decorators-legacy"]
 *
 *    */
// {//限制某個屬性是只讀的  修改類的行為
//     let readonly = function (target,name,descriptor) {
//         descriptor.writable = false;
//         return descriptor;
//     }
//     class Test {
//         @readonly
//         time() {
//             return ‘2017-03-11‘
//         }
//     }
//     let test = new Test();
//     console.log(test.time()); //2017-03-11
// }

{//
    let typename =function (target,name,descriptor) {
        target.name=‘hello‘;
    }
    @typename
    class Test {
    }
    console.log(‘類修飾符‘,Test.name);
}
// 第三方的庫  有一些修飾方法  core-decorators
{// 案列  日誌系統  //好處把埋點系統抽離出來。
    let log = (type)=>{
        return function (target,name,descriptor) {
            let src_method = descriptor.value;
            descriptor.value = (...arg)=>{
                src_method.apply(target,arg);
                console.log(`log${type}`);
            }
        }
    }
    class AD {
        @log(‘show‘)
        show(){
            console.log(‘AD is show‘);
        }
        @log(‘click‘)
        click(){
            console.log(‘AD is click‘);
        }
    }
    let ad = new AD();
    ad.show();
    ad.click();
}

/*
* ES6的 模塊化
*       export 導出 import 導入
* */
// export let  A = 123;
// export function test() {
//     console.log(‘test‘);
// }
// export class Hello {
//     test() {
//         console.log(123);
//     }
// }

// import {A,test,Hello} from ‘./class/es8‘;
// import {A} from ‘./class/es8‘;
// import * as lesson from ‘./class/es8‘
// import  Lesson from ‘./class/es8‘

// // console.log(A,test,Hello);
// // console.log(A);
// console.log(lesson.A);

// console.log(Lesson.A);

let A= 111;
class Hello {
    test(){
    console.log(‘class‘);
    }
}
let test = function () {
    console.log(‘test‘);
}
export default {
    A,test,Hello
}

ES6快速學習