Web前端开发实战教程-HTML5+CSS3+JavaScript+Vue.js（微课版）课件第6章 ES6基础

上传人：y*** IP属地：山东上传时间：2026-03-17 格式：PPTX 页数：52 大小：978.49KB 积分：15 举报 版权申诉

Web前端开发实战教程-HTML5+CSS3+JavaScript+Vue.js（微课版）课件第6章 ES6基础_第2页

Web前端开发实战教程-HTML5+CSS3+JavaScript+Vue.js（微课版）课件第6章 ES6基础_第3页

Web前端开发实战教程-HTML5+CSS3+JavaScript+Vue.js（微课版）课件第6章 ES6基础_第4页

Web前端开发实战教程-HTML5+CSS3+JavaScript+Vue.js（微课版）课件第6章 ES6基础_第5页

已阅读5页，还剩47页未读，继续免费阅读

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

E6636BC20180234D78A0072836F0BA7012B9B20215E26B50ACD98F3EB1392B551B4EBF38216C3B0222692E0838460BEBE009217A41D02B111BBFC23A765E14D124F449AD6A2784D7348224B76F624F873694ECB77C9D5FC1A8B6E19E00602C88DA962B9CCE3第6章ES6基础01020304商品评分系统需求背景知识商品评分系统实现步骤本章小结-掌握ES6的基本概念和新增特性；-掌握如何使用let和const关键字声明变量；-理解和应用箭头函数；-掌握使用模板字符串进行数据绑定和多行字符串的创建；-了解如何通过解构赋值来简化变量的赋值过程；-深入学习参数和运算符的用法；-掌握ES6中类的声明方式和继承机制；-了解并使用ES6引入的新的集合类型如Map和Set；-学习如何使用Promise来处理异步操作。010203040506070809E6636BC20180234D78A0072836F0BA7012B9B20215E26B50ACD98F3EB1392B551B4EBF38216C3B0222692E0838460BEBE009217A41D02B111BBFC23A765E14D124F449AD6A2784D7348224B76F624F873694ECB77C9D5FC1A8B6E19E00602C88DA962B9CCE3商品评分系统需求01需求分析1.1商品评分系统的需求如下：

页面布局需求

需要有一个页面标题

商品信息部分应包括商品名称和描述

能够显示商品的平均评分2.商品评价功能需求

能够展示多条评价

每条评价需要显示评分和对应的评价内容3.样式和格式需求

页面标题需要突出显示

商品名称和描述应该清晰可见

平均评分需要突出显示、易于识别

评价列表易于阅读需求分析1.1商品评分系统运行截图：图6-1商品评分系统商品评分系统实现思路1.2商品评分系统的实现思路如下：1.实现核心类Product类：用于封装商品信息及其评价数据。ProductReview类：用于定义用户评价的数据结构。ReviewManager类：负责处理商品及其评价的相关操作。2.交互和功能实现通过ReviewManager类处理商品和评价信息。利用main.js完成初始化商品数据、提交评价、显示信息等功能。3.页面设计和内容展示设计index.html，用于展示商品信息和评价。使用Product类的方法更新页面内容。4.整合脚本和样式在HTML中引入JavaScript，确保其功能性。应用CSS提升界面美观和用户体验。知识导图1.3本章知识导图，如图1-2所示。图6-2知识导图E6636BC20180234D78A0072836F0BA7012B9B20215E26B50ACD98F3EB1392B551B4EBF38216C3B0222692E0838460BEBE009217A41D02B111BBFC23A765E14D124F449AD6A2784D7348224B76F624F873694ECB77C9D5FC1A8B6E19E00602C88DA962B9CCE3背景知识02ES6概述2.1ES6为JavaScript引入了许多革命性的新特性，对JavaScript进行了重大改进，这些特性极大地丰富了JavaScript的表达力和功能性。它旨在将JavaScript发展成一个更现代化、更高效的语言，以满足当代复杂应用程序的开发需求。ES6主要特性如下：let和const：提供块级作用域。箭头函数：提供了更简洁的函数写法。模板字符串：允许嵌入表达式的字符串字面量，提供了多行字符串和字符串插值功能。解构赋值：以简便的方式从数组或对象中提取值并赋给新的变量。默认参数、剩余参数和展开运算符类和继承：引入了类和继承的语法，使得对象的创建和继承更加清晰和易于理解。模块：引入了模块导入和导出机制。新的集合类型Promiselet和const2.2在ES6中，let和const是用于声明变量和常量的关键字，它们都能提供块级作用域，这是与传统的var声明方式的主要区别。一个展示let和const特性和区别的表格如表6-1所示。特性/关键字letconst声明类型变量常量作用域块级作用域块级作用域变量提升无（不会提升至作用域顶部）无（不会提升至作用域顶部）初始值要求无强制要求（声明时可以不赋值）必须在声明时赋值值的改变可以在后续操作中改变值一旦赋值，不可改变主要用途需要重新赋值的变量不需要重新赋值的变量或常量表6-1let和constlet和const2.2<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>简单的Let和Const示例</title></head><body><h1>JavaScriptES6-Let和Const使用案例</h1>

