ES6入门知识

****************************************************************************************************************************************************************************

0、ES6学习目标
【1】整体目标
ES6的模块化语法
************************************************************
Promise解决回调地狱问题
************************************************************
async...await简化Promise调用
************************************************************
什么是EventLoop
************************************************************
宏任务和微任务的执行顺序

****************************************************************************************************************************************************************************

1、ES6模块化概念
【1】前端模块化分类。大一统ES6规范,使得学习与开发难度都降低了。
【2】浏览器与服务端通用的模块化开发规范。
*********************************************************************************
每个js都是一个独立的模块
*********************************************************************************
导入其他模块的成员,需要使用import关键字
*********************************************************************************
向外共享成员,使用export关键字

****************************************************************************************************************************************************************************

2、在node.js中体验ES6模块化
【1】确保安装V14.15.1或更高的node.js版本
【2】在package.json的根节点中添加"type":"module"节点
【3】npm init -y
package.json
******************************************************************************
{"type": "module","name": "day","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo "Error: no test specified" && exit 1"},"keywords": [],"author": "","license": "ISC"
}

****************************************************************************************************************************************************************************

3、默认导出导入
【1】3种用法
************************************************************默认导出
export default 默认导出的成员
let n1 = 10
let n2 = 20function show() {}export default {n1,show
}
************************************************************默认导入
/*myImport.js*/
import n1 from './myExport.js'console.log(n1)

****************************************************************************************************************************************************************************

4、默认导出导入的注意事项
【1】在每个模块中,只允许使用唯一一次export default。
【2】默认导入时,接收时候的成员名称可以任意命名,单需要合法。

****************************************************************************************************************************************************************************

5、按需导出导入
【1】导出
export let n1 = 10
export let n2 = 20export function show() {}
【2】导入
/*myImport.js*/
import {n1, n2, show} from './myExport.js'console.log(n1)
console.log(n2)

****************************************************************************************************************************************************************************

6、按需导出导入的注意点
【1】按需导出每个模块中可以使用多次按需导出。
【2】按需导入的成员名称,必须和按需导出的名称一致。
【3】按需导入时,可以使用as关键字进行重命名。和数据库一样的操作...
【4】按需导出入可以和默认导出入一起使用

****************************************************************************************************************************************************************************

7、直接导入并执行模块中的代码
【1】myExport.js
for (let i = 0; i < 3; i++) {console.log(i)
}
【2】myImport.js
/*myImport.js*/
import './myExport.js'

****************************************************************************************************************************************************************************

8、Promise与回调地狱问题解决
【1】回调地狱说明
setTimeout(() => { // 第1层console.log('延时1秒后输出')setTimeout(() => { // 第2层console.log('延时2秒后输出')setTimeout(() => { // 第3层console.log('延时3秒后输出')}, 3000)}, 2000)
}, 1000)
【2】回调地狱的缺点:代码耦合性太强,难以维护。冗余代码多,可读性差。
【3】如何解决回调地狱?Promise

****************************************************************************************************************************************************************************

9、Promise的概念
【1】是一个构造函数,可以new Promise()
【2】Promise.prototype上包含一个.then()方法
【3】.then()方法可以预先指定成功和失败的回调函数
p.then(res=>{},err=>{})
********************************************************************
成功的回调函数是必选的,失败的是可选的。

****************************************************************************************************************************************************************************

10、基于回调函数按顺序读取文本Content
【1】一次读取1-3.txt
【2】安装then-fs包:npm i then-fs
*******************************************************************************
使用then-fs的readFile()方法,可以异步的读取文件内容,它的返回值是Promise实例对象
*******************************************************************************
import thenFs from 'then-fs'
/*下列代码无法保证读取顺序*/
thenFs.readFile('./1.txt', 'utf8').then(res => {console.log(res)
}, err => {console.log(err.message)
})thenFs.readFile('./2.txt', 'utf8').then(res => {console.log(res)
}, err => {console.log(err.message)
})thenFs.readFile('./3.txt', 'utf8').then(res => {console.log(res)
}, err => {console.log(err.message)
})

