ES6学习笔记3 async/await/Symbol/Iterators/Generator/Proxy

2022-02-23 20:04:08 阅读：160 来源： 互联网

标签：ES6 console log Generator Symbol value var async 迭代

async 异步与await 等待

async 函数返回一个 Promise 对象，可以使用 then 方法添加回调函数。

 	async function hi() {
        return "hi";
    }
    hi().then(res => console.log(res));//hi

async 函数中可能会有 await 表达式，async 函数执行时，如果遇到 await 就会先暂停执行，等到触发的异步操作完成后，恢复 async 函数的执行并返回解析值。

function say(msg, time) {
        return new Promise((resolue, reject) => {
            setTimeout(() =>
                resolue(msg), time);
        })
    }
    async function doit() {
        var s1 = await say("你好...", 2000);
        console.log(s1);
        var s2 = await say("呀！", 3000);
        console.log(s2);
        return s1 + s2;
    }
    doit().then(res => console.log(res));

等待2秒后，输出“你好…”，再等待3秒后"呀！"和"你好…呀！"同时输出
上方代码运行结果
注意：await 关键字仅在 async function 中有效。如果在 async function 函数体外使用 await ，你只会得到一个语法错误

Symbol

Symbol 是一种新的值数据类型，它的值是唯一的，不可变的，常用作唯一的key或者标识符
eg：

	var sym = Symbol( "符号" );
	console.log(typeof sym); // symbol
	var obj = {
        sym: "abc"
    };

这里 Symbol 前面不能使用 new 操作符。
如果它被用作一个对象的属性，那么这个属性会是不可枚举的

Iterators 迭代器

迭代器允许每次访问数据集合的一个元素，**当指针指向数据集合最后一个元素时，迭代器便会退出。**它提供了 next() 函数来遍历一个序列，这个方法返回一个包含 done 和 value 属性的对象。
可迭代对象都拥有迭代器（可以被for of遍历的对象都是可迭代对象：String、Array、Set、Map）

 	var arr = [2, 4, 5, 6];
    var iter = arr[Symbol.iterator]();
    console.log(iter.next()); //{value: 2, done: false}
    console.log(iter.next()); //{value: 4, done: false}
    console.log(iter.next()); //{value: 5, done: false}
    console.log(iter.next()); //{value: 6, done: false}
    console.log(iter.next()); //{value: undefined, done: true}

for of遍历使用的就是迭代器

    var arr = [2, 4, 5, 6];
    var iter = arr[Symbol.iterator]();
    console.log(iter.next()); 
    for (let i of iter) {
        console.log(i);
    }

这个例子可以看出，for of使用的是迭代器。
上方代码运行结果

Generator 生成器

Generator 函数是 ES6 的新特性，它允许一个函数返回的可遍历对象生成多个值。

普通函数前添加 *
通过yield关键字来控制生成
最终函数执行，返回一个可迭代元素

每次执行 yield 时，返回的值变为迭代器的下一个值。

实例1：实现range函数，给定范围和步长，生成满足条件的数组

    function* range(start, end, step = 1) {
        while (start <= end) {
            yield start;
            start += step;
        }
    }
    var list = range(1, 10, 2);
    var arr = [...list];
    console.log(arr);//[1, 3, 5, 7, 9]

实例2：实现randRange(min,max,len)生成一个长度为len的随机迭代对象

	function* randRange(min, max, len) {
        for (let i = 0; i < len; i++) {
            yield Math.round(Math.random() * (max - min)) + min;
        }
    }
    var list = [...randRange(1, 10, 5)];
    console.log(list);//[7, 3, 3, 5, 10]

Proxy 代理

Proxy 对象用于创建一个对象的代理，从而实现基本操作的拦截和自定义（如属性查找、赋值、枚举、函数调用等）。是对原对象操作的劫持。

实例：（乞丐版双向绑定）input和p双向绑定

    <input type="text" id="inp">
    <p id="myp"></p>

 	var inp = document.getElementById("inp");
    var myp = document.getElementById("myp");
    var obj = {
        msg: "我喜欢vue"
    };
    var o = new Proxy(obj, {
        get(target, prop) {
            return target[prop];
        },
        set(target, prop, value) {
            if (prop === "msg") {
                inp.value = value;
                myp.innerText = value;
            }
            target[prop] = value;
        }
    });
    inp.value = o.msg;
    myp.innerText = o.msg;

    inp.oninput = function () {
        o.msg = this.value;
    }

上方代码运行结果

标签：ES6,console,log,Generator,Symbol,value,var,async,迭代
来源： https://blog.csdn.net/TeAmo__/article/details/123095688