ES6知识点详解

作者: zhangjingbibibi | 来源:发表于2017-09-02 11:19 被阅读106次

主要会贴上代码,这样容易理解些
持续更新中...
1.let const

/**let,const 块作用域内有效  {}内代表一块*/
/**ES6 use strict*/
function test() {
    // for(let i=1;i<3;i++){
    //     console.log(i);
    // }
    // console.log(i);
    /**let 申明变量是不能重复定义*/
    // let a= 1;
    // let a=2;
}

function last() {
    /*const常量不能修改(数值)  对象可以,如const k={}
    * 申明时必须赋值
    * */
    const PI=3.1415926;
    const k={
        a:1
    }
    k.b=3;
    console.log(PI,k);
}

last();

2.解构赋值
主要讲解了数组解构赋值和对象解构赋值,其他的都可以在上面拓展
依然贴上代码:

/**
 * 数组解构赋值
 */
{
    let a,b,rest;
    [a,b]=[1,2];
    console.log(a,b);
}
{
    let a,b,rest;
    [a,b,...rest]=[1,2,3,4,5,6];
    console.log(a,b,rest);
}
/******/
{
    let a,b,c,rest;
    [a,b,c=3]=[1,2];
    console.log(a,b,c);
}
/*变量交换*/
{
    let a=1;
    let b=2;
    [a,b]=[b,a];
    console.log(a,b);
}
/***/
{
    function f() {
        return [11,22]
    }
    let a,b;
    [a,b]=f();
    console.log(a,b);
}
/*选择性接收变量*/
{
    function f() {
        return [1,2,3,4,5]
    }
    let a,b,c;
    [a,,,b]=f();
    console.log(a,b);
}
{
    function f() {
        return [1,2,3,4,5]
    }
    let a,b,c;
    [a,,...b]=f();
    console.log(a,b);
}
/*非常有用这种*/
{
    function f() {
        return [1,2,3,4,5]
    }
    let a,b,c;
    [a,...b]=f();
    console.log(a,b);
}
/*
 * 对象解构赋值
 * */

{
    let a,b;
    ({a,b}={a:10,b:20})
    console.log(a,b);
}
{
    let o={p:42,q:true}
    let {p,q}=o;
    console.log(p,q);
}
{
    let {a=10,b=5}={a:3};
    console.log(a,b);
}
{
    let metaData={
        title:'abc',
        test:[{
            title:'test',
            desc:'des'
        }]
    }
    let {title:esTitle,test:[{title:cnTitle}]}=metaData;
    console.log(esTitle,cnTitle);
}

3.正则拓展
新增了2个修饰符 y和u,下面给出代码:

{
    let regex=new RegExp('xyz','i');
    let regex2=new RegExp(/xyz/i);

    console.log(regex.test('xyz123'),regex2.test('xyz123'));

    let regex3=new RegExp(/xyz/ig,'i');
    console.log(regex3.flags);
}

{
    let s='bbb_bb_b';
    let al=/b+/g;
    let a2=/b+/y;
    console.log(al.exec(s),a2.exec(s));
    console.log(al.exec(s),a2.exec(s));
    /*sticky是check 正则中是否带有y修饰符*/
    console.log(al.sticky,a2.sticky);
}
/*u修饰符
* 处理大于2个字节的 加u
* .并不是能匹配所有字符(必须是小于2个字节的字符)
* */
{
    console.log('u-1',/^\uD83D/.test('\uD83D\uDc2A'));
    console.log('u-2',/^\uD83D/u.test('\uD83D\uDc2A'));

    console.log(/\u{61}/.test('a'));
    console.log(/\u{61}/u.test('a'));

    console.log(`\u{20BB7}`);
    let s='';
    console.log('u-1',/^.$/.test(s));
    console.log('u-2',/^.$/u.test(s));

    console.log('test',/{2}/.test(''));
    console.log('test',/{2}/u.test(''));
}

4.字符串拓展(上)
Unicode编码的一些问题,贴上代码,应该去敲一遍就可以理解
这里提醒,需要npm install babel-polyfill;得安装这么个补丁包才行

{
    console.log('a',`\u0061`);
    console.log('s',`\u20BB7`);

    console.log('s',`\u{20BB7}`);
}

