web前端-ES6语法学习

news2024/11/29 12:52:19

Vue3.0的学习

  • ES6的模块化语法
    • ES6 模块化规范的概述
    • ES6 模块化的体验
      • 默认导出与默认导入
      • 按需导出 和 按需导入
      • 直接导入并执行模块中的代码
  • Promise
  • async/await
  • EventLoop
  • 宏任务和微任务

ES6的模块化语法

ES6中文教程网：https://www.w3cschool.cn/escript6/

ES6 模块化规范的概述

我们可以回顾下node.js中是如何实现模块化的。node.js遵循了CommonJS的模块化规范。其中：

  • 导入其他模块使用require()方法
  • 模块对外共享成员使用module.exports对象

模块化的好处： 大家都遵守同样的模块化规范写代码，降低了沟通的成本，极大方便了各个模块之间的相互利用，利人利己

前端模块化规范分类：在ES6模块化规范诞生之前，JavaSript社区已成常事并提出了AMD、CMD、CommonJS等模块化规范。

但是这些由社区提出的模块化标准，还是存在一定的差异性与局限性，并不是浏览器与服务器通用的模块化标准，例如：

  • AMD和CMD 适用于浏览器端的JavaScript模块化
  • CommonJS 适用于服务端的Javascript 模块化

太多的模块化规范给开发者增加了学习的难度和开发的成本。因此大一统的ES6 模块化规范诞生了！

什么是ES6 模块化规范？

ES6模块化规范是浏览器与服务器端通用的模块化开发规范。它的出现极大的降低了前端开发者的模块化学习成本，开发者不需要在额外学习AMD、CMD或CommonJS等模块化规范。

ES6模块化规范中定义：

  • 每个js文件都是一个独立的模块
  • 导入其他模块成员使用import关键字
  • 向外共享模块成员使用export关键字

ES6 模块化的体验

在node.js中默认仅支持CommonJS模块化规范，若想基于node.js体验与学习ES6的模块化语法，可以按照如下两个步骤进行配置：

  1. 首先我们要确保安装的v14.15.1或者更高版本的node.js
  2. 在package.json的根节点中添加type:module节点

在这里插入图片描述

注意：type的默认值是CommonJS, 现在我们修改值为module， 代表支持ES6的语法

ES6模块化主要包含如下3种用法：

  • 默认导出与默认导入
  • 按需导出与按需导入
  • 直接导入并执行模块化中的代码

默认导出与默认导入

默认导出语法: export default { 默认导出的成员}
默认导入语法：import 接受名称 from ’模块标识符'

在这里插入图片描述

默认导出的注意事项： 每个模块中只允使用唯一的一次 export default否则会报错:

在这里插入图片描述

默认导入的注意事项：默认导入时的接受名称可以是任意的名称，只要是合法的成员名称即可：

在这里插入图片描述

按需导出 和 按需导入

按需导出的语法： export 按需导入的成员
按需导入的语法：import { s1 } from ‘模块标识符’

在这里插入图片描述

  • 按需导出和按需导入的注意事项：
    • 每个模块中可以使用多次按需导出
    • 按需导入的成员名称必须和按需导出的名称保持一致
    • 按需导入时，可以使用as 关键字进行重命名
    • 按需导入可以和默认导入一起使用

在这里插入图片描述

直接导入并执行模块中的代码

如果只想单纯地执行某个模块中的代码，并需要得到模块中向外共享的成员。此时，可以直接导入并执行模块代码，示例代码如下：
在这里插入图片描述
注意： 没有导出任何成员， 所以我们可以不用对象来接收， 只是为了执行.js文件中的代码

Promise

多层回调函数的相互嵌套，就形成了回调地狱。
在这里插入图片描述

  • 回调地狱的缺点：
    • 代码耦合性太强，牵一发而动全身，难移维护
    • 大量代码冗余的代码相互嵌套，代码的可读性变差

那么如何解决回调地狱的问题？
为了解决回调地狱的问题， ES6（ECMAScript 2015）中新增了Promise的盖帘

我们可以在浏览器中通过consloe.dir(Promise)打印Promise的对象信息：
在这里插入图片描述

  • Promise的基本概念：
    • Promiise 是一个构造函数
      • 我们可以创建Promise 的实例const p = new Promise()
      • new 出来的Promise 实例对象， 代表一个异步操作
    • Promise.prototype 上包含一个.then()方法
      • 每一次new Promise()构造函数得到的实例对象
      • 都可以通过原型链的方式访问到.then()方法，例如p.then()
    • .then()方法用来预先指定成功和失败的回调函数
      • p.then(成功回调函数，失败的回调函数)
      • p.then(result =>() , error => ())
      • 调用.then()方法时，成功的回调函数是必选的，失败的回调函数是可选的

在没有Promise化之前，我们只能基于回调函数按照顺序读取文件内容：
在这里插入图片描述

