工业UI开发技术-课件 2-3-12 ES6.pptxVIP

ES6深圳市信息职业技术学院

ES6介绍01目录解构02扩展03Set和Map04proxy与reflect05promise，async和await06class07module08

本节目标 通过对JavaScript的基本语法的介绍，掌握JavaScript的语法。通过实训案例的讲解掌握流程控制，类与对象，DOM编程等内容。最后通过任务实施完成JavaScript的全面掌握与灵活运用。通过本节学习可以：掌握JavaScript的基本语法掌握JavaScript的流程控制掌握JavaScript类与对象的概念掌握JavaScript的DOM编程掌握ES6标准

01ES6介绍

ES6介绍 ES6是JavaScript语言标准的简称，每年6月发布一次标准。ECMAScript是JavaScript语言的国际标准，JavaScript是ECMAScript的实现。ECMAScript6(ES6)是2015年6月发布的。 ECMA组织致力于为JavaScript语言制定标准语法规则，早在2011年就指定了ES5.1的语法标准版本，但是随后对标准作了非常大的改动与升级，并且接收任何人任何时候提交的新语法提案，所以ECMA就针对必威体育精装版一次大改版定为ES6.0标准（也表示着大规模的标准制定）（从开始制定到最后发布整整用了15年），但是提案与修改一直源源不断，ECMA组织就决定时时刻刻接收新语法提案，但是在每年的六月统一做语法标准的发布。随后就有了ES6.1,6.2,6.3等等。当然你也会看到形如ES2015,ES2016,ES2017的命名。在ES6之前我们用的通用的语法标准是ES3。所以我们初学者最早接触的语法标准其实是ES3(发布于1999年)。

02解构

解构ES6允许按照一定模式从数组和对象中提取值，然后对变量进行赋值。eg：leta=1;letb=2;letc=3;let[a,b,c]=[1,2,3];

03扩展

Let命令let命令是ES6新增的，用于声明变量，与var不同的是，let声明的变量的作用域只在当前代码块。let用在for循环中比较适合，代码如下：注意：如果这里使用var，结果是10vara=[];for(leti=0;i10;i++){a[i]=function(){console.log(i);};}a[6]();//6

const命令 const声明一个只读的常量，一旦声明，常量的值就不能改变。const作用域与let作用域相同。只在声明的块级作用域中有效。首先我们要弄清楚const声明的常量其实它的本质是在内存地址中保存了一个地址而不是一个真正的值，所以我们所说的不能改变是根据类型来说的，比如如果是数值，字符串或布尔型，这些类型的值就保存在指向的内存地址中，所以它是不可改变的，但是如果是复合类型(例如对象)，内存中实质保存的是地址，如果我们改变了对象的值，对象地址的值是不会改变的，但是内容改变了，这个对于const是不冲突的。但是如果重新指向新的对象就不可以了。

04set与map

set新增的数据结构，是一种构造函数，类似于数组，里面的元素都是唯一的，不重复的，可以称为集合。set在使用时，不能单个访问，只能整体遍历，对set的操作有： 添加元素：set.add(6) 元素个数：set.size 删除元素：set.delete(3) 是否存在某元素：set.has(5) 清空：set.clear()//定义letset=newSet([1,2,3,3,2,5]);//输出：{1,2,3,5}

mapMap是JavaScript中的数据结构，它允许存储[键，值]对，其中任何值都可以用作键或值；Map集合中的键和值可以是任何类型，并且如果使用集合中已存在的键将值添加到Map集合中，新值将替换旧值。对map的操作有： map()方法：返回一个新数组，数组中的元素为原始数组调用函数处理后的值，并且按照原始数组元素调用函数处理后的值 map.has()方法：该方法主要用来检查Map中是否存在具有制定键的元素。 map.set()方法：为Map对象添加一个指定键(key)和值(value)的新元素。 map.get(key)方法：用来获取一个Map对象指定的元素，返回的是键所对应的值，如果不存在则会返回undefined。

05proxy与reflect

proxyProxy是js中的原生对象，用来创建一个对象的代理，可以实现基本操作的拦截和自定义。语法为：target是要代理的对象。handler中定义了基本操作的逻辑，一些操作如下： handler.has：对in操作符的拦截 handler.get：对属性读取操作的拦截 handler.set：对属性设置操作的拦截 ha