佛山企业_网页打不开但是有网什么原因禁用_什么平台可以推销自己的产品_网站维护公司

vue4.0

Vue.js 4.0 是在 2021 年 9 月发布。Vue.js 4.0 是 Vue.js 的一个重要版本，引入了许多新特性和改进，旨在提升开发者的体验和性能。以下是一些关键的更新和新特性：

Composition API 重构：Vue 3 引入了 Composition API 作为官方推荐的 API 风格，而 Vue 4.0 在此基础上进一步优化和扩展了 Composition API，使其更加灵活和强大。
更好的 TypeScript 支持：Vue 4.0 提供了更完善的 TypeScript 支持，帮助开发者更容易地利用 TypeScript 进行 Vue 开发。
性能改进：通过优化内部机制，Vue 4.0 在渲染性能和响应性系统上有了显著提升，尤其是在处理大型应用时。
新的编译器优化：引入了更先进的编译器优化技术，使得模板编译速度更快，生成的代码更加优化。
更好的跨框架集成：Vue 4.0 加强了与其他前端框架和库的集成能力，例如更好地与 React 和 Angular 等框架互操作。
新的 CLI 和 Vite 支持：Vue CLI 和 Vite 都得到了更新和改进，支持 Vue 4.0 的新特性和最佳实践。
生态系统更新：Vue Router、Vuex 等生态系统项目也相应地更新了以支持 Vue 4.0 的新特性和改进。

Vite的原理

Vite 是一个现代化的前端构建工具，由 Vue.js 的作者尤雨溪开发。它旨在提供更快的开发体验和更高效的构建流程。Vite 的核心原理基于 ES Modules (ESM) 和现代浏览器的原生支持，与传统的打包工具（如 Webpack）有显著的区别。

Vite 的核心原理

1. 基于 ES Modules 的开发服务器

Vite 的核心思想是利用现代浏览器对 ES Modules (ESM) 的原生支持，直接在浏览器中运行未打包的代码。

传统工具的问题：
- Webpack 等工具在开发模式下需要将所有模块打包成一个或多个 bundle 文件。
- 随着项目规模增大，打包时间会显著增加，尤其是在启动开发服务器时。
Vite 的解决方案：
- Vite 在开发模式下不打包代码，而是直接利用浏览器的 ESM 支持，按需加载模块。
- 当浏览器请求一个模块时，Vite 会动态地将模块转换为浏览器可识别的 ESM 格式，并返回给浏览器。
- 这种方式避免了打包的开销，极大地提升了开发服务器的启动速度。

示例：
假设有以下代码：

// main.js
import { greet } from './utils.js';greet('Vite');// utils.js
export function greet(name) {console.log(`Hello, ${name}!`);
}

在传统工具中，Webpack 会将 main.js 和 utils.js 打包成一个文件。

在 Vite 中，浏览器会直接加载 main.js，然后通过 ESM 动态加载 utils.js。

2. 按需编译

Vite 采用按需编译的方式，只有在浏览器请求某个模块时，才会对该模块进行编译。

传统工具的问题：
- Webpack 等工具在启动时需要对整个项目进行打包和编译，即使某些模块在初始加载时并不需要。
Vite 的解决方案：
- Vite 启动时只编译项目的入口文件（如 index.html），其他模块按需编译。
- 当浏览器请求某个模块时，Vite 会动态编译该模块并返回结果。
- 这种方式减少了初始编译时间，特别适合大型项目。

热更新（HMR）机制

Vite 的热更新机制（Hot Module Replacement）非常高效，基于 ESM 的特性实现。

传统工具的问题：
- Webpack 的热更新需要重新构建整个模块依赖图，并将更新的模块推送到浏览器。
- 随着项目规模增大，热更新的速度会变慢。
Vite 的解决方案：
- Vite 利用 ESM 的特性，只更新修改的模块及其依赖。
- 当某个模块发生变化时，Vite 会通过 WebSocket 通知浏览器，浏览器只需要重新加载更新的模块，而不需要刷新整个页面。
- 这种方式使得热更新的速度非常快，几乎感觉不到延迟。

示例：
修改 utils.js 中的 greet 函数：

export function greet(name) {console.log(`Hi, ${name}!`);
}

Vite 会通知浏览器重新加载 utils.js，而不影响其他模块。

4. 生产环境的构建

在开发模式下，Vite 利用 ESM 和按需编译实现了极快的启动速度。但在生产环境中，Vite 仍然会使用 Rollup 进行打包。

Rollup 的优势：
- Rollup 是一个基于 ESM 的打包工具，生成的代码更小、更高效。
- Vite 在生产环境中使用 Rollup 打包，确保代码的性能和兼容性。
与传统工具的区别：
- Webpack 在开发和生产环境中都使用相同的打包机制。
- Vite 在开发和生产环境中采用不同的策略，开发模式下不打包，生产模式下使用 Rollup 打包。

在这里插入图片描述

Vite 的优势

极快的启动速度：

由于不需要打包，Vite 的启动速度非常快，特别适合大型项目。
高效的热更新：

基于 ESM 的热更新机制，更新速度极快。
开箱即用的现代前端支持：

原生支持 TypeScript、JSX、CSS Modules 等现代前端特性。
灵活的插件系统：

Vite 的插件系统基于 Rollup，兼容 Rollup 插件，同时提供了 Vite 特有的插件 API。
生产环境优化：

使用 Rollup 进行打包，生成的代码更小、更高效。

Vite 的适用场景

现代前端项目：Vite 非常适合基于 Vue、React、Svelte 等现代框架的项目。大型项目：Vite 的按需编译和热更新机制特别适合大型项目。快速原型开发：Vite 的极快启动速度非常适合快速原型开发。

总结：
Vite 通过利用现代浏览器的 ESM 支持，实现了按需编译和极快的开发体验。与传统的打包工具相比，Vite 在开发模式下不打包代码，而是直接利用浏览器的模块加载机制，极大地提升了开发效率。在生产环境中，Vite 使用 Rollup 进行打包，确保代码的性能和兼容性。Vite 的出现标志着前端构建工具的一次重大革新，特别适合现代前端开发的需求。

webpack-现代前端开发中最主流的模块打包工具之一

1. Webpack 是什么？

Webpack 是一个静态模块打包工具，主要用于将前端项目中的各种资源（如 JavaScript、CSS、图片、字体等）打包成一个或多个 bundle 文件。它的核心功能包括：

模块化支持：支持 CommonJS、ES Modules、AMD 等多种模块化规范。资源打包：将各种类型的资源（如 JS、CSS、图片等）视为模块，并打包到最终的输出文件中。代码分割：支持按需加载和代码分割，优化加载性能。插件和加载器：通过插件和加载器扩展功能，支持 TypeScript、Sass、Less 等非原生资源。

2. Webpack 的核心概念

（1）Entry（入口）