由于node.js官方提供的fs模块仅支持以回调函数的方式读取文件，不支持Promise的调用方式。因此，需要先运行如下的命令，安装then-fs这个第三方包，从而支持我们基于Promise的方式读取文件的内容：npm install then-fs

我们调用then-fs提供的readFile()方法， 可以异步地读取文件的内容， 它的返回值是Promise的实例对象。因此可以调用.then()方法为每个Promise异步操作指定成功和失败之后的回调函数。示例代码如下：

在这里插入图片描述

注意：上述的代码无法保证文件的读取顺序,需要做进一步的改进！

.then()方法的特性： 如果上一个.then()方法中返回了一个新的Promise实力对象，则可以通过下一个.then()继续进行处理。通过.then()方法的链式调用，解决了回调地狱的问题

Promise支持链式调用，从而来解决回调地狱的问题。示例代码如下：
在这里插入图片描述

注意：这里有一个需要注意的是， 如果上面一个读取操作失败了。 那么后面的.then操作都无法执行了。因为没有返回一个Promise对象

早Promise的链式操作中如果发生错误，可以使用Promise.prototype.catch方法进行捕获和处理：
在这里插入图片描述

.catch是可以捕获到错误的，如果.catch放在最后， 那么当第一个读取文件的操作发生错误之后， 会被.catch捕获， 由于.catch后面没有代码，所以流程结束。 如果把.catch放到所有读取操作中间， 那么当前面的读取操作发生时，会被.catch捕获，然后继续执行.catch后面的代码

Promise.All()方法会发起并行的Promise 异步操作， 等所有的一部操作全部结束后才会执行下一步的.then操作（等待机制）。

在这里插入图片描述

Promise.race()方法会发起并行的Promise异步操作，只要任何一个异步操作完成，就立即执行下一步的.then操作（赛跑机制）。示例代码如下：
在这里插入图片描述

我们可以基于Promise封装读取文件的办法， 对于封装方法的要求有如下要求：

  • 方法的名称要定义为getFile
  • 方法接受一个形参fpath,表示要读取的文件的路径
  • 方法的返回值为Promise实例对象

在这里插入图片描述

如果我们需要创造具体的异步操作，则需要再new Promise()构造函数期间，传递一个function函数，将具体的异步操作定义到function函数内部。

通过.then()指定的成功和失败的回调函数， 可以在function的形参中进行接收，示例如下：
在这里插入图片描述

Promise 异步操作的结果，可以调用reslove或reject回调函数进行处理。
在这里插入图片描述

async/await

什么是async/await ?

async/await 是ES8引入的新语法，用来简化Promise异步操作。在async/await出现之前，开发者只能通过链式.then()的方式处理Promise异步操作。示例代码如下：

在这里插入图片描述

对于上面读取文件内容的操作， 我们可以使用async/await 简化Promise 异步操作，示例代码如下：

在这里插入图片描述

  • async/await 的使用注意事项
    • 如果在function中使用了await，则function必须被async修饰
    • 在async方法中， 第一个await之前的代码都会同步执行，await之后的代码会异步执行

在这里插入图片描述

EventLoop

JavaScript是一门单线程执行的变成语言。也就是说，同一时间只能做一件事情。

在这里插入图片描述

单线程执行任务队列的问题： 如果前一个任务非常耗时，则后续的任务就不得不一直等待，从而导致程序假死的问题。

  • 同步任务和异步任务： 为了防止谋而耗时任务导致程序假死的问题，JavaScript把执行的任务分为了两类：
    • 同步任务：又叫做非耗时任务，指的是主线程上排队执行的那些任务， 只有前一个任务执行完毕，才能执行后一个任务
    • 异步操作：又叫做耗时任务，一步任务由javaScript委托给宿主环境进行执行，当异步任务执行完成时，会通知JavaScript主线程执行一步任务的回调函数

同步任务和异步任务的执行过程：
在这里插入图片描述

  1. 同步任务由JavaScript主线程执行
  2. 异步任务委托给宿主环境执行
  3. 已完成的异步任务对应的回调函数，会被加入到任务队列中等待执行
  4. JavaScript主线程的执行栈被清空后，会读取人物队列中的回调函数，按次序执行
  5. JavaScript主线程不断重复上面的第4步
  6. JavaScript主线程从‘任务队列’中读取异步任务的回调函数，放到执行栈中依次执行。这个过程是不断循环的，所以整个这种运行机制又称为EventLoop（事件循环）

结合EventLoop分析输出的顺序：
在这里插入图片描述

宏任务和微任务

什么是宏任务和微任务？

JavaScript把异步任务又做了进一步的划分， 一步任务又分为两类，分别是：

  • 宏任务（macrotask）:
    • 异步 Ajax 请求
    • setTimeout、setInterval
    • 文件操作
    • 其它宏任务
  • 微任务（microtask）：
    • Promise.then、.catch和.finially
    • process.nextTick
    • 其它微任务
      在这里插入图片描述