{
    let s='𠮷';
    /*es5中*/
    console.log('length',s.length);
    console.log('0',s.charAt(0));
    console.log('1',s.charAt(1));
    console.log('at0',s.charCodeAt(0));
    console.log('at1',s.charCodeAt(1));

    /*es6*/
    let s1='𠮷a';
    console.log('length',s1.length);
    console.log('code0',s1.codePointAt(0));
    console.log('code0',s1.codePointAt(0).toString(16));
    console.log('code1',s1.codePointAt(1));
    console.log('code1',s1.codePointAt(2));
}

{
    console.log(String.fromCharCode("0x20bb7"));
    console.log(String.fromCodePoint("0x20bb7"));
}

{
    let str='\u{20bb7}abc';
    for(let i=0;i<str.length;i++){
        console.log('es5',str[i]);
    }
    for(let code of str){
        console.log('es6',code);
    }
}

5.字符串拓展(下)
主要讲解了一些日常中实用方便的方法,老规矩贴上代码:

/**实用方法**/
/**
 * 字符串中是不是包含某个字符
 */
{
    let str="string";
    console.log("includes",str.includes("a"));
    console.log('start',str.startsWith('str'));
    console.log('end',str.endsWith('g'));
}
/*字符串的复制*/
{
    let str="abc";
    console.log(str.repeat(4));
}
//模板字符串
{
    let name="list";
    let info="hello world";
    let m=`i am ${name},${info}`;
    console.log(m);
}
//es7草案  加了补丁包也可以在es6中使用
//补白的作用
{
    //向前补
    console.log('1'.padStart(4,'0'));
    //向后补
    console.log('1'.padEnd(4,'0'));
}
//标签模板
{
    let user={
        name:'list',
        info:'hello world'
    };
    console.log(abc`i am ${user.name},${user.info}`);
    function abc(s,v1,v2) {
        console.log("--s:",s,"v1:",v1,"v2:",v2);
        return s+v1+v2;
    }
}
//String.raw 使用频率不是太高
{
    console.log(String.raw`Hi\n${1+2}`);
    console.log(`Hi\n${1+2}`);
}

6.数值拓展
跟数值有关的一些小方法,仅仅码出了常用的小部分,更多请查阅

{
    //二进制以0b开头,b的大小写都可以
    console.log(0b111110111);
    //八进制是0o开头
    console.log(0o767);
}

{
    //Number.isFinite  是否无尽
    console.log('5',Number.isFinite(5));
    console.log('NaN',Number.isFinite(NaN));
    console.log('1/0',Number.isFinite(1/0));
    //Number.isNaN  是否为数字
    console.log('NaN',Number.isNaN(NaN));
    console.log('13',Number.isNaN(13));
}

{
    //判断是否为整数
    console.log('25', Number.isInteger(25));
    console.log('25.0', Number.isInteger(25.0));
    console.log('1/3', Number.isInteger(1 / 3));
    console.log('3/3', Number.isInteger(3 / 3));
    console.log("abc", Number.isInteger('abc'));
}
{
    console.log(Number.MAX_SAFE_INTEGER);
    console.log(Number.MIN_SAFE_INTEGER);
    //数是否安全
    console.log("10",Number.isSafeInteger(10));
    console.log("NaN",Number.isSafeInteger(NaN));
}
{
    //取小数中的整数部分
    console.log("4.1",Math.trunc(4.1));
}
{
    //判断正负0
    console.log("-5",Math.sign(-5));
    console.log("0",Math.sign(0));
    console.log("5",Math.sign(5));
}
{
    //立方根
    console.log('9',Math.cbrt(9));
}
//es6中有三角函数方法+对数方法....

7.数组拓展

{
    let arr=Array.of(3,4,7,9,11);
    console.log(arr);

    let empty=Array.of();
    console.log(empty);
}

{
    let p=document.querySelectorAll('p');
    let pArr=Array.from(p);
    pArr.forEach(function (item) {
        console.log(item.textContent);
    });

    console.log(Array.from([1,3,5],function (item) {
        return item*2;
    }))
}
//填充数组
{
    console.log('fill-7',[1,'a',undefined].fill(7));
    console.log('fill,pos',['a','b','c','d','e'].fill(7,1,5));
}

