异步与等待

async 异步

async实例

执行结果

await 等待

await实例

Symbol

定义：

使用方法:

打印结果

迭代器

定义

使用方法

生成器

定义

使用方法

实例

代理Proxy

定义

实例

异步与等待

async 异步

async装饰的函数返回的是一个promise对象

async实例

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><script type="text/javascript">async function say(){return "abc"}var f = say()console.log(f);</script></body>
</html>

执行结果

await 等待

await只能在async函数里面使用，当函数遇到await时会等待await结果，再继续向下执行

await实例

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><script type="text/javascript">function say(msg,time){return new Promise((resolve,reject)=>{setTimeout(()=>resolve(msg),time)})}// 定义async函数async function doit(){// await 会等待say函数执行完才会向下执行var s1 = await say("你好",2000)    // 两秒后说你好console.log(s1)var s2 = await say("我很中意你",3000)// 三秒后说我很中意你console.log(s2)return s1+s2//跟随s2一起执行}doit().then(res=>console.log(res))</script></body>
</html>

Symbol

定义：

表示独一无二的值，一般用于定义对象的唯一属性名，不可修改，不可重复

使用方法:

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><script>let sym = Symbol("内容");console.log(sym,typeof sym);var obj={sym:"abc"};</script></body>
</html>

打印结果

迭代器

定义

可迭代对象都是拥有迭代器(可以被for of 遍历的对象都有迭代器)

Array数组，String字符串，Set集合，Map图

使用方法

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><script type="text/javascript">var arr=[2,6,8];// 获取数组的迭代器var iter = arr[Symbol.iterator]();// iter.next() 执行结果// iter.next();//{value:2,done:false}// iter.next();//{value:6,done:false}// iter.next();//{value:8,done:false}// iter.next();//{value:undefined,done:true}</script></body>
</html>

生成器

定义

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

内容包含start,不包含end

使用方法

function *range(start,end,step=1){while(start<step){yield start;start+=step;}
}

实例

编写打印从2到101,步为2的生成器

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><script type="text/javascript">function *range(start,end,step){while(start<end){yield start;start+=step;}}var list = range(2,101,2);// var arr = Array.from(list);// var arr = [...list];// range 产生有start到end的一个可迭代对象for(var v of list){console.log(v);}</script></body>
</html>

代理Proxy

定义

代理就是对原有对象target进行二次加工

实例

修改obj的age属性的值，限定在0~200之间

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><script type="text/javascript">// 代理就是对原有对象target二次加工。、var obj = {"name":"月凉笙",age:18};//用o来代理objvar o = new Proxy(obj,{// 当获取o对象的属性值进行get方法get:function(target,prop){//如果属性名在原对象里if(prop in target){// 返回原对象属性return target[prop]}else{// 返回 无名return "无名"}},set:function(target,prop,value){if(prop==="age"){if(value>200||value<0){// 发送一个范围错误throw RangeError('这个年龄恐怕不是人类')}else{target[prop]=value;}}else{target[prop]=value;}}})</script></body>
</html>

页面中有一个输入框与一个p标签，修改文本框内容，p的内容跟随改变

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><input type="text" id="inp"/><p id="myp"></p><script>// 获取两个节点var inp = document.getElementById("inp");var myp = document.getElementById("myp");// 定义objvar obj = {msg:"我喜欢VUE"};// 使用代理劫持objvar o = new Proxy(obj,{// get劫持get(target,prop){return target[prop]},// set劫持// 原对象  属性  值set(target,prop,value){// 只要被设置,value 就会输出// console.log(value);if(prop==="msg"){myp.innerText=value;inp.value=value;}target[prop]=value;}})// 设置节点的值和文本inp.value = o.msg;myp.innerText=o.msg;// 目标，input发生变化，p也跟随变化inp.oninput=function(){o.msg=inp.value}</script></body>
</html>

ES6详细总结（3）相关推荐

ES6详细介绍及使用
ES6详细介绍及使用一. ES6概念及发展史 1.ES6概念以前学习JavaScript的时候,对ES5是有了解过的,但是在学习Vue的时候,就会发现有很多新的写法是ES6中的,真是让人捉急.所以 ...
ES6详细知识点汇总
目录 ES6最常用知识清单 1.let关键字 2.const关键字 3.解构赋值 4.模板字符串 5.简化对象写法 6.箭头函数 7.rest参数 8.扩展运算符 9.Symbol数据类型 9.1Sy ...
前端-初级工程师掌握技术点
前端-初级工程师技术点一.技能 1.对Promise的理解.优缺点 Promise基本特性 Promise有三种状态:pending(进行中).fulfilled(已成功).rejected(已失败 ...
es6标准入门第3版pdf_最详细，快速入门Web前端开发的正确姿势
入门标准入门标准很简单,就一条:达到能参与 Web 前端实际项目的开发水平.请注意,是实际项目,这就需要了解如今的实际项目开发都用了哪些技术栈.HTML/CSS/JavaScript 这三大基础技术 ...
ES6 迭代器与生成器（非常详细、容易理解）
下面是对ES6中迭代器和生成器的整理,非常详细.容易理解,希望可以帮助到有需要的小伙伴~ 文章目录迭代器是什么 Iterator接口迭代协议 for...of语句的用法返回迭代器对象的方法与f ...
纯JavaScript实现俄罗斯方块（详细注释，ES6）
借鉴了慕课网的课程<基于websocket的火拼俄罗斯(单机版)>虽然改动比较多,但是还是核心部分没有改,加了一些不怎么好听的声音,和看起来并不好看的界面. CSS部分基本是瞎写的,因为对 ...
史上最详细易懂的ES6模块化语法（重点）
对于初次学习ES6的小伙伴来说,ES6的模块化语法是一个重点,在没有模块化之前,前端js代码有一下三句话 1.私密不漏 2.重名不怕 3.依赖不乱一.接下来先演示在没有模块化之前,这个"私 ...
最详细ES6教程_变量的解构赋值
最详细ES6教程_变量的解构赋值数组的解构赋值基本用法 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 以前,为变量赋值,只能直接指定 ...
ES6 class关键字 ~ 非常详细
下面的对ES6中class关键字的整理,希望可以帮助到有需要的小伙伴~ 文章目录类的声明构造函数 getter与setter 不允许提前声明不允许重复声明静态方法静态方法的语法类的继承实 ...

ES6详细总结（3）

异步与等待

async 异步

async实例

执行结果

await 等待

await实例

Symbol

定义：

使用方法:

打印结果

迭代器

定义

使用方法

生成器

定义

使用方法

实例

代理Proxy

定义

实例

ES6详细总结（3）相关推荐

最新文章

热门文章