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	它可以搭建开发环境；代码修改保存后，会自动完成打包的功能。