入口是 Webpack 构建的起点，Webpack 会从入口文件开始递归解析依赖。
可以配置单个或多个入口。

示例：

module.exports = {entry: './src/index.js',
};

（2）Output（输出）

输出配置指定打包后的文件存放位置和文件名。

示例：

module.exports = {output: {path: path.resolve(__dirname, 'dist'),filename: 'bundle.js',},
};

（3）Loader（加载器）

Loader 用于处理非 JavaScript 文件（如 CSS、图片、字体等），将其转换为 Webpack 可以处理的模块。
常见的 Loader：
- babel-loader：将 ES6+ 代码转换为 ES5。
- css-loader：处理 CSS 文件。
- style-loader：将 CSS 插入到 DOM 中。
- file-loader：处理文件（如图片、字体）。

示例：

module.exports = {module: {rules: [{test: /\.css$/,use: ['style-loader', 'css-loader'],},],},
};

（4）Plugin（插件）

插件用于扩展 Webpack 的功能，例如打包优化、资源管理、环境变量注入等。
常见的插件：
- HtmlWebpackPlugin：自动生成 HTML 文件并注入打包后的资源。
- CleanWebpackPlugin：清理构建目录。
- MiniCssExtractPlugin：将 CSS 提取到单独的文件中。

示例：

const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })],
};

（5）Mode（模式）

Webpack 支持三种模式：development、production 和 none。
不同模式会启用不同的优化策略。

示例：

module.exports = {mode: 'production',
};

（6）Module（模块）

Webpack 将所有文件视为模块，通过 Loader 处理不同类型的模块。

（7）Chunk（代码块）

Chunk 是 Webpack 打包过程中的中间产物，通常对应一个或多个模块。
通过代码分割（Code Splitting）可以将代码拆分成多个 Chunk，实现按需加载。

3. Webpack 的工作原理

Webpack 的打包过程可以分为以下几个步骤：

解析入口文件：从配置的入口文件开始，递归解析依赖。
构建依赖图：根据模块之间的依赖关系，构建一个依赖图。
加载模块：使用 Loader 处理非 JavaScript 模块。
应用插件：在打包过程中执行插件的逻辑。
生成 Chunk：根据依赖图生成一个或多个 Chunk。
输出文件：将 Chunk 写入到配置的输出目录中。

4. Webpack 的优化

（1）代码分割（Code Splitting）

通过 SplitChunksPlugin 或动态导入（import()）将代码拆分成多个 Chunk，实现按需加载。

示例：

import('./module').then((module) => {module.default();
});

（2）Tree Shaking

移除未使用的代码（Dead Code），减少打包体积。
需要启用 ES Modules 并配置 mode: ‘production’。

（3）缓存

使用 cache 配置或 HardSourceWebpackPlugin 缓存构建结果，提升构建速度。

（4）压缩代码

使用 TerserWebpackPlugin 压缩 JavaScript 代码。
使用 CssMinimizerWebpackPlugin 压缩 CSS 代码。

（5）懒加载

通过动态导入实现懒加载，减少初始加载时间。

5. Webpack 与其他工具的区别

（1）Webpack vs Vite

Webpack：
- 开发模式下需要打包所有模块，启动速度较慢。
- 适合复杂项目和需要兼容旧浏览器的场景。
Vite：
- 开发模式下基于 ESM 按需加载，启动速度极快。
- 适合现代前端项目和快速开发。

（2）Webpack vs Rollup

Webpack：
- 适合应用开发，支持代码分割、懒加载等功能。
Rollup：
- 适合库开发，生成的代码更小、更高效。

（3）Webpack vs Parcel

Webpack：
- 配置灵活，功能强大，但配置复杂。
Parcel：
- 零配置，开箱即用，适合简单项目。

6. Webpack 的常见问题

（1）如何优化 Webpack 的构建速度？

使用 cache 配置缓存构建结果。
使用 DllPlugin 预编译不常变化的模块。
减少 Loader 和插件的使用范围。

（2）如何解决 Webpack 打包体积过大的问题？

使用 Tree Shaking 移除未使用的代码。
使用代码分割和懒加载。
压缩代码和资源。

（3）Webpack 如何处理 CSS 文件？

使用 css-loader 解析 CSS 文件。
使用 style-loader 将 CSS 插入到 DOM 中。
使用 MiniCssExtractPlugin 将 CSS 提取到单独的文件中。

总结:
Webpack 是一个功能强大的模块打包工具，通过 Loader 和插件支持多种资源类型和优化策略。它的核心概念包括 Entry、Output、Loader、Plugin 和 Mode。Webpack 的优化手段包括代码分割、Tree Shaking、缓存和懒加载等。与 Vite、Rollup 和 Parcel 相比，Webpack 更适合复杂项目和需要兼容旧浏览器的场景。

Turbopack

Turbopack 是一个新兴的前端构建工具，由 Vercel 团队开发，旨在提供比现有工具（如 Webpack 和 Vite）更快的构建速度和开发体验。Turbopack 是基于 Rust 编写的，利用了现代编程语言的高性能和并发能力，专注于解决大规模前端项目的构建性能问题。

1. Turbopack 的核心特点

（1）基于 Rust 的高性能

Turbopack 使用 Rust 编写，Rust 是一种高性能、内存安全的系统编程语言。
与 JavaScript 相比，Rust 的执行速度更快，尤其是在 CPU 密集型任务（如模块解析和打包）中表现优异。

（2）增量编译

Turbopack 采用增量编译机制，只重新编译发生变化的模块，而不是整个项目。
这种机制显著减少了构建时间，特别适合大型项目。

（3）按需编译

类似于 Vite，Turbopack 在开发模式下按需编译模块，只有在浏览器请求某个模块时才会进行编译。
这种方式避免了不必要的编译工作，提升了开发服务器的启动速度。

（4）兼容 Webpack 生态

Turbopack 兼容 Webpack 的配置和插件生态，可以平滑迁移现有项目。
这意味着开发者可以继续使用熟悉的 Webpack 插件和 Loader。

（5）支持多种框架

Turbopack 支持 React、Next.js、Vue、Svelte 等主流前端框架。
它与 Next.js 深度集成，是 Next.js 13 的默认构建工具。

2. Turbopack 的工作原理