****************************************************************************************************************************************************************************

11、Promise按顺序读取
【1】升级10的代码,使用.then方法的链式调用
import thenFs from 'then-fs'
/*下列代码无法保证读取顺序*/
let promise = thenFs.readFile('./1.txt', 'utf8').then(res1 => {console.log(res1)return thenFs.readFile('./2.txt', 'utf8')})
promise = promise.then(res2 => {console.log(res2)return thenFs.readFile('./3.txt', 'utf8')
})
promise.then(res3 => {console.log(res3)
})
【2】继续升级
import thenFs from 'then-fs'
/*下列代码无法保证读取顺序*/
thenFs.readFile('./1.txt', 'utf8').then(res1 => {console.log(res1)return thenFs.readFile('./2.txt', 'utf8')}).then(res2 => {console.log(res2)return thenFs.readFile('./3.txt', 'utf8')}).then(res3 => {console.log(res3)})
【3】如果上一个.then返回了promise对象,我们可以继续通过.then来指定成功的回调函数,这样就解决了回调地狱的问题。

****************************************************************************************************************************************************************************

12、通过catch方法捕获错误...这不是就是java的语法吗
【1】在最后加catch打印,还挺好用的。
import thenFs from 'then-fs'
/*下列代码无法保证读取顺序*/
thenFs.readFile('./11.txt', 'utf8').then(res1 => {console.log(res1)return thenFs.readFile('./2.txt', 'utf8')}).then(res2 => {console.log(res2)return thenFs.readFile('./3.txt', 'utf8')}).then(res3 => {console.log(res3)}).catch(err => {console.log(err)})

****************************************************************************************************************************************************************************

13、Promise的其他方法
【1】Promise.all() 等待机制
import thenFs from 'then-fs'const promiseArray = [thenFs.readFile('./1.txt', 'utf-8'),thenFs.readFile('./2.txt', 'utf-8'),thenFs.readFile('./3.txt', 'utf-8')
]
Promise.all(promiseArray).then(res => {console.log(res)})
Promise.all(promiseArray).then(([res1, res2, res3]) => {console.log(res1, res2, res3)})
【2】Promise.race()方法,赛跑机制,只要任何一个异步操作完成,立刻执行.then操作
import thenFs from 'then-fs'const promiseArray = [thenFs.readFile('./1.txt', 'utf-8'),thenFs.readFile('./2.txt', 'utf-8'),thenFs.readFile('./3.txt', 'utf-8')
]
Promise.race(promiseArray).then(res => {console.log(res)})
Promise.race(promiseArray).then(([res1, res2, res3]) => {console.log(res1, res2, res3)})

****************************************************************************************************************************************************************************

14、Promise封装读取文件的方法
【1】封装要求:方法名为getFile,方法形参接收一个fPath,返回值为Promise对象
import thenFs from 'then-fs'function getFile(fPath) {return thenFs.readFile(fPath, 'utf-8')
}export default {getFile
}
【2】使用这个方法
import getFile from './myExport.js'getFile.getFile('./1.txt').then(res => {console.log(res)
})
【3】升级,怎么还没有我写的好呀!!!!!!!!!!!!!!!
import thenFs from 'then-fs'function getFile(fPath) {return new Promise(function (resolve, reject) {thenFs.readFile(fPath, 'utf-8', (err, str) => {if (err) {return reject(err)} else {return resolve(str)}})})
}export default {getFile
}
【4】这个好,可以知道异常
import getFile from './myExport.js'getFile.getFile('./11.txt').then(res => {console.log(res)
}).catch(err => {console.log(err)
})

****************************************************************************************************************************************************************************