{
    for(let index of ['1','c','ks'].keys()){
        console.log('keys',index);
    }
    //需要import 'babel-polyfill';
    // for(let value of ['1','c','ks'].values()){
    //     console.log('values',value);
    // }

    for(let [index,value] of ['1','c','ks'].entries()){
        console.log('values',index,value);
    }

}
{
    /**
     * 它接受三个参数。
     target (必需):从该位置开始替换数据。
     start (可选):从该位置开始读取数据,默认为 0 。如果为负值,表示倒数。
     end (可选):到该位置前停止读取数据,默认等于数组长度。如果为负值,表示倒数。
     这三个参数都应该是数值,如果不是,会自动转为数值。
     */
    console.log([1,2,3,4,5].copyWithin(0,1,4));
}
{
    /**查找*/
    console.log([1,2,3,4,5,6].find(function (item) {
        return item>3;
    }));
    console.log([1,2,3,4,5,6].findIndex(function (item) {
        return item>3;
    }))
}

{
    console.log('number',[1,2,NaN].includes(NaN));
}

8.函数拓展
箭头函数,尾调用...

{
    //参数可以设置默认值
    //默认值的后面   必须也是默认值
  //functon test(x,y='123',c)  就是错误的,必须得是c='1'
    function test(x,y = 'word') {
        console.log('默认值',x,y);
    }
    test('hello');
    test('hello','kill');
}
{
    let x='test';
    function test2(x,y=x) {
        console.log('作用域',x,y);
    }
    test2('kill');
   //输出 kill kill  
}
{
    function test3(...arg) {
        for(let v of arg){
            console.log('rest',v);
        }
    }
    test3(1,2,3,4,'a');
//输出   rest 1 rest 2 rest 3 rest 4 rest 5
//把输入的参数转成了数组
}

{
    //扩展运算符
    console.log(...[1,2,4]);
 //输出 1 2 4   把数组拆成离散的值
    console.log('a',...[1,2,4]);
//输出 a 1 2 4 
}
//箭头函数
{
    //v 参数  v*2返回值
   //函数名  函数参数  函数返回值,如果没有参数就用()    表示
    let arrow=v=>v*2;
    console.log(arrow(3));
   //输出  6
    let arrow2 = ()=>5;
    console.log(arrow2());
   //输出 5 
  //箭头函数的this指向
  //箭头函数中的this,指向与一般function定义的函数不同,比较容易绕晕,箭头函数this的定义:箭头函数中的this是在定义函数的时候绑定,而不是在执行函数的时候绑定。
}
/**尾调用就是看  函数的最后一句话是不是一个函数
 * 提升性能
 * */
{
    function tail(x) {
        console.log('tail',x);
    }
    function fx(x) {
        return tail(x);
    }
    fx(123);
  //输出  tail 123
}

9.对象拓展

{
    //简洁表示法
    let o=1;
    let k=2;
    let es5={
      o:o,
        k:k
    };
    let es6={
        o,k
    }
    console.log(es5);
    console.log(es6);

    let es5_method={
        hello:function () {
            console.log('hello');
        }
    }

    let es6_method={
        hello(){
            console.log('hello');
        }
    }

    es5_method.hello();
    es6_method.hello();
}

{
    //属性表达式
    let a='b';
    let es5_obj={
        a:'c',
        b:'b'
    };
    let es6_obj={
        [a]:'c'
    }
    console.log(es5_obj,es6_obj);
}

{
    //新增api
    //is 类似于===
    console.log('字符串',Object.is('abc','an=bc'));
    console.log('数组',Object.is([],[]),[1]===[1]);

    console.log('拷贝',Object.assign({a:'a'},{b:'b',c:'c'},{z:'z'}));

    let test={k:123,o:456};
    for (let [key,value] of Object.entries(test)){
        console.log([key,value]);
    }
}

{
    //拓展运算符
    // let {a,b,...c}={a:'test',b:'kill',c:'ddd',d:'ccc'};
}

10.Symbol的用法

{
    //声明
    let a1=Symbol();
    let a2=Symbol();
    console.log(a1===a2);
    let a3=Symbol.for('a3');
    let a4=Symbol.for('a3');
    console.log(a3===a4);
}

{
    let a1=Symbol.for('abc');
    let obj={
        [a1]:'123',
        'abc':345,
        'c':456
    }
    console.log(obj);

    for(let [key,value] of Object.entries(obj)){
        console.log(key,value);
    }

    Object.getOwnPropertySymbols(obj).forEach(function (item) {
        console.log(obj[item]);
    })

    Reflect.ownKeys(obj).forEach(function (item) {
        console.log(item,obj[item]);
    })
}

