# ES6 高级核心重难点知识梳理

TIP

Web 前端入门到精通核心重难点内容,也是进入前端框架时代非常重要的一步 ^_^

# 1、Promise 简介

名称 描述
Promise Promise 是异步操作的一种解决方案,可以解决回调地狱问题 使用时,需要实例化,
例: new Promise(()=>{})

# 2、Promise 的状态

名称 描述
pending Promise 的未完成状态
fulfilled Promise 的成功状态
rejected Promise 的失败状态

# 3、Promise 的方法

名称 描述
resolve 调用该方法,Promise 的状态会由 pending 变成 fulfilled,表示成功
示例:
new Promise((resolve,reject)=>{ resolve() })
reject 调用该方法,Promise 的状态会由 pending 变成 rejected,表示失败
示例:
new Promise((resolve,reject)=>{ reject() })
then 1、有两个回调函数;当 Promise 状态变化时,会执行对应的回调函数:
Promise 状态由 pending->fulfilled 时,执行 then 的第一个回调函数 Promise 状态由 pending->rejected 时,执行 then 的第二个回调函数
2、then 方法执行后,会返回一个新的 Promise 对象。默认返回的是成功状态的 Promise 对象
catch 1、用来处理 rejected(失败)状态
2、建议在 Promise 对象后面写上 catch 方法,这样可以处理 Promise 内部发生的错误
finally 当 Promise 状态发生变化时,不论状态如何变化,都会执行(了解即可)

# 4、Promise 的简写形式

名称 描述
Promise.resolve() 成功状态 Promise 的一种简写形式,等价于(了解即可):
new Promise(resolve => { resolve() })
Promise.reject() 失败状态 Promise 的简写形式,等价于(了解即可):
new Promise(reject => { reject() })

# 5、Promise 的其他方法

名称 描述
Promise.all() 1、关注多个 Promise 对象的状态变化
2、传入多个 Promise 实例,会返回一个新的 Promise 实例。
3、Promise.all()的状态变化与传入的多个 Promise 实例对象的状态有关:
多个实例的状态都变成 resolved,Promise.all()的最终状态才会变成 resolved
只要有一个实例的状态变成 rejected,Promise.all()的最终状态就变成 rejected
Promise.race() 1、关注多个 Promise 对象的状态变化
2、传入多个 Promise 实例,会返回一个新的 Promise 实例。
3、Promise.race()的状态取决于第一个完成的 Promise 实例对象。
如果第一个完成的实例成功了,Promise.race()就是成功的;
如果第一个完成的实例失败了,Promise.race()就是失败的(了解即可)
Promise.allSettled() 1、关注多个 Promise 对象的状态变化
2、传入多个 Promise 实例,会返回一个新的 Promise 实例。
3、Promise.allSettled()的状态与传入的 Promise 实例状态无关。它永远都会执行成功的回调函数。并且记录各个 Promise 实例的表现(了解即可)

# 6、class 类

名称 描述
class 定义类的关键字
constructor class 中的构造方法,可以省略不写;
实例化时,构造函数中的代码会执行,常用来初始化。
new 实例化构造函数或者类的关键字
this 在 constructor,this 指向实例
在静态方法中,this 指向类
static 声明静态属性和静态方法,其中定义静态方法还处于提案中,了解即可
extends 继承,子类继承父类时,可以使用该关键字。
super 作为函数使用:
1、继承时,在子类的 constructor 中,super 指代父类的 构造函数。
2、作为函数使用时,super 虽然代表父类的构造方法,但是内部的 this 指向子类的实例
作为对象使用:
1、在子类的构造方法(constructor)或一般方法中使用, super 代表父类的原型对象。
定义在父类实例上的属性或方法,无法通过 super 调用;通过 super 调用父类的方法时,方法内部的 this 指向当前的子类的实例
2、在静态方法中使用,super 指向父类。通过 super 调用父类的方法时,方法内部的 this 指向当前的子类,而不是子类的实例

# 7、module 模块化

名称 描述
module 模块系统。
将代码按照功能分割成不同的模块,然后按模块开发;开发完成后,再用 module 关联各个模块,形成一个完整的项目。
将 script 标签的 type 属性,设置成 module,可以加载模块。
例 1: 引入外部文件<script src="模块路径" type="module"></script>
例 2: 直接在 script 标签里书写代码 <script> type="module">// 模块代码</script>

# 8、module 的导入导出