16、async和await概念
【1】是es8引入的新语法,是用来简化Promise操作的
【2】.then解决了回调地狱,但是代码仍然冗余,不易理解。
【3】async与await推出了。简单多了感觉。
import thenFs from 'then-fs'/*function getFile() {let res = thenFs.readFile('./1.txt', 'utf-8')console.log(res)
}*/
async function getFile() {let res = await thenFs.readFile('./1.txt', 'utf-8')console.log(res)res = await thenFs.readFile('./2.txt', 'utf-8')console.log(res)res = await thenFs.readFile('./3.txt', 'utf-8')console.log(res)
}getFile()

****************************************************************************************************************************************************************************

17、async和await使用注意点
【1】如果在方法中使用了await,则function必须被async(异步)修饰
【2】执行顺序示例。第一个await之前都是同步的,第一个await之后的都是异步的。
import thenFs from 'then-fs'/*function getFile() {let res = thenFs.readFile('./1.txt', 'utf-8')console.log(res)
}*/
console.log('A')async function getFile() {console.log('B')let res = await thenFs.readFile('./1.txt', 'utf-8')console.log(res)res = await thenFs.readFile('./2.txt', 'utf-8')console.log(res)res = await thenFs.readFile('./3.txt', 'utf-8')console.log(res)console.log('D')
}getFile()
console.log('C')

****************************************************************************************************************************************************************************

18、EventLoop同步任务与异步任务
【1】js是单线程的语言,只能同时执行一个任务
***********************************************************************同步任务
是在主线程上排队执行的那些任务
***********************************************************************异步任务
又叫做耗时任务,是由js委托给宿主环境进行执行的任务。当任务执行完毕后通知js主线程执行回调函数

****************************************************************************************************************************************************************************

19、同步、异步任务执行的过程
【1】堆。主线程是在栈里执行的。栈里的主任务js执行,栈里的异步任务委托给宿主环境执行。
宿主环境包含浏览器或者Node.js。执行完成的异步任务给‘任务队列’。主线程执行完毕后,js主线程
会主动查找‘任务队列’。按照回调函数的顺序取出来,再去执行。js主线程会不断的循环工作。
【2】栈是运行方法的、堆是存储实体的(比如数组)。栈内存没有默认值,堆内存有默认值。都是存在内存里的。new 对象是放在堆里的,它不会随方法而消失。

****************************************************************************************************************************************************************************

20、EventLoop的概念
【1】js主线程不断去任务队列取任务的整个循环过程,就叫做EventLoop
import thenFs from 'then-fs'console.log('A')
thenFs.readFile('./1.txt', 'utf-8').then(res => {console.log('B')
})
setTimeout(() => {console.log('C')
}, 0)
console.log('D')
***********************************************************************打印为ADCB
因为B与C C先执行完毕。所以先打印C

****************************************************************************************************************************************************************************

21、宏任务与微任务概念
【1】异步任务分为宏、微任务。
宏任务:ajax setTimeout setInterval 文件操作 其他
微任务:Promise.then .catch .finally 其他
【2】宏、微任务执行顺序。两者是交替执行的
宏任务执行完毕,会判断是否存在微任务,如果有先执行微任务完毕后再执行宏任务。

****************************************************************************************************************************************************************************

22、理解宏任务与微任务的执行顺序
【1】小云、小腾排队,假设只有一个业务,小云办理,小腾仅能等待。
小云存款(宏任务开始)后,柜员询问是否需要办理信用卡、购买理财产品,如果办理则微任务开始。
小云完毕后,小腾办理。

****************************************************************************************************************************************************************************

25、API接口案例
【1】MySQL数据库+Express(我java不能实现吗?)...
【2】npm i express@4.17.1 mysql@2.2.5
【3】创建express服务器
【4】创建db数据库,就是properties的配置信息
【5】创建user_control模块,执行sql语句
【6】使用user_router模块
【7】使用try...catch捕获程序执行中的异常

****************************************************************************************************************************************************************************

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

模式识别作业:颜色算子的三种阈值分割算法