11.set map数据结构
简单介绍了Set WeakSet Map WeakMap

{
    let list=new Set();
    list.add(5);
    list.add(7);

    console.log('size',list.size);
}

{
    let arr=[1,2,3,4,5];
    let list=new Set(arr);

    console.log(list.size);
}
//去重
//数据类型得一致
{
    let list=new Set();
    list.add(1);
    list.add(2);
    list.delete(2);
    list.add(1);
    console.log(list);

    let arr=[1,2,3,1,2];
    let list2=new Set(arr);
    console.log(list2);
}

{
    let arr=['add','delete','clear','has'];
    let list=new Set(arr);

    console.log(list.has('add'));
    list.delete('delete');
    console.log(list);
    list.clear();
    console.log(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('value',value);
    }
}
//weakset 只能是对象 弱引用 1.地址的引用 2.不会检查地址是否被回收掉 3.没有size,clear,不能遍历
{
    let weakList=new WeakSet();

    let arg={

    };
    weakList.add(arg);;
    console.log(weakList);

}
//map
{
    let map=new Map();
    let arr=['123'];

    //add element
    map.set(arr,456);
    console.log(map,map.get(arr));
}

{
    let map=new Map([['a',123],['b',456]]);
    console.log(map);
    console.log(map.size);
    console.log(map.delete('a'),map);
    console.log(map.clear(),map);
}
//weakmap 只能是对象 弱引用 1.地址的引用 2.不会检查地址是否被回收掉 3.没有size,clear,不能遍历
{
    let weakMap=new WeakMap();

    let o={};
    weakMap.set(o,123);
    console.log(weakMap.get(o));

}

12.map-set与数组和对象的比较
将map set与数组和object都进行了增删改查的比较

{
    let list=new Set();
    list.add(5);
    list.add(7);

    console.log('size',list.size);
}

{
    let arr=[1,2,3,4,5];
    let list=new Set(arr);

    console.log(list.size);
}
//去重
//数据类型得一致
{
    let list=new Set();
    list.add(1);
    list.add(2);
    list.delete(2);
    list.add(1);
    console.log(list);

    let arr=[1,2,3,1,2];
    let list2=new Set(arr);
    console.log(list2);
}

{
    let arr=['add','delete','clear','has'];
    let list=new Set(arr);

    console.log(list.has('add'));
    list.delete('delete');
    console.log(list);
    list.clear();
    console.log(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('value',value);
    }
}
//weakset 只能是对象 弱引用 1.地址的引用 2.不会检查地址是否被回收掉 3.没有size,clear,不能遍历
{
    let weakList=new WeakSet();

    let arg={

    };
    weakList.add(arg);;
    console.log(weakList);

}
//map
{
    let map=new Map();
    let arr=['123'];

    //add element
    map.set(arr,456);
    console.log(map,map.get(arr));
}

{
    let map=new Map([['a',123],['b',456]]);
    console.log(map);
    console.log(map.size);
    console.log(map.delete('a'),map);
    console.log(map.clear(),map);
}
//weakmap 只能是对象 弱引用 1.地址的引用 2.不会检查地址是否被回收掉 3.没有size,clear,不能遍历
{
    let weakMap=new WeakMap();

    let o={};
    weakMap.set(o,123);
    console.log(weakMap.get(o));

}

{
    //数据结构横向对比,增删改查
    let map=new Map();
    let array=[];
    //增
    map.set('t',1);
    array.push({t:1});
    console.info(map,array);
    //查
    let map_exist=map.has('t');//返回布尔值
    let array_exist=array.find(item=>item.t);
    console.info(map_exist,array_exist);
    //改
    map.set('t',2);
    array.forEach(item=>item.t?item.t=2:'');
    console.log(array);
    //删
    map.delete('t');
    let index=array.findIndex(item=>item.t);
    array.splice(index,1);
    console.log(map,array);
}