宏任务和微任务的执行顺序：

在这里插入图片描述

每一个宏任务执行完之后，都会检查是否存在待执行的微任务，如果有，则执行完所有的微任务之后，在继续执行下一个宏任务。

分析下列代码的输出顺序：
在这里插入图片描述
在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/646271.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Makerbase SimpleFOC ESP32 例程8 电机旋钮控制测试

Makerbase SimpleFOC ESP32 例程8 电机旋钮控制测试

Makerbase SimpleFOC ESP32 例程8 电机旋钮控制测试 第一部分 硬件介绍 1.1 硬件清单 序号品名数量1ESP32 FOC V1.0 主板12YT2804电机2312V电源适配器14USB 线156pin杜邦线2 注意：YT2804是改装的云台无刷电机,带有AS5600编码器，可实现360连续运转。 …
阅读更多...
基于java springboot+mybatis OA办公自动化系统设计和实现

基于java springboot+mybatis OA办公自动化系统设计和实现

基于java springbootmybatis OA办公自动化系统设计和实现 博主介绍：5年java开发经验，专注Java开发、定制、远程、指导等,csdn特邀作者、专注于Java技术领域 作者主页 超级帅帅吴 Java项目精品实战案例《500套》 欢迎点赞 收藏 ⭐留言 文末获取源码联系方…
阅读更多...
利用fiddler测试APP及高级应用

利用fiddler测试APP及高级应用

我们经常需要用到Fiddler做代理服务器对Web、APP应用进行抓包，以便我们对接口功能进行测试调试，定位问题等。这篇将讲述怎么通过Fiddler对APP进行抓包，以及简单介绍一些高级应用场景。 首先，附上Fiddler使用的环境配置清单&#…
阅读更多...
社会心理学(2) 社会心理学的研究方法

社会心理学(2) 社会心理学的研究方法

下面我们来说 社会心理学的研究方法 那么 首先 要说方法论 有些心理学者 他不分方法和方法论 但是 我们还是将他分开 一般的理解 方法论和方法 具体做法不同 方法论 我们定义为 研究心理学的最高或最原则 指导思想 有了这个指导思想 我们就可以更好的决定 对研究的问题 用…
阅读更多...
扫码点餐小程序是什么？为什么现在餐厅都在用扫码点餐？

扫码点餐小程序是什么？为什么现在餐厅都在用扫码点餐？

开餐厅的你有没有遇见一种有这样的情况 爆单的时间点就那么一小段，但是人一多呢，出品和点单很容易混乱，从而流失很多客户。 针对与这种情况，便有了扫码点餐。 小程序是一种为餐饮商家提供的解决方案，它可以帮助商家…
阅读更多...
k8s集群删除master节点

k8s集群删除master节点

1.在另外的master节点执行以下命令 kubectl get node #查看需要删除的节点名称 kubectl delete node k8s-master01 #删除名为k8s-master01的节点 2.在k8s-master01清空集群配置信息 kubeadm reset --cri-socketunix:///var/run/cri-dockerd.sock #因为我使用的是1.…
阅读更多...
Redis - 数据结构类型及使用场景详解

Redis - 数据结构类型及使用场景详解

一. 简介 Redis 是由 Salvatore Sanfilippo 编写的一个key-value存储系统，是跨平台的非关系型数据库。Redis是一个开源的，使用C语言编写的，遵守BSD协议，支持网络，可基于内存，分布式，可选持久性的…
阅读更多...
基于Java健身房管理系统设计实现(源码+lw+部署文档+讲解等)

基于Java健身房管理系统设计实现(源码+lw+部署文档+讲解等)

博主介绍： ✌全网粉丝30W,csdn特邀作者、博客专家、CSDN新星计划导师、java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战 ✌ 🍅 文末获取源码联系 🍅 👇🏻 精…
阅读更多...
搭建Jmeter分布式压测与监控，轻松实践

搭建Jmeter分布式压测与监控，轻松实践

对于运维工程师来说，需要对自己维护的服务器性能瓶颈了如指掌，比如我当前的架构每秒并发是多少，我服务器最大能接受的并发是多少，是什么导致我的性能有问题；如果当前架构快达到性能瓶颈了，是横向扩容性能提…
阅读更多...
很详细的Django开发入门详解（图文并茂）

很详细的Django开发入门详解（图文并茂）

1.Django概述 Django是一个开放源代码的Web应用框架，由Python写成。采用了MTV的框架模式，即模型M，视图V和模版T。 Django 框架的核心组件有： 用于创建模型的对象关系映射；为最终用户设计较好的管理界面；…
阅读更多...
一些可以参考的文档集合12

一些可以参考的文档集合12