一、引言&#xff1a; 在图像处理中&#xff0c;我们往往需要提取图像的一些关键信息&#xff0c;比如本篇文章的内容——提取颜色&#xff0c;然而当我们需要提取某一种颜色时&#xff0c;无论图像余下的部分如何“丰富多彩”&#xff0c;他们都不再重要&#xff0c;需要被忽…

如何使用SSH密钥克隆仓库

1.创建SSH Key 在用户目录下查看有没有.ssh目录。如果有且该.ssh目录下有id_rsa&#xff08;私钥&#xff09;&#xff0c;和id_rse_pub(公钥)这俩文件&#xff0c;那么这一步就可以跳过。否则使用以下指令创建SSH Key ssh-keygen -t rsa -C "xxxqq.com" "xx…

8.k8s中网络资源service

目录 一、service资源概述 二、service资源类型 1.ClusterIP类型 2.service的nodeport类型 3.service的loadbalancer类型&#xff08;了解即可&#xff09; 4.service的externalname类型&#xff08;了解即可&#xff09; 三、nodeport的端口范围设置和svc的endpoint列表 1.修…

AJAX概述和基本使用

01 【AJAX概述和基本使用】 1.AJAX简介 AJAX 全称为Asynchronous JavaScript And XML&#xff0c;就是异步的JS 和XML 通过AJAX 可以在浏览器中向服务器发送异步请求&#xff0c;最大的优势&#xff1a;无刷新获取数据 AJAX 不是新的编程语言&#xff0c;而是一种将现有的标准…

刷代码随想录有感(53):合并二叉树

题干&#xff1a; 代码&#xff08;递归实现&#xff09;&#xff1a; TreeNode* mergeTrees(TreeNode* root1, TreeNode* root2) {//前序好理解&#xff0c;直接将树覆盖到另一个上面if(root1 NULL)return root2;//当前遍历节点为空的话就让另一个的值覆盖过来if(root2 NUL…

对命令模式的理解

目录 一、场景1、文本编辑器并不是一个好的例子&#xff0c;设备控制器才是2、设备控制器的demo 二、不用命令模式1、代码2、问题 三、使用命令模式1、代码2、当需求变化时2.1 新增代码2.2 优点 四、进一步思考1、省略对Command的建模可以吗&#xff1f;2、命令模式的价值 一、…

GDPU unity游戏开发 碰撞器与触发器

砰砰叫&#xff0c;谁动了她的奶酪让你的小鹿乱撞了。基于此&#xff0c;亦即碰撞与触发的过程。 碰撞器与触发器的区别 通俗点讲&#xff0c;碰撞器检测碰撞&#xff0c;触发器检测触发&#xff0c;讲了跟没讲似的。碰撞器是用来检测碰撞事件的&#xff0c;在unity中&#xff…

gateway中对返回的数据进行处理

gateway中对返回的数据进行处理 背景1.项目层次 背景 最近公司有个需求是对返回数据进行处理&#xff0c;比如进行数据脱敏。最后在gateway中进行处理。 1.项目层次 根据项目的结构&#xff0c;原本在菜单功能处有对于权限设计的url判断&#xff0c;所以在url后面加了一个正…

CGAL 网格测地线距离计算

文章目录 一、简介二、实现代码三、实现效果参考资料一、简介 网格测地线距离是指在三维网格模型中计算两点之间的最短路径距离,考虑了网格的拓扑结构和几何形状。与传统的欧几里德距离不同,测地线距离考虑了网格的曲面形状,因此更适用于描述三维空间中的距离。 二、实现代码…

docker常用容器启动命令

docker常用容器启动命令 mysql启动redis启动nginx配置文件&启动 mysql启动 docker run -itd --name mysql-test --restartalways -p 3306:3306 -e MYSQL_ROOT_PASSWORD123456 mysqlredis启动 docker run -itd --name redis-test --restartalways -p 6379:6379 redisnginx…

蓝桥杯练习系统(算法训练)ALGO-949 勇士和地雷阵