{
    //set array对比
    let set=new Set();
    let array=[];

    //增
    set.add({t:1});
    array.push({t:1});
    console.log(set,array);
    //查
    let set_exist=set.has({t:1});
    let array_exist=array.find(item=>item.t);
    console.log(set_exist,array_exist);
    //改
    set.forEach(item=>item.t?item.t=2:'');
    array.forEach(item=>item.t?item.t=2:'');
    console.log(set,array);
    //删
    set.forEach(item=>item.t?set.delete(item):'');
    let index=array.findIndex(item=>item.t);
    array.splice(index,1);
    console.log(set,array);
}

//与object对比
{
    let item = {t: 1};
    let map = new Map();
    let set = new Set();
    let obj = {};
    //增
    map.set('t', 1);
    set.add(item);
    obj['t'] = 1;
    console.log(map, set, obj);
    //查
    console.log(map.has('t'));
    console.log(set.has(item));
    console.log('t' in obj);
    //改
    map.set('t', 2);
    item.t = 2;//修改成本高
    obj['t'] = 2;
    console.log(map, item, obj);
    //删
    map.delete('t');
    set.delete(item);
    delete obj['t'];
    console.log(map, set, obj);
}

/**
 * 优先使用map
 * set作为考虑唯一性,对数据要求比较高,保证每个数据的唯一性,使用set
 * 数组+object放弃
 */

13.Proxy和Reflect

//代理
{
    let obj={
        time:'2017-03-11',
        name:'net',
        _r:'123'
    };

    let monitor=new Proxy(obj,{
       //拦截对象属性的读取
        get(target,key){
            return target[key].replace('2017','2018');
        },
        //拦截对象设置属性
        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;
            }
        },
        deleteProperty(target,key){
            /**
             * IndexOf()与LastIndexOf()的不同在于IndexOf()从字符串中第一个字符开始检索,
             * LastIndexOf()是从字符串的最后一个字符向前检索。
             * 返回值都是字符串中字符所在的下标,如果没有找到则返回-1
             */
          if(key.indexOf('_')>-1){
              delete target[key];
              return true;
          }else{
              return target[key];
          }
        },
        //拦截Object.key,Object.getOwnPropertySmbols,Object.getOwnPropertyNames
        ownKeys(target){
            return Object.keys(target).filter(item=>item!='time');
        }
    });

    console.log('get',monitor.time);
    monitor.time='2019';
    monitor.name='zhangjing';
    console.log(monitor.time);
    console.log(monitor.name);

    console.log('has','name'in monitor,'time'in monitor);

    // delete monitor._r;
    // console.log('delete',monitor);

    console.log('ownKeys',Object.keys(monitor));
}
//reflect 同proxy
{
    let obj={
        time:'2017-03-11',
        name:'net',
        _r:'123'
    };

    console.log(Reflect.get(obj,'time'));
    Reflect.set(obj,'name','zhangjing');
    console.log(obj);
    console.log(Reflect.has(obj,'name'));
}