之前的文章集合: 一些可以参考文章集合1_xuejianxinokok的博客-CSDN博客 一些可以参考文章集合2_xuejianxinokok的博客-CSDN博客 一些可以参考的文档集合3_xuejianxinokok的博客-CSDN博客 一些可以参考的文档集合4_xuejianxinokok的博客-CSDN博客 一些可以参考的文档集合5_…
阅读更多...
C语言设计实现十六进制与十进制数之间的相互转换

C语言设计实现十六进制与十进制数之间的相互转换

一、十六进制数转为十进制数 1.设计一个C语言代码实现十六进制数例如0xFEFF转为十进制 以下是一个C语言代码示例&#xff0c;用于将十六进制数转换为十进制&#xff1a; #include <stdio.h> #include <stdlib.h>int main() {char hexNum[10]; // 存储输入的十六…
阅读更多...
操作系统：详解物理内存与虚拟内存，用户空间与内核态空间

操作系统：详解物理内存与虚拟内存，用户空间与内核态空间

目录 0、基础知识&#xff1a;磁盘与物理内存 1、 通过虚拟地址访问物理内存 1.1 虚拟内存&#xff1a; 1.2 虚拟内存的优势&#xff1a; 1.3 举例说明&#xff1a; 2、用户空间与内核态空间 2.1 为什么进程的寻址空间要划分为用户空间与内核态空间两部分&#xff1f;&am…
阅读更多...
装饰者模式(十一)

装饰者模式(十一)

请相信自己&#xff0c;请再次相信自己&#xff0c;请一定要相信自己 上一章简单介绍了桥接模式(十), 如果没有看过, 请观看上一章 一. 装饰者模式 引用 菜鸟教程里面的装饰者模式介绍: https://www.runoob.com/design-pattern/decorator-pattern.html 装饰器模式&#xff0…
阅读更多...
什么是开源工作流平台？

什么是开源工作流平台？

在办公职场中&#xff0c;有没有一款软件是实现提质增效的平台&#xff1f;如果让办公实现流程化管理&#xff0c;引用什么平台产品较为合适&#xff1f;低代码开发平台是近些年较为流行的办公软件平台&#xff0c;可以有效管理数据资源&#xff0c;制作表格可视化操作更简便&a…
阅读更多...
Qt Quick系列(6)—多风格UI页面

Qt Quick系列(6)—多风格UI页面

&#x1f680;作者&#xff1a;CAccept &#x1f382;专栏&#xff1a;Qt Quick 文章目录 前言桌面版本的UI界面代码示例相关知识点 移动版风格的UI界面代码示例 嵌套页面代码示例相关知识点 并排页面代码示例相关知识点 前言 Qt Quick控件用于创建由标准化组件&#xff08;…
阅读更多...
OpenCV迭代去畸变undistortPoints 与vins的迭代不同 vins前端与imu预积分

OpenCV迭代去畸变undistortPoints 与vins的迭代不同 vins前端与imu预积分

OpenCV去畸变undistortPoints原理解析 不动点迭代法—单变量非线性方程近似根matlab求解 淦VINS-MONO源码 03–openCV与VINS中去畸变方法的不同 这里用的方法和openCV不同&#xff0c;假设现在求A点的去畸变坐标&#xff0c;那么我们将A的坐标直接代入畸变模型中&#xff0c;求…
阅读更多...
Pytest教程__用例执行顺序（5）

Pytest教程__用例执行顺序（5）

在unittest中&#xff0c;测试用例的执行顺序与测试用例的名称有关&#xff0c;按照名称的ascii码排序的&#xff0c;并不是按照用例的编写顺序执行的。 pytest默认是按用例的编写顺序执行的 我们可以通过第三方包 pytest-ordering 来自定义我们用例的执行顺序。 方法是使用装…
阅读更多...
14. 100ASK-V853-PRO开发板 ADB测试指南

14. 100ASK-V853-PRO开发板 ADB测试指南

100ASK-V853-PRO开发板 ADB测试指南 硬件要求&#xff1a; 100ASK-V853-PRO开发板 软件要求&#xff1a; 固件下载地址&#xff1a;链接&#xff1a;百度网盘 提取码&#xff1a;sp6a 固件位于资料光盘中的10_测试镜像/4.测试ADB/v853_linux_100ask_uart0.img 1.硬件连接 …
阅读更多...
JMeter循环读取CSV文件实现接口批量测试

JMeter循环读取CSV文件实现接口批量测试

目录 前言&#xff1a; 1、添加线程组 2、添加HTTP信息头管理器 3、添加HTTP请求 4、添加察看结果树 5、添加循环控制器 6、在循环控制器下添加CSV配置文件 7、其他配置文件需要修改写入形式 8、执行CSV文件&#xff0c;查看结果 前言&#xff1a; JMeter可以通过CSV…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023