<buttonid="runExample">运行案例</button><pid="result"></p>

更短的函数语法：使用=>替代了传统的function关键字。

没有自己的this：箭头函数不绑定自己的this，它会捕获其所在上下文的this值作为自己的this值，这对于回调函数特别有用。

不能使用new运算符：箭头函数不能作为构造函数使用，不能使用new关键字。

没有原型属性：箭头函数没有prototype属性。

隐式返回：如果函数体只包含一条语句，可以省略大括号并隐式返回该语句的结果。箭头函数2.3代码清单arrowfunction.html<!DOCTYPEhtml><htmllang="zh"><head><metacharset="UTF-8"><title>箭头函数示例</title></head><body><h1>JavaScriptES6-箭头函数演示</h1>

<buttonid="calculateButton">计算</button><pid="result"></p>

constadd=(a,b)=>a+b;constresult=add(5,3);

document.getElementById("result").textContent="5+3="+result;});</script></body></html>箭头函数2.3图6-4箭头函数运行结果运行结果：当用户点击按钮时，一个箭头函数add被定义用来计算两个数的和，然后将计算的结果显示在网页的段落(<p>)元素中，如图6-4所示。模板字符串2.4模板字符串（TemplateStrings）是ES6中引入的一个新功能，它提供了一种更灵活的方式来处理字符串。模板字符串使用反引号（`）来定义，并可以包含占位符，占位符由美元符号和花括号（${expression}）包围。这个特性使得字符串的拼接和多行字符串的创建变得更加简单和直观。模板字符串特点如下：

多行字符串：可以轻松创建跨越多行的字符串，而不需要使用连字符或传统的字符串连接。

字符串插值：可以在字符串中直接嵌入表达式，并将其结果包含在字符串中。

标记模板：可以使用标记函数来解析模板字符串，为高级字符串处理提供更多控制。模板字符串2.4代码清单templatetrings.html<!DOCTYPEhtml><htmllang="zh"><head><metacharset="UTF-8"><title>模板字符串示例</title></head><body><h1>JavaScriptES6-模板字符串演示</h1>

<buttonid="greetButton">问候</button><pid="greeting"></p>

//使用模板字符串

constgreeting=`你好，我的名字是${name}，我今年${age}岁。`;

//支持多行字符串

constmultiLineString=`这是一段跨越多行的字符串。`;

document.getElementById("greeting").innerHTML=greeting+"<br><br>"+multiLineString;});</script></body></html>模板字符串2.4图6-5模板字符串运行结果运行结果：当用户点击按钮时，通过模板字符串创建了一个包含变量的问候语和一个多行字符串，然后将这些字符串显示在网页的段落(<p>)元素中，如图6-5所示。解构赋值2.5解构赋值是ES6中引入的一种功能强大的语法表达式。它允许开发者从数组或对象中直接提取值，并将这些值赋给一个或多个变量，这样大大简化了数据访问和赋值的操作。分为以下几种：

数组解构：直接从数组中提取元素，并创建具有相同值的变量。

对象解构：直接从对象中提取属性，并创建具有相同名称的变量。

函数参数解构：也可用于函数参数，使得提取对象属性和数组元素更加方便。

解构赋值2.5数组解构代码清单destructure03.html<html><title>数组解构</title>

<body><script>//对象参数解构

functiongreet({name,age}){console.log(`Hello,mynameis${name}andIam${age}yearsold.`);}greet({name:'Alice',age:25});//输出：Hello,mynameisAliceandIam25yearsold.

//数组参数解构

functionsum([a,b]){returna+b;}console.log(sum([1,2]));//输出3

</script></body>

</html>解构赋值2.5图6-6数组解构运行结果const[a,b]=[1,2]，通过解构赋值，变量a和b分别从数组[1,2]中获得了元素1和2。const[first,,third]=['foo','bar','baz']，通过解构赋值，first和third分别获取数组['foo','bar','baz']中的第一和第三个元素，跳过了第二个元素（'bar'）。x从数组[1,2,3,4]中获取了第一个元素1，而变量y通过剩余参数语法(...)获取了数组中剩下的所有元素作为一个新数组。最终运行效果如图6-6所示。解构赋值2.5对象解构代码清单destructure02.html<html><title>数组解构</title>

<body><script>//基本对象解构

const{name,age}={name:'Alice',age:25};console.log(name);//输出'Alice'console.log(age);//输出25

//可以给新变量指定不同的名称

const{name:userName,age:userAge}={name:'Bob',age:30};console.log(userName);//输出'Bob'console.log(userAge);//输出30

//可以设置默认值

const{a,b=5}={a:3};console.log(a);//输出3console.log(b);//输出5

</script></body>

</html>解构赋值2.5图6-7对象解构运行结果运行结果：创建了一个包含name和age属性的对象{name:'Alice',age:25}，通过解构赋值，对象的name属性值（'Alice'）被赋给了同名变量name，age属性值（25）被赋给了同名变量age，如图6-7所示。解构赋值2.5函数参数解构代码清单destructure03.html<html><title>数组解构</title>

<body><script>//对象参数解构

functiongreet({name,age}){console.log(`Hello,mynameis${name}andIam${age}yearsold.`);}greet({name:'Alice',age:25});//输出：Hello,mynameisAliceandIam25yearsold.

//数组参数解构

functionsum([a,b]){returna+b;}console.log(sum([1,2]));//输出3

</script></body>

</html>解构赋值2.5图6-8函数参数解构运行结果运行结果：函数greet接收一个对象作为参数，并从这个对象中解构出name和age属性。当调用greet({name:'Alice',age:25})时，向函数传入了一个对象{name:'Alice',age:25}。在函数体内，name和age被解构赋值，分别获取了'Alice'和25这两个值，如图6-8所示。

默认参数、剩余参数和展开运算符2.6在ES6中，引入了几个重要的新概念：默认参数、剩余参数和展开运算符。这些特性提供了更大的灵活性和简洁性，特别是在函数参数的处理上。（1）默认参数：为函数参数指定默认值。优点：减少了函数内部因缺失参数而发生的错误，使代码更清晰和简洁。（2）剩余参数：剩余参数是将不确定数量的参数表示为一个数组。优点：提供了一种简洁的方法来处理数量不确定的参数。可以增加函数的灵活性，无需关心参数的具体数量。（3）展开运算符:展开运算符看起来与剩余参数相似（也是三个点“...”），但它的用途是为了扩展数组或对象。优点：简化了数组和对象的合并操作，可以用于创建数组或对象的浅拷贝。默认参数、剩余参数和展开运算符2.6默认参数代码清单argument01.html<script>functiongreet(name="Guest"){return`Hello,${name}!`;}

console.log(greet("Alice"));//输出:"Hello,Alice!"console.log(greet());//输出:"Hello,Guest!"

</script>图6-9默认参数运行结果默认参数、剩余参数和展开运算符2.6剩余参数代码清单argument01.html<script>functionsum(...numbers){returnnumbers.reduce((total,num)=>total+num,0);}console.log(sum(1,2,3,4,5));//输出:15</script>图6-10剩余参数运行结果默认参数、剩余参数和展开运算符2.6展开运算符代码清单argument01.html图6-11、6-12展开运算符在数组中、对象中运行结果<script>constarr1=[1,2,3];constarr2=[4,5,6];constcombinedArr=[...arr1,...arr2];

console.log(combinedArr);//输出:[1,2,3,4,5,6]

</script>类和继承2.7在ES6中，类（Class）和继承是用于创建对象和管理对象之间关系的一种机制，ES6的类提供了一种更清晰和结构化的方式来创建对象和管理原型继承。这些概念的引入带来了诸多优点：

更好的代码组织和提升可读性：类提供了一种清晰的方式来组织代码。

代码复用：继承允许新的对象类（子类）继承现有对象类（父类）的属性和方法。

封装：类提供了封装数据和操作数据的方法的能力。

抽象：类和继承允许开发者创建抽象层次，简化复杂系统的管理。

多态：继承允许子类重写父类的方法，定义属于子类的特定行为。

简单的代码维护和更新：由于对代码进行模块化和封装，使得代码维护和更新更加简单。

设计模式的实现：面向对象的设计模式，如工厂模式等在类和继承的基础上更容易实现和理解。

面向对象分析和设计：定义清晰的对象模型。

类和继承2.7校园系统案例假设要在一个校园系统中表示学生（Student）和教师（Teacher）。学生和教师都是人（Person），具有一些共同的特征，如姓名和年龄，但也有一些特定的属性，如学生有班级，教师有科目。首先，定义一个基类Person，它包含所有人的共通属性和方法。接下来，创建两个派生类Student和Teacher，它们均继承了Person类，最后，创建Student和Teacher的实例，并调用它们的方法。类和继承2.7校园案例核心代码

//StudentclassclassStudentextendsPerson{constructor(name,age,classRoom){super(name,age);this.classRoom=classRoom;}

study(){return`${}isstudyinginclass${this.classRoom}.`;}}

//Teacherclassconstructor(name,age,subject){super(name,age);this.subject=subject;}

teach(){return`${}isteaching${this.subject}.`;}}

类和继承2.7图6-13类和继承运行结果新的集合类型2.8ES6（ECMAScript2015）引入了几种新的集合类型，以提供更强大和灵活的数据结构。这些新类型包括Map、Set，如表6-2所示。表6-2

ES6新集合类型集合类型描述键的类型保持插入顺序主要方法Map键值对集合任意类型是set(key,value),get(key),has(key),delete(key),clear()Set不重复值的集合任意类型，但不重复是add(value),has(value),delete(value),clear()新的集合类型2.8创建一个简单的场景：使用Map来存储学生的成绩，并使用Set来存储参加某个特定课程的学生名单。使用Map存储学生的成绩：假设需要记录学生的数学成绩，使用学生的名字作为键，成绩作为值。使用Set存储参加特定课程的学生名单：现在有一个特定的课程，想要追踪哪些学生已经注册。由于每个学生只能注册一次，所以Set是一个理想的选择新的集合类型2.8代码清单mapandset.html>

letstudentGrades=newMap([['Alice',87],['Bob',92],['Charlie',78]]);

letcourseStudents=newSet(['Alice','Bob','David']);

链式调用：Promise可以被链式调用，这意味着可以在一个Promise的.then()方法中返回另一个Promise，从而创建一个异步操作的序列。

错误处理：通过.catch()方法，可以在链的任何部分捕获错误，这使得错误处理更加灵活和集中。

改善嵌套回调：相比于传统的回调方式，Promise提供了一种更清晰和更易于管理的回调方式来处理复杂的异步逻辑。Promise2.9代码清单

创建Promise.htmlletpromise=newPromise(function(resolve,reject){//异步操作的代码...if(/*操作成功*/){resolve(value);//当异步操作成功时，调用resolve，并传递结果值

}else{reject(error);//当异步操作失败时，调用reject，并传递错误信息

}});代码清单

使用Promise.htmlpromise.then(function(result){/*处理成功的结果*/},function(error){/*处理错误*/});

//或者更常见的方式是使用.catch()promise.then(function(result){/*处理成功的结果*/}).catch(function(error){/*处理错误*/}).finally(function(){/*总是会执行*/});Promise2.9代码清单promise.html<script>functionfetchData(){//创建一个新的PromisereturnnewPromise((resolve,reject)=>{//模拟异步操作，比如从服务器获取数据

setTimeout(()=>{//假设我们有一些数据

constdata="这是从服务器获取的数据！";//随机决定是解决还是拒绝Promiseconstsuccess=Math.random()>0.5;

if(success){resolve(data);//如果成功，解决Promise}else{reject("无法获取数据");//如果失败，拒绝Promise}},2000);//设置2秒后执行

});}

Promise2.9图6-15Promise成功获取数据图6-16Promise获取数据失败E6636BC20180234D78A0072836F0BA7012B9B20215E26B50ACD98F3EB1392B551B4EBF38216C3B0222692E0838460BEBE009217A41D02B111BBFC23A765E14D124F449AD6A2784D7348224B76F624F873694ECB77C9D5FC1A8B6E19E00602C88DA962B9CCE3商品评分系统实现步骤03Product类3.1Product类代表单个商品，包含商品的详细信息（如名称和描述），以及一个存储商品评价的数组，允许添加新的评价并能计算商品的平均评分，如代码清单6-16所示。classProduct{constructor(id,name,description){this.id=id;=name;this.description=description;this.reviews=[];}

addReview(review){this.reviews.push(review);}

getAverageRating(){if(this.reviews.length===0)return"暂无评分";letsum=this.reviews.reduce((acc,review)=>acc+review.rating,0);return(sum/this.reviews.length).toFixed(2);}

displayInfo(){lethtml=`<h2>商品:${}</h2><p>描述:${this.description}</p>`;html+=`<p>平均评分:${this.getAverageRating()}</p><ul>`;

this.reviews.forEach(review=>{html+=`<li>评分:${review.rating},评论:${ment}</li>`;});

html+=`</ul>`;document.getElementById('product-info').innerHTML=html;}}ProductReview类3.2ProductReview类表示对单个商品的评价，每个评价包含一个评分和一个评论，如代码清单6-17所示。classProductReview{constructor(rating,comment){this.rating=rating;ment=comment;}}代码清单ProductReview.jsReviewManager类3.3ReviewManager类负责管理所有的商品和它们的评价，可以添加新商品、给特定商品添加评价，并展示商品及其评价的详细信息，如代码清单6-18所示。classReviewManager{constructor(){ducts=newMap();}

addProduct(product){ducts.set(product.id,product);}

addReview(productId,review){if(ducts.has(productId)){ducts.get(productId).addReview(review);}else{console.log("产品ID不存在");}}

displayProductInfo(productId){if(ducts.has(productId)){ducts.get(productId).displayInfo();}else{document.getElementById('product-info').innerHTML="<p>产品ID不存在</p>";}}}代码清单ReviewManager.jsmain.js3.4main.js创建了一个用于管理商品及其评价的ReviewManager实例，添加了一个名为“咖啡机

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

Web前端开发实战教程-HTML5+CSS3+JavaScript+Vue.js（微课版）课件 第6章 ES6基础

文档简介

温馨提示

最新文档

评论

相关文档

Web前端开发实战教程-HTML5+CSS3+JavaScript+Vue.js（微课版）课件第6章 ES6基础