【ECMAScript6】

news/2025/2/25 11:14:05

【ECMAScript6】

  • 01. ES6介绍
  • 02. let和const命令
  • 03. 模板字符串
  • 04. 函数之默认值、剩余参数
  • 05. 函数之扩展运算符、箭头函数
  • 06. 箭头函数this指向和注意事项
  • 07. 解构赋值
  • 08. 扩展的对象的功能(简写)
  • 09. Symbol类型
  • 10. Set集合数据类型
  • 11. Map数据类型
  • 12. 数组的扩展方法一
  • 13. 数组的扩展方法二
  • 14. 迭代器Interator的用法
  • 15. 生成器Generator的用法
  • 16. Generator的应用
  • 17. Promise的基本使用
  • 18. 使用Promise封装ajax
  • 19. Promise对象的其他方法
  • 20. async的用法
  • 21. class类的用法
  • 22. 类的继承
  • 23. ES6的模块化实现

01. ES6介绍

ES6新特性
在这里插入图片描述

ES5内部提供的变量提升、内置对象的一些方法、数组、对象不是那么灵活,模块化实现没有那么完善

ps:变量提升(Variable Hoisting)是 JavaScript 中的一种行为,指的是在代码执行之前,JavaScript 引擎会将变量和函数的声明提升到其所在作用域的顶部,意味着可以在声明变量或函数之前使用它们,而不会导致错误

ES5中造一个使用的是构造函数
ES6中用class(类似Java)

前端中还有一门后端语言Node. js。
Node.js中就使用大量的一些ES6的语法

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

针对于10%的ES6的新特性对各大浏览器不支持,甚至90%里面可能针对于某些浏览器也是不支持的。那么我们需要前端的某些工具来对它进行一个转移。

在这里插入图片描述
在这里插入图片描述

02. let和const命令

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

03. 模板字符串

在这里插入图片描述

04. 函数之默认值、剩余参数

一、带参数默认值的函数
在这里插入图片描述

二、默认的表达式也可以是一个函数在这里插入图片描述

三、不具名参数的一个函数
在这里插入图片描述
ES6的写法:
在这里插入图片描述
在这里插入图片描述

05. 函数之扩展运算符、箭头函数

一、扩展运算符
在这里插入图片描述

二、箭头函数
在这里插入图片描述
在这里插入图片描述
实现闭包:
在这里插入图片描述

06. 箭头函数this指向和注意事项

一、this指向
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

二、注意事项
在这里插入图片描述
在这里插入图片描述

07. 解构赋值

在这里插入图片描述

解构赋值的做法是:
在这里插入图片描述
还可以使用剩余运算符
在这里插入图片描述
在这里插入图片描述
还可以使用默认值
在这里插入图片描述

接下来,我们来对数组解构:
在这里插入图片描述
还可以嵌套使用(不过要结构对应):
在这里插入图片描述

08. 扩展的对象的功能(简写)

简写:
在这里插入图片描述

用之于取值器和设置器
在这里插入图片描述

属性表达式:
在这里插入图片描述
在这里插入图片描述

09. Symbol类型

在这里插入图片描述

10. Set集合数据类型

集合:
在这里插入图片描述
方法:
在这里插入图片描述
遍历集合没有什么意义:
在这里插入图片描述
将集合转换为数组:
在这里插入图片描述
在这里插入图片描述

11. Map数据类型

在这里插入图片描述
在这里插入图片描述
其他用法与set类似

12. 数组的扩展方法一

一、from()
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

二、of()
在这里插入图片描述

三、within()
在这里插入图片描述

四、find()、findIndex()
在这里插入图片描述

13. 数组的扩展方法二

五、遍历器的一些方法
在这里插入图片描述

六、includes()
在这里插入图片描述

14. 迭代器Interator的用法

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

15. 生成器Generator的用法

在这里插入图片描述

具体实现:
(不使用next的时候,函数的不会走的,它只是生成了一个生成器函数)
在这里插入图片描述

传参:
在这里插入图片描述
应用:
在这里插入图片描述
实操:
在这里插入图片描述

16. Generator的应用

为异步编程提供便利,进行部署ajax操作,让异步代码同步化。
在这里插入图片描述
所以,我们使用Generator去解决异步编程回调地狱问题。
在这里插入图片描述