{
    function validator(target,validator) {
        return new Proxy(target,{
            _validator:validator,
            set(target,key,value,proxy){
                if(target.hasOwnProperty(key)){
                    let va=this._validator[key];
                    if(va(value)){
                        return Reflect.set(target,key,value,proxy);
                    }else{
                        throw Error(`不能设置${key}到${value}`);
                    }
                }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('李磊',19);
    console.log(person);
    // person.name=29;
    person.name='zhang jing';
    person.age=39;
}

14.类与对象

{
    //基本定义和生成实例
    class Parent{
        constructor(name='zhangjing'){
            this.name=name;
        }
    }
    let v_parent=new Parent('v');
    console.log('构造函数和实例:',v_parent);
}

{
    //继承
    class Parent{
        constructor(name='zhangjing'){
            this.name=name;
        }
    }
    class Child extends Parent{

    }
    console.log('继承',new Child());
}

{
    //继承传递参数
    class Parent{
        constructor(name='zhangjing'){
            this.name=name;
        }
    }
    class Child extends Parent{
        //super一定放在第一行
        constructor(name='child'){
            super(name);
            this.type='child';
        }
    }
    console.log('继承',new Child());
}

{
    //getter setter
    class Parent{
        constructor(name='zhangjing'){
            this.name=name;
        }
        get longName(){
            return 'mk'+this.name
        }

        set longName(value){
            this.name=value;
        }
    }

    let v=new Parent();
    console.log('getter',v.longName);
    v.longName='hello';
    console.log('setter',v.longName);
}

{
    //静态方法,static通过类去调用,而不是通过类的实例调用
    class Parent {
        constructor(name = 'zhangjing') {
            this.name = name;
        }

        static tell(){
            console.log('tell');
        }
    }

    Parent.tell();

}

{
    //静态属性
    class Parent {
        constructor(name = 'zhangjing') {
            this.name = name;
        }
        static tell(){
            console.log('tell');
        }
    }

    Parent.type='test';

    console.log('静态属性',Parent.type);
}

15.promise
主要讲解了promise的原理,以及promise.all和promise.race的用法

//promise 解决异步操作
// {
//     //es5 写法
//     let ajax=function (callback) {
//         console.log("执行");
//       setTimeout(function () {
//           callback&&callback.call();
//       },1000);
//     };
//     ajax(function () {
//         console.log('timeout1');
//     })
// }
//
// {
//     let ajax=function () {
//         console.log('执行2');
//         return new Promise(function (resolve,reject) {
//             setTimeout(function () {
//                 resolve();
//             },1000);
//         })
//     };
//     ajax().then(function () {
//         console.log('promise','timeout2');
//     })
// }

// {
//     let ajax=function () {
//         console.log('执行3');
//         return new Promise(function (resolve,reject) {
//             setTimeout(function () {
//                 resolve();
//             },1000);
//         })
//     };
//     ajax().then(function () {
//         return new Promise(function (resolve,reject) {
//             setTimeout(function () {
//                 resolve();
//             },2000);
//         })
//     }).then(function () {
//         console.log('timeout3');
//     })
// }

// {
//     let ajax=function (num) {
//         console.log('执行4');
//         return new Promise(function (resolve,reject) {
//             if(num>5){
//                 resolve();
//             }else{
//                 throw new Error('出错了!');
//             }
//         })
//     }
//
//     ajax(3).then(function () {
//         console.log('log',6);
//     }).catch(function (err) {
//         console.log('catch',err);
//     })
// }

// {
//     //所有图片加载完再添加到页面
//     function loadImg(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实例当做一个1个promise实例
//     Promise.all([
//         loadImg('http://i4.buimg.com/567571/df1ef0720bea6832.png'),
//         loadImg('http://i4.buimg.com/567571/2b07ee25b08930ba.png'),
//         loadImg('http://i2.muimg.com/567571/5eb8190d6b2a1c9c.png'),
//     ]).then(showImgs);
// }

{
    //先到先显示
    function loadImg(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([
        loadImg('http://i4.buimg.com/567571/df1ef0720bea6832.png'),
        loadImg('http://i4.buimg.com/567571/2b07ee25b08930ba.png'),
        loadImg('http://i2.muimg.com/567571/5eb8190d6b2a1c9c.png'),
    ]).then(showImgs);
}

16.Iterator 和 for of

{
    let arr=['hello','world'];
    let map=arr[Symbol.iterator]();

    console.log(map.next());
    console.log(map.next());
    console.log(map.next());
}

{
    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
                        }
                    }else {
                        return {
                            value:arr[index++],
                            done:true
                        }
                    }
                }
            }
        }
    }

    for(let key of obj){
        console.log(key);
    }
}

{
    let arr=['hello','world'];
    for(let value of arr){
        console.log('value',value);
    }
}

3.17 Generator
Generator基本定义,以及2个工作学习中常用到2个方法,长轮询和类似抽奖的一个次数记录
个人感觉generator跟async差不多,yeild跟await差不多。
Generator 函数是 ES6 提供的一种异步编程解决方案。
yield表达式是暂停执行的标记,而next方法可以恢复执行。
记录一个简单的例子:

//genertaor基本定义
{
    //定义generator
    let tell=function* () {
        yield 'a';
        yield 'b';
        return 'c';
    };

    let k=tell();
    //这时候输出为空,因为程序调用tell函数,然后遇到yield就停止了。
    //需要调用next()才能继续执行
    console.log(k.next());
    //next方法返回一个对象
    // 它的value属性就是当前yield表达式的值hello,done属性的值false,表示遍历还没有结束。
    //这句的输出是{ 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);
    }
}

{
    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());
    console.log(status.next());

}
//generator 语法堂
// {
//     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());
//     console.log(status.next());
// }

