Vue企业开发实战（第2版）-课件 项目2 大觅项目中ES6的使用

《Vue企业开发实战》·Vue3企业级项目教程项目2大觅项目中ES6的使用任务1let/const·任务2解构赋值·任务3箭头函数任务4Map·任务5Module·任务6Promise授课教师：XXX在线票务销售·Vite+Vue3·ES6语法落地学习目标能在大觅工程里用ES6写声明、取值、模块和异步01let/const会用let、const声明，能说明它们和var的差别02解构赋值能从数组、对象里快速取出需要的值03箭头函数会写箭头函数，知道this绑定和不适用场景04Map能用Map存储和遍历键值对05Module会用export/import拆分模块06Promise能创建Promise，用then/catch处理异步项目知识导图六个任务：声明→取值→函数→键值→模块→异步任务1let/const块级作用域、不提升、不可重复声明任务2解构赋值数组、对象、默认值、重命名任务3箭头函数this绑定、剩余参数、不适用场景任务4Map任意类型作键，size/set/get/遍历任务5Moduleexport、import、exportdefault任务6Promise状态、then链式、catch、all/race项目导读为什么大觅项目要先补ES6ES6是JavaScript的下一代标准，用来写更复杂的企业应用。Vue3的组合式API、模块拆分、接口取数，都会用到这些写法。本项目不空讲语法，而是接到dm工程：声明怎么选、字段怎么拆、文件怎么分、异步怎么排。声明let/const代替var，少污染作用域取值解构从票务JSON里抽出字段函数箭头函数处理回调里的this工程Module拆文件，Promise为后文Axios铺路TASK01let和const命令01let的三条规则02for循环与上机03const与Vue3习惯2.1.1let命令ES6新增声明，用来避免var的作用域混乱块级作用域只在当前{}有效。块外访问let会报错，var仍能取到值。不提升必须先声明再使用。var提前访问是undefined，let提前访问直接报错。不可重复声明同一作用域不能再用let/var声明同名变量。形参同名也不行。for的父子作用域for(leti...)每次循环有自己的i，适合给按钮绑点击。let对照示例块外访问、提升、重复声明，三处一眼能看出差别{leta=10;varb=1;}console.log(a)//ReferenceErrorconsole.log(b)//1console.log(foo)//undefinedvarfoo=2console.log(bar)//ReferenceErrorletbar=2functionfunc(){leta=10leta=1//报错：同一作用域重复声明}functionfunc(arg){letarg}//报错：与形参同名functionfunc(arg){{letarg}}//可以：里层是新作用域for循环里的let五个按钮点哪个，就要打印第几个用var：点谁都是第5个varbtns=document.querySelectorAll('button')for(vari=0;i<btns.length;i++){btns[i].onclick=function(){console.log('这是第'+i+'个按钮')}}for是同步的，点击是异步的。函数执行时再去找i，只剩循环结束的5。改成let：每个按钮有自己的ifor(leti=0;i<buttons.length;i++){buttons[i].onclick=function(){console.log('第'+i+'个按钮')}}上机练习1：用let改写按钮循环，浏览器里点第n个就打印第n个。合格：序号与下标一致。2.1.3const命令只读的是绑定，不是对象里面不能改constPI=3.1415PI=3//TypeErrorconstfoo//SyntaxError//必须立刻赋值constfoo={}p=123//可以foo={}//报错：改指向consta=[]a.push('Hello')//可以a=['Dave']//报错作用域和let一样，只在当前块有效，不提升，不能重复声明。简单类型数字、字符串、布尔存在绑定里，改值就是改绑定，会报错。对象/数组绑定的是地址。加属性、改成员可以，整段换成另一个对象不行。Vue3里怎么选声明三条习惯，本项目后面一直用01优先const能不改绑定就用const，组件里最常见。02要重赋再用let计数、切换、循环下标这类会变的值。03避免var少一次作用域污染，也不和let抢同名。TASK02变量的解构赋值01数组解构02对象解构03从接口取字段2.2.1数组的解构赋值按位置匹配，模式对得上就能取值leta=1,b=2,c=3//传统let[a,b,c]=[1,2,3]//ES6let[foo,[[bar],baz]]=[1,[[2],3]]let[x,,y]=[1,2,3]//y=3let[x,y]=['a']//y=undefinedlet[x,y]=[1,2,3]//不完全解构也可以默认值let[foo=true]=[]//truelet[x,y='b']=['a']//y='b'let[x=1]=[undefined]//1let[x=1]=[null]//null默认值只在成员严格等于undefined时生效。null不是undefined，所以不会走默认值。2.2.2对象的解构赋值按属性名匹配，不按顺序；真正被赋值的是后面那个名字let{bar,foo}={foo:'aaa',bar:'bbb'}//foo='aaa'bar='bbb'次序无所谓let{baz}={foo:'aaa'}//undefinedlet{first:f,last:l}={first:'hello',last:'world'}//first是模式，f/l才是变量接到大觅接口数据const{id,title,price}=productDatalet{x:y=3}={}//y=3let{x:y=3}={x:5}//y=5上机练习2：从JSON取出id、status、data。合格：控制台结果对，且不再用一长串下标访问。TASK03使用箭头函数01this问题02写法与差别03不适用场景2.3.1箭头函数起因定时器里的普通函数，this不再指向对象constPerson={username:'小暖',age:18,sayHello:function(){setInterval(function(){console.log('我叫'+this.username+...)},1000)}}Person.sayHello()课上先看输出•直觉：我叫小暖我今年18岁•实际：username/age都是undefined•原因：setInterval在全局执行，this是window•旧写法：先letself=this再在回调里用self箭头函数在定义时绑好this，并且写法更短。本项目后面回调、then里会经常用到。2.3.2箭头函数怎么写没有自己的this、arguments、super、new.target(参数1,参数2)=>{函数体}(参数1,参数2)=>表达式//相当于return单一参数=>{函数体}//圆括号可省()=>{函数体}//无参必须有()()=>console.log('Hello')和普通函数的两点差别•this在定义时绑定，以后怎么调用都不改•没有arguments，要用剩余参数...theArgs•代码更短，适合非方法函数functionPerson(){='小暖';this.age=20setInterval(()=>console.log(,this.age),1000)}2.3.4不适用场景不是所有function都要改成箭头01对象方法对象括号封不住作用域。方法写成箭头时，this仍指向全局，读不到username。02构造函数箭头函数不能当构造函数，new会报错。03原型方法Ptotype.sayHello=()=>{}时，this指向window，和对象方法同类问题。适合用在非方法函数。需要动态改this时，不要用箭头。上机先改对定时器，再故意把对象方法改成箭头，看失败。TASK04Map数据结构01和Object的差别02常用方法03上机走一遍2.4.1Map的特点键值对要更灵活时，用Map比普通对象合适任意类型作键字符串、数值、布尔、对象、函数都可以当键。Object的键通常只能是字符串或Symbol。直接拿数量map.size就是成员个数，不必自己遍历计数。天生可遍历for…of、keys()、values()、entries()、forEach()都能直接用。2.4.3Map常用方法创建、读写、判断、删除、遍历，上机走一遍constmap=newMap([['name','张三'],['title','Author'],])map.set('edition',6).set('friends',['大花'])map.get('name')//张三map.has('edition')//truemap.delete('years')//falsemap.size//成员总数四种遍历•keys()：键名•values()：键值•entries()：键值对，可直接解构•forEach(value,key)：遍历全部成员上机：创建Map，完成写入、读取、has、delete和forEach。作业还会用Map筛选票务JSON数组，只留下新的market、operator字段。TASK05Module的语法01为什么要拆模块02export/import03exportdefault2.5.1Module概述文件即模块，每个文件有自己的作用域早期只能靠<script>标签顺序加载，容易重名、依赖乱。ES6Module显式导出变量、函数、对象，需要的人再import。.vue文件每一个单文件组件都是一个模块。组件引用组件之间用import/export互相引用。工程文件路由、状态管理也按模块拆，后面Pinia、Router都这样写。2.5.2export与import导出什么，导入时花括号里的名字就要对上exportletfirstName='Michael'exportletyear=1958letfirstName='Michael'export{firstName,year}exportfunctionmultiply(x,y){returnx*y}import{firstName,year}from'./profile.js'//导入的变量只读//from后可用相对路径//.js后缀可以省略分别导出和统一导出都可以。导入名必须和导出名一致。对象属性虽能改，课上按只读来用。2.5.3exportdefault默认导出可以在导入时自己起名；一个模块只能有一个//export-default.jsexportdefaultfunction(){console.log('foo')}importcustomNamefrom'./export-default'customName()//foo和命名导出怎么选•命名导出：导入时必须写对名字，可一次导多个•默认导出：导入名可自定，适合模块的主功能•Vue组件常用exportdefault{...}上机练习3：新建utils.js，导出add(x,y)；在main.js导入并打印结果。想一想：这里用export还是exportdefault更合适？拆完后文件是否更好维护？TASK06Promise对象01三种状态02then/catch03接到Vue3取数2.6.1Promise是什么把异步结果和处理逻辑分开，避免回调一层套一层定时器、网络请求以前靠回调。套多层就是回调地狱。Promise用“状态+链式调用”把异步写清楚，后面Axios、fetch的返回值本质都是它。pending进行中刚创建，还没出结果。状态只会从pending出发，且改过就不能再改。fulfilled已成功调用了resolve，数据往then传。状态只会从pending出发，且改过就不能再改。rejected已失败调用了reject，错误往catch传。状态只会从pending出发，且改过就不能再改。2.6.2创建、then与catchexecutor会立刻执行；第一次resolve/reject说了算constp=newPromise((resolve,reject)=>{setTimeout(()=>{resolve('用户数据加载成功')//reject('加载失败')},1000)})p.then(v=>console.log('成功',v),e=>console.log('失败',e))p.catch(reason=>console.log(reason))链式调用•then的返回值还是Promise，可以继续then•返回普通值：直接给下一步•返回Promise：等它完成再继续•catch等价于then(null,onError)，建议写在链末尾统一收错误•先resolve再reject，失败回调不会走p.then(v=>{console.log('第一步',v);return'处理后的结果'}).then(msg=>console.log('第二步',msg))2.6.6常用静态方法课上先记住四个，后面请求会反复碰到Promise.resolve立刻得到一个成功的Promise。Promise.reject立刻得到一个失败的Promise。Promise.all全成功才成功，结果按数组排；有一个失败就立刻失败。适合并行拉用户和订单。Promise.race谁先结束听谁的，不论成功失败。常用来做超时控制。2.6.7在Vue3项目里怎么用为项目5的Axios打底，现在先看清写法fetch('/api/movies').then(res=>