(1）模块图（Module Graph）

Turbopack 通过构建模块图来管理项目中的模块依赖关系。
模块图是增量更新的，只有发生变化的模块及其依赖会被重新编译。

（2）缓存机制

Turbopack 使用高效的缓存机制来存储编译结果。
在重新构建时，Turbopack 会优先使用缓存，避免重复编译。

（3）并发处理

Turbopack 利用 Rust 的并发能力，并行处理多个模块的编译任务。
这种并发机制进一步提升了构建速度。

（4）开发模式与生产模式

开发模式：按需编译，启动速度快，支持热更新（HMR）。
生产模式：全量打包，生成优化的静态资源。

3. Turbopack 的优势

（1）极快的构建速度

Turbopack 的构建速度比 Webpack 快得多，尤其是在大型项目中。
根据 Vercel 的基准测试，Turbopack 的启动速度比 Webpack 快 10 倍以上。

（2）更好的开发体验

按需编译和增量编译机制使得开发服务器的启动和热更新速度更快。
开发者可以更快地看到代码更改的效果。

（3）兼容现有生态

Turbopack 兼容 Webpack 的配置和插件，降低了迁移成本。
开发者可以逐步迁移现有项目，而不需要重写所有配置。

（4）专注于大规模项目

Turbopack 的设计目标是为大规模前端项目提供高效的构建解决方案。
它特别适合需要处理大量模块和复杂依赖关系的项目。

** 加粗样式
**

5. Turbopack 的使用场景

（1）大型前端项目

Turbopack 的增量编译和高效缓存机制特别适合处理大规模项目。

（2）Next.js 项目

Turbopack 是 Next.js 13 的默认构建工具，与 Next.js 深度集成。

（3）需要快速开发体验的项目

对于需要快速启动和热更新的项目，Turbopack 提供了极佳的开发体验。

6. Turbopack 的局限性

（1）生态尚不成熟

虽然 Turbopack 兼容 Webpack 生态，但其自身的插件和工具生态还在发展中。

（2）学习成本

对于熟悉 Webpack 的开发者来说，Turbopack 的学习成本较低，但仍需要了解其独特的配置和优化方式。

（3）生产环境优化

Turbopack 在生产环境中的优化策略仍在不断完善，可能不如 Webpack 成熟。

7. 如何开始使用 Turbopack

（1）在 Next.js 中使用

Next.js 13 默认集成了 Turbopack，只需升级到最新版本即可使用。

（2）独立使用

Turbopack 也可以独立使用，但目前文档和工具链还在完善中。

总结:
Turbopack 是一个基于 Rust 的高性能前端构建工具，专注于提升大规模项目的构建速度和开发体验。它通过增量编译、按需编译和高效的缓存机制，显著减少了构建时间。Turbopack 兼容 Webpack 生态，特别适合大型项目和 Next.js 应用。尽管其生态尚不成熟，但 Turbopack 代表了前端构建工具的未来发展方向，值得开发者关注和尝试。

TypeScript

1. TypeScript 是什么？

TypeScript 是 JavaScript 的一个超集，由微软开发。它在 JavaScript 的基础上添加了静态类型检查和面向对象编程的特性，主要特点包括：

静态类型检查：在编译时检查类型错误，提升代码的健壮性。
类型推断：自动推断变量类型，减少手动类型注解的工作量。
面向对象编程：支持类、接口、泛型等高级特性。
兼容 JavaScript：TypeScript 是 JavaScript 的超集，任何合法的 JavaScript 代码都是合法的 TypeScript 代码。

2. TypeScript 的优势

（1）类型安全

静态类型检查可以在编译时发现潜在的错误，减少运行时错误。

示例：

function add(a: number, b: number): number {return a + b;
}
add(1, '2'); // 编译时报错：Argument of type 'string' is not assignable to parameter of type 'number'.

（2）更好的代码可维护性

类型注解和接口定义使代码更易读、易懂。

示例：

interface User {name: string;age: number;
}function greet(user: User): string {return `Hello, ${user.name}!`;
}

（3）增强的开发体验

现代编辑器（如 VSCode）对 TypeScript 提供了强大的支持，包括代码补全、类型提示、重构等功能。

（4）渐进式采用

可以在现有 JavaScript 项目中逐步引入 TypeScript，无需重写整个项目。

3. TypeScript 的核心概念

（1）基础类型

TypeScript 支持 JavaScript 的所有基础类型（如 number、string、boolean 等），并扩展了一些类型（如 any、unknown、void、never 等）。

示例：

let num: number = 42;
let str: string = 'Hello';
let isDone: boolean = false;

（2）联合类型和交叉类型

联合类型：表示一个值可以是多种类型之一。

let value: string | number;
value = 'Hello'; // OK
value = 42; // OK

交叉类型：表示一个值必须同时满足多种类型。

interface A {a: string;
}
interface B {b: number;
}
type C = A & B;
let obj: C = { a: 'Hello', b: 42 };

（3）接口和类型别名

接口（Interface）：用于定义对象的形状。
```
interface User {name: string;age: number;
}
```
类型别名（Type Alias）：可以为类型定义一个别名。
```
type Point = {x: number;y: number;
};
```

（4）泛型

泛型用于创建可重用的组件，支持多种类型。

示例：

function identity<T>(arg: T): T {return arg;
}
let output = identity<string>('Hello');

（5）类

TypeScript 支持面向对象编程，包括类、继承、修饰符等。

示例：

class Animal {name: string;constructor(name: string) {this.name = name;}move(distance: number = 0) {console.log(`${this.name} moved ${distance}m.`);}
}

（6）装饰器

装饰器是一种特殊类型的声明，用于附加到类、方法、属性或参数上。

示例：

function log(target: any, key: string) {console.log(`Method ${key} called.`);
}class MyClass {@logmyMethod() {console.log('Hello');}
}

4. TypeScript 的常见问题

（1）TypeScript 和 JavaScript 的区别

TypeScript 是 JavaScript 的超集，添加了静态类型检查和面向对象特性。
TypeScript 需要编译为 JavaScript 才能运行。

（2）any 和 unknown 的区别

any：禁用类型检查，可以赋值给任何类型。
unknown：类型安全的 any，不能直接赋值给其他类型，需要先进行类型检查。

（3）interface 和 type 的区别

interface：主要用于定义对象的形状，支持扩展和合并。
type：更通用，可以定义任何类型，不支持合并。

（4）如何实现类型守卫

类型守卫用于在运行时检查类型，常见的方式包括 typeof、instanceof 和自定义类型谓词。

示例：

function isString(value: any): value is string {return typeof value === 'string';
}

5. TypeScript 的面试高频问题

（1）什么是泛型？如何使用泛型？

泛型用于创建可重用的组件，支持多种类型。

示例：

function identity<T>(arg: T): T {return arg;
}

（2）如何定义一个可选属性？

使用 ? 定义可选属性。

示例：

interface User {name: string;age?: number;
}

（3）如何实现函数重载？

通过定义多个函数签名实现函数重载。

示例：

function add(a: number, b: number): number;
function add(a: string, b: string): string;
function add(a: any, b: any): any {return a + b;
}

（4）如何定义一个只读属性？

使用 readonly 修饰符定义只读属性。

示例：

interface Point {readonly x: number;readonly y: number;
}

（5）如何处理第三方库的类型定义？

使用 DefinitelyTyped 提供的类型定义文件（@types 包）。
示例：
```
npm install --save-dev @types/lodash
```

总结：
TypeScript 是前端开发中的重要工具，通过静态类型检查和面向对象特性提升了代码的健壮性和可维护性。掌握 TypeScript 的核心概念（如类型、接口、泛型、类等）以及常见问题的解决方法，是面试中的关键。在实际项目中，TypeScript 可以帮助开发者更高效地编写和维护代码，特别适合中大型项目。

AST的应用

AST（Abstract Syntax Tree，抽象语法树）是编程语言中源代码的树状表示形式。它将代码解析为树结构，每个节点代表代码中的一个语法结构（如表达式、语句、变量等）。AST 在前端开发中有广泛的应用，尤其是在代码分析、转换和优化方面。

1. AST 的基本概念

（1）什么是 AST？

AST 是源代码的抽象语法结构的树状表示。
它将代码解析为树结构，每个节点代表代码中的一个语法单元。
示例：
```
const a = 1 + 2;
```

对应的 AST 可能如下json文件：

```
{"type": "VariableDeclaration","declarations": [{"type": "VariableDeclarator","id": { "type": "Identifier", "name": "a" },"init": {"type": "BinaryExpression","operator": "+","left": { "type": "Literal", "value": 1 },"right": { "type": "Literal", "value": 2 }}}],"kind": "const"
}
```

（2）AST 的生成过程

1. 词法分析（Lexical Analysis）：将源代码分解为一个个 Token（如关键字、标识符、运算符等）。
1. 语法分析（Syntax Analysis）：根据语法规则将 Token 组合成 AST。

2. AST 的应用场景

（1）代码编译和转译

Babel：将 ES6+ 代码转换为 ES5 代码。
Babel 使用 AST 解析代码，然后通过插件对 AST 进行转换，最后生成目标代码。

示例：将箭头函数转换为普通函数。

// 转换前
const add = (a, b) => a + b;// 转换后
const add = function(a, b) {return a + b;
};

TypeScript 编译器：将 TypeScript 代码转换为 JavaScript 代码。

（2）代码格式化

Prettier：通过解析代码生成 AST，然后根据规则重新生成格式化的代码。
示例：统一代码缩进、换行等。

（3）代码静态分析

ESLint：通过 AST 分析代码，检查潜在的错误或不符合规范的代码。

示例：检查未使用的变量、不推荐的语法等。

// ESLint 规则：禁止使用 var
var a = 1; // 报错：Use 'let' or 'const' instead of 'var'.

（4）代码优化

Webpack：通过 AST 分析代码依赖关系，进行 Tree Shaking（移除未使用的代码）。

示例：移除未使用的模块。

// 未使用的模块
import { unusedFunction } from './utils';// Tree Shaking 后
// unusedFunction 被移除

（5）代码生成

代码生成工具：根据 AST 生成目标代码。

示例：根据模板生成代码。

// 模板
function {{name}}({{params}}) {return {{body}};
}// 生成代码
function add(a, b) {return a + b;
}

（6）代码高亮和语法检查

编辑器插件：通过 AST 实现代码高亮、语法检查和自动补全。
- 示例：VSCode 的 TypeScript 插件。

3. AST 的操作工具

（1）JavaScript 的 AST 工具

Babel：
- @babel/parser：将代码解析为 AST。
- @babel/traverse：遍历和修改 AST。
- @babel/generator：将 AST 转换为代码。
ESLint：
- 提供 API 用于自定义规则和代码分析。
Acorn：
- 一个轻量级的 JavaScript 解析器，用于生成 AST。

（2）TypeScript 的 AST 工具

TypeScript 编译器 API：
- 提供完整的 AST 解析和操作功能。
ts-morph：
- 一个基于 TypeScript 编译器 API 的高级工具库，简化了 AST 的操作。

4. AST 的实际应用示例

（1）使用 Babel 转换箭头函数

```
const babel = require('@babel/core');const code = 'const add = (a, b) => a + b;';// 解析代码生成 AST
const ast = babel.parseSync(code, {presets: ['@babel/preset-env'],
});// 遍历和修改 AST
babel.traverse(ast, {ArrowFunctionExpression(path) {path.replaceWith(babel.types.functionExpression(null,path.node.params,babel.types.blockStatement([babel.types.returnStatement(path.node.body),])));},
});// 生成目标代码
const output = babel.transformFromAstSync(ast);
console.log(output.code);
// 输出：const add = function(a, b) { return a + b; };
```

（2）使用 ESLint 自定义规则

```
module.exports = {meta: {type: 'suggestion',docs: {description: '禁止使用 console.log',},},create(context) {return {CallExpression(node) {if (node.callee.object &&node.callee.object.name === 'console' &&node.callee.property.name === 'log') {context.report({node,message: '禁止使用 console.log',});}},};},
};
```

5. AST 的面试高频问题

（1）什么是 AST？

AST 是源代码的抽象语法结构的树状表示，用于代码分析、转换和优化。

（2）AST 的生成过程是什么？

词法分析：将代码分解为 Token。
语法分析：将 Token 组合成 AST。

（3）AST 在前端开发中的应用场景有哪些？

代码编译和转译（如 Babel）。
代码格式化（如 Prettier）。
代码静态分析（如 ESLint）。
代码优化（如 Webpack 的 Tree Shaking）。
代码生成（如模板生成代码）。

（4）如何使用 Babel 操作 AST？

使用 @babel/parser 解析代码生成 AST。
使用 @babel/traverse 遍历和修改 AST。
使用 @babel/generator 将 AST 转换为代码。

总结:
AST 是前端开发中非常重要的工具，广泛应用于代码编译、格式化、静态分析、优化和生成等场景。通过操作 AST，开发者可以实现代码的自动化处理和分析，提升开发效率和代码质量。掌握 AST 的基本概念和操作工具，是前端开发者进阶的必备技能。

前端工程化

在这里插入图片描述

一、什么是前端工程化

前端工程化是指将前端开发过程中的一系列流程和工具进行规范和自动化，从而提高开发效率、减少重复劳动、降低出错率。前端工程化的目标是让前端开发更高效、更优质。

1.1 前端工程化的定义

前端工程化是指在前端开发过程中，将前端开发的流程、工具和规范化，并使用相关技术实现自动化，包括但不限于代码编写、测试、构建、部署等环节，以提高前端开发效率、提高代码质量和可维护性。

1.2 为什么需要前端工程化

前端工程化能够极大地提高开发效率，提高代码质量和可维护性，减少出错率和重复工作。随着前端开发项目越来越复杂，需要开发的功能越来越多，手动进行前端开发将面临越来越大的挑战。

而采用前端工程化的方式，可以极大地减轻前端开发的工作负担，让开发人员更加专注于业务逻辑的开发。
在这里插入图片描述

二、前端工程化的核心概念

前端工程化的核心概念包括模块化、打包构建、自动化部署、自动化测试和持续集成等。

2.1 模块化

模块化是指将一个大的应用程序划分成多个小的模块，每个模块都有自己的功能和特点，可以独立开发、测试和维护。常见的模块化方案有 CommonJS、ES6 模块、AMD 等。

2.2 打包构建

打包构建是指将多个模块组合起来，生成可以在浏览器中运行的代码。打包构建的过程包括代码压缩、文件合并、资源管理等，常见的打包构建工具有 webpack、rollup 等。

2.3 自动化部署

自动化部署是指将打包构建后的代码部署到生产环境或测试环境中的自动化过程。自动化部署可以减少手动部署的错误和工作量，同时也可以缩短部署的时间。常见的自动化部署工具有 Jenkins、Travis CI 等。

2.4 自动化测试

前端工程化的另一个重要概念是自动化测试。自动化测试是指使用自动化工具对代码进行测试，以确保它们在开发过程中不会出现问题，并且在部署到生产环境之前也不会出现问题。

自动化测试可以分为两类：单元测试和端到端测试。单元测试是指测试应用程序中最小的可测试单元，例如一个函数或一个类。端到端测试是指测试应用程序的整个流程，包括用户界面和后端逻辑。

自动化测试的优势在于它可以提高开发效率和代码质量。它可以帮助开发人员在更早的阶段发现问题，并且可以确保代码的正确性，减少代码中的错误和缺陷。

2.5 持续集成

持续集成是指在应用程序开发过程中，将代码的改变频繁地集成到共享代码库中，并且每次集成都会进行自动化构建和自动化测试。这样可以确保代码的稳定性和质量，并且能够更快地检测和修复错误。

持续集成的优势在于它可以提高开发效率、加速代码部署和减少错误。它可以使团队更加协作，提高产品质量，并且可以更快地响应客户的需求。

2.6 前端工程化的主要工具

实现前端工程化需要使用多种工具。以下是一些常见的前端工程化工具：

包管理工具：npm、Yarn、Bower
构建工具：Webpack、Rollup、Parcel、Gulp、Grunt
自动化测试工具：Jest、Mocha、Karma、Cypress、Puppeteer
集成工具：Travis CI、Jenkins、CircleCI、GitLab CI/CD、GitHub Actions

这些工具可以帮助开发人员自动化完成各种任务，如安装和管理依赖项、打包和压缩代码、运行自动化测试和部署代码。

三、前端工程化的应用

前端工程化在现代Web开发中已经成为标配。下面是一些常见的前端工程化方案：

前端模块化：CommonJS、AMD、ES6模块化等
打包构建：Webpack、Rollup等
自动化部署：Jenkins、Travis CI等
自动化测试：Jest、Mocha、Karma等
持续集成：Jenkins、Travis CI等
React项目的打包构建：使用Webpack将多个模块打包成一个文件，并进行优化和压缩，减少页面加载时间和提高性能。
Vue.js项目的自动化部署：使用Travis CI实现自动化测试和部署，自动构建并部署代码到服务器，减少手动操作，提高效率。
Angular项目的自动化测试：使用Jest和Karma进行自动化测试，覆盖率高，能够及时发现代码中的问题，提高代码质量。

四、如何学习前端工程化

1、掌握基本的前端技术

学习前端工程化需要先掌握一些基本的前端技术，如HTML、CSS、JavaScript等，这些技术是前端工程化的基础。

2、学习相关的工具和框架

学习前端工程化需要了解一些相关的工具和框架，如Webpack、Rollup、Jenkins、Travis CI、Jest、Mocha、Karma等，可以通过官方文档、博客、视频教程等途径进行学习。

3、多做实战项目，加深理解

学习前端工程化需要多做实战项目，通过实践加深对前端工程化的理解和掌握。可以从简单的项目入手，逐步提升自己的技能和能力。

五、总结

前端工程化是现代前端开发的标配，通过模块化、打包构建、自动化部署、自动化测试和持续集成等解决方案，可以提高开发效率、代码质量和团队协作效率，降低开发成本。

掌握前端工程化需要先掌握基本的前端技术，然后学习相关的工具和框架，多做实战项目进行实践，才能不断提升。

小结：

前端工程化‌是指在前端开发中引入一系列标准化和自动化的工具和流程，以提高开发效率、代码质量和项目的可维护性。它涵盖了代码组织、开发工具、构建和打包、版本控制、测试等多个方面，通过采用模块化、自动化测试、代码规范等手段，实现前端的“4个现代化”：模块化、组件化、规范化和自动化。前端工程化的核心目标是为了提高前端开发过程的效率和可维护性，确保快速交付高质量的应用程序‌。

‌- 选择合适的构建工具‌：根据项目需求选择合适的构建工具和插件，以确保高效的资源管理和代码优化。

-‌ 模块化‌：将代码分割为小模块，提高代码复用性和可维护性

‌- 自动化测试‌：编写和运行自动化测试，确保代码质量。

-‌ 代码规范‌：采用一致的代码风格和规范，使用Linting工具检查和修复代码，提高代码质量以及团队合作效率。

‌- 持续集成/持续交付（CI/CD）‌：自动化构建和部署，确保快速交付高质量的应用程序。

通过这些方法和工具的应用，前端工程化旨在提升开发效率、提高前端应用质量、降低开发难度和企业成本。狭义上，前端工程化涉及从代码发布到生产环境的整个流程，包括构建、分支管理、自动化测试、部署等。广义上，它还包括从编码开始到发布、运行和维护的整个阶段‌25。

总之，前端工程化是一种综合性的方法，通过标准化和自动化的手段，优化前端开发的流程和工具，从而提高开发效率、代码质量和项目的可维护性，确保快速交付高质量的应用程序‌。

JavaScript 模块化规范：CommonJS、AMD、ES6 Module

在前端开发的历史中，模块化一直是一个核心的问题。随着 JavaScript 应用程序变得越来越复杂，代码的可维护性、复用性和模块化的需求也越来越迫切。

在模块化的演进过程中，涌现了多个模块化标准，例如 CommonJS、AMD 以及现代的 ES6 Module。本篇文章将介绍这些标准的发展历程和各自的特点。

一、为什么需要模块化？

随着前端技术的发展，JavaScript 被用来构建越来越复杂的应用程序。传统的脚本方式逐渐暴露出许多问题：

命名冲突：不同脚本文件中的变量容易出现命名冲突，导致难以调试。
依赖管理复杂：需要手动维护脚本之间的依赖关系，这种方式非常脆弱且容易出错。
代码复用性差：代码没有统一的模块规范，无法实现有效的代码复用。
为了解决这些问题，模块化的概念逐渐被引入到 JavaScript 生态系统中。通过模块化编程，我们可以将代码分割成多个独立的文件，每个文件负责处理特定的功能或逻辑，从而提高了代码的可维护性、复用性和协作效率。

模块化的好处：

提高代码可读性：将代码分解为小而专注的模块，可以使得每个部分更容易理解和测试。
促进代码复用：一旦编写好一个模块，就可以在不同项目或项目内的不同地方轻松复用。
增强团队合作：模块化有助于大型团队成员之间的分工合作，每个人可以专注于自己负责的模块。
优化性能：现代构建工具可以根据需要动态加载模块，减少初始加载时间，提升用户体验。

二、早期的模块化标准

在 JavaScript 原生支持模块化之前，社区和开发者们提出了多种模块化规范。最具代表性的两种是 CommonJS 和 AMD。

2.1 CommonJS 规范

2.1.1 CommonJS 简介

CommonJS 是 Node.js 采用的模块化规范，主要用于服务端的 JavaScript 环境。
CommonJS 通过 require() 函数同步加载依赖模块，并使用 module.exports 导出模块成员。

2.1.2 CommonJS 的特性

同步加载：模块在代码运行时同步加载，适用于服务端，但不适用于浏览器环境，因为浏览器环境中同步加载会阻塞渲染进程。
缓存机制：同一个模块在多次加载时会被缓存，除非明确清除缓存。
简单易用：通过 require 和 module.exports 实现模块的导入和导出，简单直观。

2.1.3 CommonJS 的使用示例

// math.js
const add = (a, b) => a + b;
const subtract = (a, b) => a - b;module.exports = {add,subtract
};// main.js
const math = require('./math.js');
console.log(math.add(1, 2)); // 输出: 3
console.log(math.subtract(5, 3)); // 输出: 2

2.1.4 CommonJS 可能出现的问题

尽管 CommonJS 在服务端开发中被广泛使用，但在前端环境或大型项目中，它也存在一些潜在的问题和局限性：

同步加载的限制：CommonJS 模块是同步加载的，这意味着在模块加载完成之前，代码的执行会被阻塞。在服务端环境中（例如 Node.js），这种行为是可行的，因为文件系统读取速度相对较快。然而，在前端浏览器环境中，网络延迟可能导致较长的加载时间，进而阻塞页面渲染并降低用户体验。
循环依赖问题：CommonJS 规范中，模块被加载时执行（运行时加载），如果两个模块互相引用（循环依赖），这可能会导致未定义的行为或部分代码无法执行。虽然大多数情况下，Node.js 可以处理这种情况，但会引起意料之外的结果，尤其是当模块依赖链较复杂时。
缺乏静态分析能力：由于 CommonJS 使用动态 require() 语句来引入模块，这使得工具很难在编译时进行静态分析。这种动态依赖关系的管理方式，使得打包工具（如 Webpack、Rollup）难以进行代码优化（如 Tree Shaking），从而影响性能和代码体积。

跨平台兼容性：CommonJS 规范设计之初是为了满足服务端 JavaScript（Node.js）环境的需求，它不适合直接在浏览器环境中使用。虽然可以通过 Browserify 等工具将 CommonJS 模块转换为浏览器可用的格式，但这增加了开发和构建的复杂性。

  尽管 CommonJS 规范在 Node.js 服务端开发中取得了巨大成功，但在前端开发和大型项目中，它也暴露了自身的一些局限性。现代 JavaScript 开发逐渐转向 ES6 Module 标准，这一标准通过静态分析、异步加载和浏览器原生支持，解决了 CommonJS 规范中的许多问题，为开发者提供了更强大和灵活的模块化支持。

2.2. AMD 规范

2.2.1 AMD 简介

AMD（Asynchronous Module Definition，异步模块定义）是一个在浏览器环境中使用的模块化规范。它解决了 CommonJS 在浏览器中同步加载的问题，使用异步加载方式来加载模块。

2.2.2 AMD 的特性

异步加载：通过异步方式加载模块，适合在浏览器环境下使用，避免了浏览器渲染的阻塞问题。
依赖前置：在定义模块时需要声明所有的依赖模块，这些模块会在代码运行前加载完成。
较复杂的定义方式：需要使用 define() 函数来定义模块，并声明依赖。

2.2.3 AMD 的使用示例

// math.js
define([], function() {const add = (a, b) => a + b;const subtract = (a, b) => a - b;return {add,subtract};
});// main.js
require(['./math'], function(math) {console.log(math.add(1, 2)); // 输出: 3console.log(math.subtract(5, 3)); // 输出: 2
});

2.2.4 AMD 可能存在的问题

虽然 AMD 规范在解决浏览器环境中模块异步加载方面有显著的优势，但它也存在一些潜在的问题和局限性：

模块定义复杂性增加：AMD 使用 define() 函数来定义模块，并且需要提前声明所有的依赖模块。这种显式声明的方式虽然在一定程度上清晰明了，但在大型项目中会显得繁琐复杂，特别是当依赖关系较多时，代码的可读性和维护性会下降。
加载速度较慢：尽管 AMD 通过异步方式加载模块来避免阻塞浏览器渲染进程，但由于模块依赖的前置加载特性，所有依赖模块需要在主模块执行之前全部加载完毕。这在依赖关系复杂或者网络较差的情况下，可能导致模块加载速度变慢，影响页面性能。
过度依赖回调函数：AMD 模块化规范依赖于回调函数，这会导致代码结构的嵌套层级增加，出现俗称的“回调地狱”现象，使得代码的调试和维护变得更加困难。

生态系统和工具支持限制：相比于 ES6 Module 等更现代的模块化标准，AMD 的生态系统支持较为有限。虽然 RequireJS 等工具对 AMD 提供了良好的支持，但相比于现代工具链（如 Webpack、Rollup 等）对于 ES6 Module 的优化和支持，AMD 的兼容性和性能优化相对较弱。

  AMD 规范通过异步加载的方式有效解决了 CommonJS 在浏览器环境下的性能问题，适合用于浏览器端的模块化开发。然而，其复杂的模块定义方式和对回调的过度依赖，使其在大型项目和现代开发中逐渐失去优势。随着 ES6 Module 的崛起，开发者们越来越倾向于选择更简单、性能更优的模块化解决方案。

三、现代模块化标准的出现：ES6 Module

3.1 ES6 Module 简介

ES6 Module（ESM）是由 ECMAScript 官方在 ES6（ECMAScript 2015）中引入的模块化规范。它是 JavaScript 语言级别的模块系统，支持静态分析，能够在编译时确定模块的依赖关系。

相较于 CommonJS 和 AMD，ESM 具有更灵活和更高效的模块管理能力。

3.2 ES6 Module 的特性

静态依赖分析：
ES6 Module 在编译时就可以确定模块的依赖关系，从而实现静态分析和树摇（Tree Shaking）优化。这意味着模块中没有被使用的代码可以在打包阶段被移除，从而减小最终的文件大小。
严格模式（Strict Mode）：
ES6 Module 自动采用 JavaScript 严格模式。这意味着模块中不能使用某些不安全的语法（如 with 语句），提高了代码的安全性和性能。
独立的模块作用域：
每个模块都有独立的作用域，模块内部的变量、函数不会污染全局作用域，避免了变量命名冲突问题。
导入和导出语句（Import 和 Export）：
ES6 Module 使用 import 和 export 关键字来导入和导出模块成员。导出可以是命名导出（Named Export）或默认导出（Default Export）。
异步加载支持：
ES6 Module 可以异步加载模块，避免了阻塞浏览器的渲染进程，从而提升了页面加载性能。
浏览器原生支持：
现代浏览器原生支持 ES6 Module，无需额外的加载器（如 RequireJS）或打包工具（如 Webpack）即可直接使用。

3.3 ES6 Module 的使用方法

ES6 Module 主要通过 export 和 import 语法来管理模块。

3.3.1 导出模块（Export）

ES6 Module 提供了两种导出方式：命名导出和默认导出。

命名导出（Named Export）：允许导出多个成员，导出时需要使用 {} 包裹。

// module-a.js
export const data = "moduleA data";export function methodA() {console.log("This is methodA");
}export class MyClass {constructor() {console.log("This is MyClass");}
}

默认导出（Default Export）：每个模块只能有一个默认导出，使用 export default 关键字。
```
// module-b.js
export default function () {console.log("This is the default exported function");
}
```

3.3.2 导入模块（Import）

导入命名导出：需要使用花括号 {} 指定导入的成员。

// main.js
import { data, methodA, MyClass } from "./module-a.js";console.log(data); // 输出：moduleA data
methodA(); // 输出：This is methodA
const instance = new MyClass(); // 输出：This is MyClass

导入默认导出：直接指定导入的变量名称。

// main.js
import defaultFunction from "./module-b.js";defaultFunction(); // 输出：This is the default exported function

同时导入命名导出和默认导出：

// main.js
import defaultFunction, { data, methodA } from "./module-b.js";defaultFunction();
console.log(data);
methodA();

3.3.3 动态导入（Dynamic Import）

ES6 Module 还支持动态导入模块，这种导入方式适用于需要按需加载的场景。动态导入返回一个 Promise 对象。

// main.js
import("./module-a.js").then((module) => {module.methodA(); // 输出：This is methodA
});

3.4 ES6 Module 与其他模块规范的比较

ES6 Module 相较于 CommonJS 和 AMD 有显著的优势：

加载方式：
CommonJS 使用同步加载，这在服务器端是可行的，但在浏览器中会导致阻塞。而 ES6 Module 支持异步加载，不会阻塞浏览器的渲染进程。
模块依赖分析：
CommonJS 模块的依赖关系在运行时解析，这可能导致加载时的性能开销。ES6 Module 在编译阶段就能确定依赖关系，优化了加载效率和性能。
代码优化：
由于 ES6 Module 支持静态分析工具，构建工具能够对代码进行更有效的优化（如 Tree Shaking），减少最终产物的大小。
兼容性：
ES6 Module 是现代浏览器和 Node.js 官方推荐和支持的模块化标准，未来的兼容性和更新都更有保障。

3.5 ES6 Module 的局限性

虽然 ES6 Module 在现代开发中具有广泛应用，但它也有一些局限性：

浏览器兼容性：早期版本的浏览器不支持 ES6 Module，不过随着浏览器的更新，这个问题正逐渐消失。
服务端使用限制：在服务端（如 Node.js）环境中，使用 ES6 Module 可能需要一些配置和额外的工具支持（如 Babel、Webpack）。
性能影响：在非常大量模块导入的场景下，可能会有性能瓶颈。

四、总结
JavaScript 的模块化演进经历了从无到有、从简单到复杂的过程。随着前端应用的复杂性和需求的增加，模块化的重要性愈发凸显。CommonJS、AMD 和 ES6 Module 各有其应用场景和特点。

CommonJS：适用于 Node.js 服务端开发，使用同步加载机制。
AMD：适用于浏览器环境，使用异步加载机制，解决了前端模块依赖问题。
ES6 Module：现代浏览器和 JavaScript 语言级别的模块化标准，支持静态分析、异步加载和 Tree Shaking，是当前前端开发的主流选择。

未来的 JavaScript 开发中，ES6 Module 将继续发挥重要作用，为开发者提供更强大和灵活的模块化支持。

ES6，ES7，ES7，ES8，ES9，ES10新特性

ES6（2015)