资源限制 内存限制&#xff1a;256.0MB C/C时间限制&#xff1a;1.0s Java时间限制&#xff1a;3.0s Python时间限制&#xff1a;5.0s 问题描述 勇士们不小心进入了敌人的地雷阵&#xff08;用n行n列的矩阵表示&#xff0c;*表示某个位置埋有地雷&#xff0c;-表示某个…

yolov5-pytorch-Ultralytics训练+预测+报错处理记录

一、前言 玩一段时间大模型&#xff0c;也该回归一下图像识别。本项目用于记录使用基于Ultralytics的yolov5进行目标检测测试。为什么用Ultralytics呢&#xff1f;答案有3 1、其良好的生态&#xff0c;方便我们部署到其它语言和设备上。因此本次测试结论&#xff1a;大坑没有&…

技术周总结 2024.04.29-05.05

一、python的数据表处理 """ 删除 Doris库中某些表中无效的数据 """ import mysql.connector import socket import socks import pandas as pd import pymysql from sqlalchemy import create_engine, text import csv from datetime import da…

UE5 蓝图入门

基础节点创建&#xff1a; 常量&#xff1a; 按住 1 &#xff0c;点击鼠标左键&#xff0c;创建常量 二维向量&#xff1a; 按住 2 &#xff0c;点击鼠标左键&#xff0c;创建二维向量 三维向量&#xff1a; 按住 3 &#xff0c;点击鼠标左键 乘法&#xff1a; 按住 m 键…

基于node.js+css+html+mysql博客系统

博主介绍&#xff1a; 大家好&#xff0c;本人精通Java、Python、Php、C#、C、C编程语言&#xff0c;同时也熟练掌握微信小程序、Android等技术&#xff0c;能够为大家提供全方位的技术支持和交流。 我有丰富的成品Java、Python、C#毕设项目经验&#xff0c;能够为学生提供各类…

【C++风云录】图形和动作捕捉库全面解析:从OpenPose到OpenCV

深入浅出&#xff1a;六大计算机视觉和动作捕捉库的教程和比较 前言 本文将为读者详细介绍六种在计算机视觉领域广泛使用的开源软件和SDK&#xff0c;包括OpenPose、Vicon SDK、Intel RealSense SDK、Microsoft Kinect SDK、PCL (Point Cloud Library)和OpenCV。我们会一一解…

Vue进阶之Vue项目实战(一)

Vue项目实战 项目搭建初始化eslint版本约束版本约束eslint配置 stylelintcspellcz-githusky给拦截举个例子 zx 项目搭建 node版本&#xff1a;20.11.1 pnpm版本&#xff1a;9.0.4 初始化 vue3最新的脚手架 pnpm create vite byelide-demo --template vue-ts pnpm i pnpm dev…

MIPS32 指令架构

指令格式 R 类型 说明&#xff1a; 用于寄存器和寄存器操作 参数说明: Op: 指令操作码Rs: 第一个源操作数寄存器号&#xff0c;参与运算使用Rd: 目的操作数寄存器号&#xff0c;保存结果使用Shamt: 位偏移量&#xff0c;仅在位移指令使用&#xff0c;在此直接置0Func: 指令函…

区块链 | IPFS:IPNS(入门版)

&#x1f98a;原文&#xff1a;IPFS 与 IPNS 啥关系&#xff1f; &#x1f98a;写在前面&#xff1a;本文属于搬运博客&#xff0c;自己留存学习。这篇文章讲得太入门了&#xff0c;不涉及任何底层原理。 正文 随着 2019 年 12 月 12 日 Filecoin 测试网的上线&#xff0c;IPF…

深入 Django 模型层:数据库设计与 ORM 实践指南

title: 深入 Django 模型层&#xff1a;数据库设计与 ORM 实践指南 date: 2024/5/3 18:25:33 updated: 2024/5/3 18:25:33 categories: 后端开发 tags: Django ORM模型设计数据库关系性能优化数据安全查询操作模型继承 第一章&#xff1a;引言 Django是一个基于Python的开源…