这个过程实现了异步代码同步化:
走next,先执行request请求,alert显示;
再走请求函数里的next,走打印部分。
实现了主函数的同步化,即按顺序执行,
而不会先执行同步代码,然后执行异步代码。
在这里插入图片描述

再举一个例子:
在这里插入图片描述
在这里插入图片描述
但是执行结果却是如下:
在这里插入图片描述
更改如下:
在这里插入图片描述

17. Promise的基本使用

在ES6中,对于异步编程提供了三种方法:
①Generator生成器
②Promise
③Async/Await组合

异步编程传统的解决方案基本上都是使用回调函数和事件,所以显得当前的Promise更加地合理和强大。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
我们先来打印一下Promise:
在这里插入图片描述
在这里插入图片描述
then里面接收回调函数:在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

18. 使用Promise封装ajax

本节目标是自己通过Promise对象来封装自己的一个API库
在这里插入图片描述
在这里插入图片描述
相当于
在这里插入图片描述
在这里插入图片描述

19. Promise对象的其他方法

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

20. async的用法

一、用法:
在这里插入图片描述

二、错误:
在这里插入图片描述

三、应用:
在这里插入图片描述
在这里插入图片描述

21. class类的用法

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

22. 类的继承

在这里插入图片描述

23. ES6的模块化实现

一直以来,js都是没有模块系统的,无法将一个大程序拆分成我们互相依赖的一些小小的文件以进行相互依赖的。

导出:
在这里插入图片描述
引入
在这里插入图片描述

(插件Live Server)和鼠标右键点击Open with Live Server,要用服务器运行起来,会传入一个ip地址(端口号),要不然静态文件访问是访问不到的。

多个导出引入:
导出:
在这里插入图片描述
引入:
在这里插入图片描述

导出的多种写法:
在这里插入图片描述

(注意script要改一下)


http://www.niftyadmin.cn/n/5865425.html

相关文章

java23种设计模式-组合模式

组合模式(Composite Pattern)学习笔记 🌟 定义 组合模式属于结构型设计模式,用于将对象组合成树形结构以表示"部分-整体"层次结构。它使得用户对单个对象和组合对象的使用具有一致性。 🎯 适用场景 需要表…

Docker(Nginx)部署Vue

简介:目标使用docker将vue生成的dist文件,结合nginx生成镜像,然后运行; 1、首选确保vue项目正确运行,并能正确打包dist文件; 2、查看已经生成的dist文件 3、将dist文件打包为rar文件或者zip文件&#xf…

2025年能源工程与电气技术国际学术会议(EEET2025)

2025年能源工程与电气技术国际学术会议(EEET2025) 2025 International Conference on Energy Engineering and Electrical Technology 中国 广州 2025年03月28日—30日 【重要信息】 会议时间:2025年03月28-30日 会议地点:中…

详解传输层协议TCP/UDP

传输层 传输层是OSI模型的第四层,主要负责端到端的数据传输,确保数据可靠、有> 序地从源设备传送到目标设备。其主要功能包括: 端到端通信:在源和目标设备之间建立连接,确保数据准确传输。数据分段与重组&#xff1…

Redis中SDS的数据结构

Redis 是用 C 语言写的,但是对于Redis的字符串,却不是 C 语言中的字符串(即以空字符’\0’结尾的字符数组),它是自己构建了一种名为 简单动态字符串(simple dynamic string)简称SDS的抽象类型&a…

使用django调用deepseek api,搭建ai网站

一、deepseek简介 DeepSeek是一家人工智能公司,专注于开发先进的人工智能模型和技术。以下是关于DeepSeek的一些详细介绍: 1.公司背景 DeepSeek由杭州深度求索人工智能基础技术研究有限公司开发,致力于通过创新的技术和算法,推…

用Golang与WebAssembly构建高性能Web应用:详解`syscall/js`包

用Golang与WebAssembly构建高性能Web应用:详解syscall/js包 引言为什么选择syscall/js包?适用场景 syscall/js包概述syscall/js包的核心概念1. js.Global2. js.Value3. js.Func4. js.Null 和 js.Undefined syscall/js包在WebAssembly中的位置 环境配置与…

封装一个echarts的组件

父组件页面 <yyjlchartv-if"showyyjl"chartId"yyjllLine":sourceData"sourceDatayyjl":options"optionsyyjl"></yyjlchart>components: {LineEcharts,yyjlchart: () > import("../yyjlchart"),},data() {re…