1. let 和 count

let 和 const 声明变量与传统的 var 不同，let 和 const 声明的变量具有块级作用域，不会变量提升，而且不能被重复声明。const 声明的变量是常量，不能被重新赋值。

```
let name = '小豪'；
const arr = [];
```

2. 箭头函数

一种更简洁的函数定义方法，使用箭头符号来代替 function 关键字，可以省略大括号和 return 关键字，箭头函数会继承父作用域的 this 值。

```
const func = (a, b) => a + b;
func(1, 2); // 3
```

3. 模板字符串

模板字符串是一种新的字符串定义方法，使用反引号（`）来表示字符串，可以在字符串中插入变量或表达式，使用 ${} 包裹。

```
// 模块 A 导出一个方法
export const sub = (a, b) => a + b;
// 模块 B 导入使用
import { sub } from './A';
console.log(sub(1, 2)); // 3
```

4. 默认参数值

ES6 允许在函数的参数列表中设置默认参数值，当调用函数时不传递参数时，会自动使用默认值。

```
function foo(age = 25,){ // ...}
```

5. 数组解构赋值

一种快速取出数组元素并赋值给变量的方法，可以极大地简化代码。

```
let a = 1, b= 2;
[a, b] = [b, a]; // a 2  b 1
```

6. 对象解构赋值

与数组解构赋值类似，可以快速取出对象属性值并赋值给变量。

```
let {a,b} = {a:10,b:20}
console.log(a,b) // 10,20
```

7. 类和继承

ES6 提供了 class 关键字来定义类和继承关系，使得 JavaScript 更加面向对象。

```
class Man {constructor(name) {this.name = '小豪';}console() {console.log(this.name);}
}
const man = new Man('小豪');
man.console(); // 小豪
```

8. Promise 对象

Promise 对象用来处理异步操作，可以更方便地处理异步代码，避免回调地狱。

```
Promise.resolve().then(() => { console.log(2); });
console.log(1);
// 先打印 1 ，再打印 2
```

9. 模块化

ES6 引入了模块化的概念，使用 import 和 export 关键字来导入和导出模块，使得代码更加模块化和易于管理。

```
// 模块 A 导出一个方法
export const sub = (a, b) => a + b;
// 模块 B 导入使用
import { sub } from './A';
console.log(sub(1, 2)); // 3
```

10. 扩展运算符

```
let a = [...'hello world']; // ["h", "e", "l", "l", "o", " ", "w", "o", "r", "l", "d"]
```

ES7（2016）

1. Array.prototype.includes 方法

ES7 引入了 Array.prototype.includes 方法，用于判断一个数组是否包含某个特定的值，返回布尔值。这个方法取代了数组的 indexOf 方法，使代码更加清晰和易读。

```
// 使用 includes 方法判断数组是否包含某个值
const array = [1, 2, 3, 4, 5];
console.log(array.includes(3)); // true
console.log(array.includes(10)); // false
```

2. 指数运算符

ES7 引入了指数运算符（**）来进行幂运算，语法更加简洁，避免了使用 Math.pow 方法。

```
// 使用指数运算符进行幂运算
const result = 2 ** 3; // 2的3次方，结果为8
console.log(result);
```

3. 函数参数的尾逗号

ES7 允许函数定义的最后一个参数使用逗号进行结尾，这样可以方便在修改或添加参数时避免出错，提高代码的可维护性。

```
// 函数定义中使用尾逗号
function sum(a, b,) {return a + b;
}
console.log(sum(2, 3)); // 5
```

4. Object.values 和 Object.entries

ES7 引入了 Object.values 和 Object.entries 方法，分别用于获取对象的属性值数组和键值对数组，方便遍历对象的属性。

```
// 使用 Object.values 获取对象的属性值数组
const obj = { a: 1, b: 2, c: 3 };
console.log(Object.values(obj)); // [1, 2, 3]// 使用 Object.entries 获取对象的键值对数组
console.log(Object.entries(obj)); // [["a", 1], ["b", 2], ["c", 3]]
```

5. async/await

虽然 async/await 是 ES8 的特性，但它在 ES7 中就已经被加入了标准。async/await 是一种更直观、更简洁的异步编程方式，让异步代码看起来像同步代码一样易于理解。

```
// 使用 async/await 处理异步操作
function delay(ms) {return new Promise(resolve => setTimeout(resolve, ms));
}async function asyncFunction() {console.log('Start');await delay(1000);console.log('After 1 second');
}asyncFunction();
```

ES8（2017）

1. 字符串填充方法（String padding）

ES8 新增了字符串的 padStart 和 padEnd 方法，用于在字符串的开头或结尾添加指定数量的字符，方便对齐文本格式。

```
// 字符串填充方法
let str = 'hello';
console.log(str.padStart(10, 'a')); // "aaaaahello"
console.log(str.padEnd(10, 'b')); // "hellobbbbb"
```

2. Object.entries()方法

虽然 Object.values 和 Object.entries 方法在 ES7 中已经被引入，但在 ES8 中对其进行了稳定化处理，使其能够在各种 JavaScript 环境中被广泛使用。

```
// Object.entries()方法
const obj = { a: 1, b: 2, c: 3 };
console.log(Object.entries(obj)); // [["a", 1], ["b", 2], ["c", 3]]
```

3. Object.values()方法

```
// Object.values()方法
const obj = { a: 1, b: 2, c: 3 };
console.log(Object.values(obj)); // [1, 2, 3]
```

4. Async 函数

ES8 对 async 函数进行了一些改进，允许 async 函数直接返回值，而不必通过 Promise.resolve 包裹。

```
// Async 函数
async function fetchData() {const response = await fetch('https://api.example.com/data');const data = await response.json();return data;
}fetchData().then(data => {console.log(data);
});
```

5. SharedArrayBuffer和Atomics对象（用于多线程编程）

ES8 增加了对 SharedArrayBuffer 和 Atomics 对象的支持，用于在多线程编程中共享内存并执行原子操作。

SharedArrayBuffer 对象用来表示一个通用的，固定长度的原始二进制数据缓冲区，Atomics 对象提供了一组静态方法用来对 SharedArrayBuffer 对象进行原子操作。```
// SharedArrayBuffer和Atomics对象
const buffer = new SharedArrayBuffer(16);
const view = new Int32Array(buffer);Atomics.store(view, 0, 42);
console.log(Atomics.load(view, 0)); // 42
```

ES9（2018）

1. 异步迭代

await可以和for…of循环一起使用，以串行的方式运行异步操作

```
async function process(array) {for await (let i of array) {// doSomething(i);}
}
```

2. Promise.finally()

Promise对象现在具有一个finally()方法，无论Promise实例是成功还是失败，都会在最后执行该方法。

```
const promise = new Promise((resolve, reject) => {setTimeout(() => {resolve('Success!');}, 1000);
});promise.finally(() => {console.log('Promise complete');
});
```

3. Rest/Spread 属性

ES9允许在对象字面量中使用Rest和Spread属性。

```
const { a, b, ...rest } = { a: 1, b: 2, c: 3, d: 4 };
console.log(a); // 1
console.log(b); // 2
console.log(rest); // { c: 3, d: 4 }const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3, d: 4 };
console.log(obj2); // { a: 1, b: 2, c: 3, d: 4 }
```

4. 正则表达式命名捕获组

```
constreDate = /(?<year>[0-9]{4})-(?<month>[0-9]{2})-(?<day>[0-9]{2})/,match  = reDate.exec('2018-04-30'),year   = match.groups.year,  // 2018month  = match.groups.month, // 04day    = match.groups.day;   // 30constreDate = /(?<year>[0-9]{4})-(?<month>[0-9]{2})-(?<day>[0-9]{2})/,d      = '2018-04-30',usDate = d.replace(reDate, '$<month>-$<day>-$<year>');
```

ES 10 (2019)

1. Array.flat()

Array.flat()方法用于将多维数组（嵌套数组）扁平化为一维数组。

```
const nestedArray = [1, [2, [3, 4], 5]];
const flattenedArray = nestedArray.flat();
console.log(flattenedArray); // [1, 2, [3, 4], 5]// 可以通过传入参数指定扁平化的层级
const deeplyNestedArray = [1, [2, [3, [4, 5]]]];
const deeplyFlattenedArray = deeplyNestedArray.flat(2);
console.log(deeplyFlattenedArray); // [1, 2, 3, 4, 5]
```

2. String.trimStart() 和 String.trimEnd()

String.trimStart()和String.trimEnd()方法，用于删除字符串开头和结尾的空格。

```
const text = '   Hello, World!   ';
console.log(text.trimStart()); // 'Hello, World!   '
console.log(text.trimEnd()); // '   Hello, World!'
```

3. Object.fromEntries()

Object.fromEntries()方法用于将一个包含键值对的数组转换为一个对象

```
const entries = [['a', 1], ['b', 2], ['c', 3]];
const obj = Object.fromEntries(entries);
console.log(obj); // { a: 1, b: 2, c: 3 }
```

4. Optional Catch Binding

ES10允许在try/catch块中省略catch绑定参数，以避免未使用的参数警告

```
try {// Some code that may throw an error
} catch {// Handle the error without specifying the error parameter
}
```

5. Array.flatMap()

对数组中的每个元素应用给定的回调函数，然后将结果展开一级，返回一个新数组。

```
[1, 2, 3, 4].flatMap(a => [a**2]); // [1, 4, 9, 16]
```