//抽奖
{
    let draw=function (count) {
        //具体抽奖逻辑
        console.info((`剩余${count}次`))
    }

    let residue=function* (count) {
        while (count>0){
            count--;
            yield draw(count);
        }
    }

    let star=residue(5);
    let btn=document.createElement('button');
    btn.id='start';
    btn.textContent='抽奖';
    document.body.appendChild(btn);
    document.getElementById('start').addEventListener('click',function () {
        star.next();
    },false)
}

{
    //长轮询
    let ajax=function* () {
        yield new Promise(function (resolve,reject) {
            setTimeout(function () {
                resolve({code:0});
            },200);
        })
    }

    let pull=function () {
        let generator=ajax();
        let step=generator.next();

        step.value.then(function (d) {
            if(d.code!=0){
                setTimeout(function () {
                    console.log('wait');
                    pull()
                },1000);
            }else{
                console.log(d);
            }
        })
    }
    pull();
}

18.Decorators
修饰器

{
    //修饰器
    let readonly=function (target,name,descriptor) {
        descriptor.writable=true;
        return descriptor
    };

    class Test{
        @readonly
        time(){
            return '2017-9-04'
        }
    }

    let test=new Test();
    // test.time=function () {
    //     console.log('reset-time');
    // }
    console.log(test.time());
}

{
    let typename=function (target,name,descriptor) {
        target.myname='hello';
    }

    @typename
    class Test{

    }

    console.log('类修饰符',Test.myname);
}

//第三方修饰器的js库:core-decorators
//npm install 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();
}

19.模块化
export:(2种方法,个人比较喜欢最后一种)

//模块引用 import
//模块导出 export

// export let A=123;
//
// export function test() {
//     console.log('test');
// }
//
// export class Hello{
//     test(){
//         console.log('class');
//     }
// }

export let A=123;

export function test() {
    console.log('test');
}

export class Hello{
    test(){
        console.log('class');
    }
}

export default{
    A,test,Hello
}

import:


// import {A,test,Hello} from './class/lesson17';
// import * as lesson17 from './class/lesson17';
//
// console.log(lesson17.A);

import Lesson17 from './class/lesson17';

console.log(Lesson17.A);

更新到这里,也就差不多暂时整理完了。接下来会有一个基于ES6技术栈写的一个彩票系统网站,后面如果写完了,会贴上GitHub

函数拓展

image.png

相关文章

  • WKWebView文章汇总

    知识点详解WKWebView详解(二)- WKWebVIew认识WKWebView详解(二)- WebKit框架认...

  • ES6知识点详解

    主要会贴上代码,这样容易理解些持续更新中...1.let const 2.解构赋值主要讲解了数组解构赋值和对象解构...

  • JavaScript之数据类型

    二、数据类型 目录:字符串类型详解、数组类型详解、对象类型详解、分支和循环详解、Map和Set集合(ES6新特性)...

  • iOS 题目详解 部分一

    主要记录一些题目所关联的知识点, 详解 iOS 题目详解 部分一iOS 题目详解 部分二iOS 题目详解 部...

  • ES6之箭头函数【整理】

    [面试专题]ES6之箭头函数详解 https://segmentfault.com/a/1190000010914...

  • iOS 题目简述 部分一

    主要记录一些题目所关联的知识点, 简单概述 iOS 题目详解 部分一iOS 题目详解 部分二iOS 题目详解...

  • web前端基础案例-鼠标悬停图文切换效果

    效果知识点: html/css布局思维,定位,浮动详解,css3动画详解,css3选择器详解, 通用样式与封装,企...

  • 学习常用链接

    //Lua Lua table详解 Lua 元表详解 云风博客 //Unity Unity知识点 栈和队列 Uni...

  • JS的ES6知识点详解

    1.let-const块级作用域的补充 以上for遍历内部的实现是以下这样的: 因为数组有3个元素,所以会产生3个...

  • Sublime Text3 eslint 配置 支持ES6

    开发中使用ES6 语法时有提示很麻烦 解决方法: 1、项目根目录下,建立一个.eslintrc文件 配置详解详解d...

网友评论

  • leyal:写得好长啊,膜拜,看到这句贴到github我整个人对你的崇拜都要压不住了
    zhangjingbibibi:@绣斑猫 。。。我竟然没贴起GitHub地址。。。好神奇 我们来互关github哇 我是zhangjing9898

本文标题:ES6知识点详解

本文链接:https://www.haomeiwen.com/subject/bdnljxtx.html