ES6快速学习

标签：知识点   sticky   查询   tick   metadata   empty   第一个   tor   转译   

常用的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快速学习

标签：知识点   sticky   查询   tick   metadata   empty   第一个   tor   转译   

原文地址：http://www.cnblogs.com/niusan/p/8006974.html