美文网首页ES6
es6笔记之六-Symbol&generator

es6笔记之六-Symbol&generator

作者: AizawaSayo | 来源:发表于2019-03-25 19:15 被阅读0次

    数据类型:number、string、boolean、object、undefined、function
    es6新增一种数据类型:symbol 函数

    let sybl=Symbol('aaa');
    console.log(sybl);//Symbol(aaa)
    

    使用场景纯前端比较少。
    需注意
    1.不可用于构造函数,不能在前面加new.
    2.Symbol()返回的是一个唯一的值。作为一个key,定义一些唯一或私有的东西。
    3.symbol是一个单独的数据类型,基本类型
    4.如果symbol作为key,用for in循环,结果里出不来。

    let sybl2=Symbol('vivi');
    let json={
        a:'apple',
        b:'orange',
        [sybl2]:'aaa'
    };
    console.log(json['a']);//apple
    console.log(json[sybl2]);//aaa
    for(let key in json){//遍历json
        console.log(key);//a b
    }
    

    generator函数,是一个生成器(迭代器)。用途是解决异步,深度嵌套的问题。next()调用分步走,

    //定义
    function * gen() {
        yield 'welcome';
        yield 'to';
        return '牧马人';
    }
    //调用
    let g1=gen();
    console.log(gen());//返回的是个叫gen的对象
    console.log(g1.next());//{value:'welcome,done:false}
    console.log(g1.next());//{value: "to", done: false}
    console.log(g1.next());//{value: "牧马人", done: true}
    

    手动调用,麻烦。

    for(let val of g1){
        console.log(val);//welcome to
    }
    

    for of自动遍历generator,return的东西不会遍历。
    generator还可以配合解构赋值。和扩展运算符。

    let[a,b]=gen();
    let [c,...d]=gen();
    console.log(a,b);//welcome to
    console.log(c,d);//welcome ["to"]
    console.log(...gen());//welcome to
    console.log(Array.from(gen()));//["welcome", "to"]
    

    generator结合axios进行数据请求,大部分时间配合Promise使用

    function * gen2(){
        let val=yield 'vivi';//第一次value定死
        yield axios.get(`http://api.github.com/users/${val}`);//第二次
    }
    let g2=gen2();
    let username =g2.next().value;
        g2.next(username);
        g2.next(username).value.then(res=>{
        console.log(res.data);
    });
    

    异步:不连续,上一个操作没有执行完,下一个操作照样开始
    同步:连续执行,上一个操作没有执行完,下一个没法开始
    异步的解决方案:a.回调函数 b.事件监听 c.发布/订阅 d.Promise对象

    ES2017 规定 async

    相关文章

      网友评论

        本文标题:es6笔记之六-Symbol&generator

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