名称 描述
import 关键字,用来导入模块内的内容:
1、使用 export default 和 export 导出的内容可以使用 import 关键字导入
2、一个模块没有导出,也可以将其导入;此时被导入的代码都会执行一遍,也仅会执行一遍
3、如果一个模块中,既有 export default 导出默认值,又有 export 导出其他值,可以使用 import 同时导入。导入时,使用 export default 导出的变量要写在使用 export 导出的变量的前面
4、import 关键字具有提升效果。它导入的内容,会提升到整个模块顶部,率先执行。
export default 导出默认值:
一个模块只能有一个 export default;
导入时语法是:import 变量名 from "路径"
export 导出多个内容;
一个模块可以有多个 export;
导入时语法是:import {变量名} from "路径"
as 给模块起别名;
导出时,可以起别名;语法:export {变量名 as 别名}
导入时,也可以起别名;语法:import {变量名 as 别名} from "路径"
* 整体导入;
语法:import * as 别名 from "路径"

# 9、module 的注意事项

名称 描述
this 模块顶层作用域中的 this 指向 undefined
import() import 方法,它与关键字 import 不一样,它可以按条件导入(了解即可)

# 10、指令相关

Node.js

是一个平台或工具,它上面可以运行后端代码。Babel 等依赖包,需要运行在这个平台上。

名称 描述
npm node 包管理工具。可以利用 npm 初始化项目、安装项目所需要的插件(依赖包)
node -v 查看 node 的版本号
npm -v 查看 npm 的版本号
npm init 初始化项目
npm install 安装依赖包。
1、执行 npm install,可以把 package.json 中记录的依赖包,都下载下来
2、可以使用该指令下载某个具体的依赖包。指令如下:
npm install 包名
--save-dev 安装的包是开发依赖,该包仅在开发阶段使用
npm config set registry https://registry.npmmirror.com 将下载源切换成国内的。
使用 npm 下载时,包源在国外,下载速度可能会很慢。可以使用该指令,可以将包源切换成国内的,这样可以提升下载速度。
该指令只需执行一遍。

# 11、Babel 相关

名称 描述
Babel js 编译器。可以将新版本的 js 代码
比如 es6,编译成大多数浏览器都支持的旧版本的 js 代码,可以解决 es6 的兼容性问题;
npm run build 执行编译(build)命令。
build 命令是在 package.json 文件中的 script 属性里设置的,具体内容是:babel src -d dist。含义是:编译 src 目录下的文件,将其输出到 dist 目录下。
执行 npm run build 后,实际执行的是 babel src -d dist。
.babelrc 文件名,用来配置 babel
@babel/preset-env babel 依赖包,用来配置 babel 将代码编译成什么样子
@babel/cli babel 依赖包。如果想在命令行工具中执行 babel 相关命令,需要安装该包
@babel/core babel 核心功能包。调度、指挥各个依赖包,让各个包协同工作,完成编译功能

# 12、webpack 相关

名称 描述
webpack 静态模块打包器,它会将所有模块打包成一个或多个文件;
webpack 可以处理存在于本地的 js、css、图片、图标字体等静态资源 webpack 功能的核心包名字是 webpack
webpack-cli webpack 依赖包。在命令行工具中执行 webpack 命令时,需要安装该包。
entry 设置 webpack 打包时的入口文件
output 设置打包后的页面输出到哪里
loader 加载器。webpack 本身只能处理 js 文件,它需要借助其他 loader 才能处理 css、图片等非 JS 文件
babel-loader 如果想在 webpack 使用 babel,需要安装该依赖。它在 webapck 与 babel 之间,起到桥梁的作用。
core-js babel 的垫片,帮助 babel 处理 ES6 新增的 api,比如 Set、Map、Promise 等。
plugins 插件,可以帮助 webapack 执行范围更广的任务
html-webpack-plugin 该插件可以将打包后的 js 文件,嵌入到 html 文件中,并将合成后的 html 文件输出到最终的打包目录中。
css-loader webpack 需要借助 css-loader,才能解析在 js 中导入的 css 文件。
style-loader 借助 css-loader,weback 虽然能够解析识别在 js 中导入的 css 文件,但是却无法把解析出来的 css 文件与 html 页面相关联,导致样式无法生效。借助 style-loader 可以把解析出来的 css 文件,以内联的方法,嵌入到 html 页面中
mini-css-extract-plugin 该插件可以将 js 中导入的 css 文件,提取成一个独立的 css 文件,并引入到 html 页面中。
file-loader 借助 file-loader 可以让 webpack 能够处理 css 文件、js 文件中引入的本地图片。
html-withimg-loader 借助 html-withimg-loader,webpack 可以解析识别 html 文件中引入的本地图片。
url-loader webpack 可以借助该 loader 处理 js、css 中的图片,它需要配合 file-loader 一起使用。在 file-loader 功能的基础上,增加了一些其他的功能。通过添加配置项,可以进行压缩图片等操作。
webpack-dev-server 它可以搭建开发环境;代码修改保存后,会自动完成打包的功能。
上次更新时间: 9/29/2024, 9:19:56 PM

大厂最新技术学习分享群

大厂最新技术学习分享群

微信扫一扫进群,获取资料

X