作用：打包之前清除output的文件夹，避免存在之前的打包结果；

var path = require("path");
var { CleanWebpackPlugin } = require("clean-webpack-plugin");

module.exports = {
  //...
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: "main[contenthash: 5].js"
  },
  plugin: [
    new CleanWebpackPlugin()
  ]
}

Html-webpack-plugin

作用：自动生成html文件

var path = require("path");
var { CleanWebpackPlugin } = require("clean-webpack-plugin");
var HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = function(env){
    return {
        output: {
            path: path.resolve(__dirname, 'dist'),
            filename: 'main[contenthash:5].js'
        },
        plugins: [
            new HtmlWebpackPlugin({
                template: './public/index.html',
                title: 'my app',
                scriptLoading: 'blocking',
                // chunks: 入口配置的key
                filename: 'home.html'
            })
        ]
    }
}

Copy-webpack-plugin

复制静态资源，通常处理assets里的图片、pdf等资源的迁移

var path = require("path");
var CopyWebpackPlugin = require("copy-webpack-plugin");

module.exports = function(env){
    return {
        output: {
            path: path.resolve(__dirname, 'dist'),
            filename: 'main[contenthash:5].js'
        },
        plugins: [
            new CopyWebpackPlugin({
                patterns: [
                    { from: './public', to: './' }
                ]
            })
        ]
    }
}

开发服务器

在开发阶段，目前遇到的问题是打包、运行、调试过程过于繁琐，回顾一下我们的操作流程：

1. 编写代码

2. 控制台运行命令完成打包

3. 打开页面查看效果

4. 继续编写代码，回到步骤2

并且，我们往往希望把最终生成的代码和页面部署到服务器上，来模拟真实环境

为了解决这些问题，webpack官方制作了一个单独的库：webpack-dev-server

它既不是plugin也不是loader

先来看看它怎么用

1. 安装

2. 执行webpack-dev-server命令

webpack-dev-server命令几乎支持所有的webpack命令参数，如--config、-env等等，你可以把它当作webpack命令使用

这个命令是专门为开发阶段服务的，真正部署的时候还是得使用webpack命令

当我们执行webpack-dev-server命令后，它做了以下操作：

1. 内部执行webpack命令，传递命令参数

2. 开启watch

3. 注册hooks：类似于plugin，webpack-dev-server会向webpack中注册一些钩子函数，主要功能如下：

   1. 将资源列表（aseets）保存起来

   2. 禁止webpack输出文件

4. 用express开启一个服务器，监听某个端口，当请求到达后，根据请求的路径，给予相应的资源内容

配置

针对webpack-dev-server的配置，参考：https://www.webpackjs.com/configuration/dev-server/

常见配置有：

• port：配置监听端口

• proxy：配置代理，常用于跨域访问

• stats：配置控制台输出内容

普通文件处理

file-loader: 生成依赖的文件到输出目录，然后将模块文件设置为：导出一个路径\

//file-loader
function loader(source){
    // source：文件内容（图片内容 buffer）
    // 1. 生成一个具有相同文件内容的文件到输出目录
    // 2. 返回一段代码   export default "文件名"
}

url-loader：将依赖的文件转换为：导出一个base64格式的字符串

//url-loader
function loader(source){
    // source：文件内容（图片内容 buffer）
    // 1. 根据buffer生成一个base64编码
    // 2. 返回一段代码   export default "base64编码"
}

解决路径问题

在使用file-loader或url-loader时，可能会遇到一个非常有趣的问题

比如，通过webpack打包的目录结构如下：

dist
    |—— img
        |—— a.png  #file-loader生成的文件
    |—— scripts
        |—— main.js  #export default "img/a.png"
    |—— html
        |—— index.html #<script src="../scripts/main.js" ></script>

这种问题发生的根本原因：模块中的路径来自于某个loader或plugin，当产生路径时，loader或plugin只有相对于dist目录的路径，并不知道该路径将在哪个资源中使用，从而无法确定最终正确的路径

面对这种情况，需要依靠webpack的配置publicPath解决

注意⚠️：

• publicPath配置，会生成一个简单的字符串，有些loader或者插件会使用这个字符串（例如：在生成路径的时候将这个字符串放到路径的最前面），一般会把这个配置位'/'

• 有些loader或者插件自己也会带有一个publicPath，用来做单独的配置；

内置插件

所有的webpack内置插件都作为webpack的静态属性存在的，使用下面的方式即可创建一个插件对象

const webpack = require("webpack")

new webpack.插件名(options)

DefinePlugin

全局常量定义插件，使用该插件通常定义一些常量值，例如：

new webpack.DefinePlugin({
    PI: `Math.PI`, // PI = Math.PI
    VERSION: `"1.0.0"`, // VERSION = "1.0.0"
    DOMAIN: JSON.stringify("duyi.com")
})

这样一来，在源码中，我们可以直接使用插件中提供的常量，当webpack编译完成后，会自动替换为常量的值

BannerPlugin

它可以为每个chunk生成的文件头部添加一行注释，一般用于添加作者、公司、版权等信息

new webpack.BannerPlugin({
  banner: `
  hash:[hash]
  chunkhash:[chunkhash]
  name:[name]
  author:yuanjin
  corporation:duyi
  `
})

ProvidePlugin

自动加载模块，而不必到处 import 或 require

new webpack.ProvidePlugin({
  $: 'jquery',
  _: 'lodash'
})

然后在我们任意源码中：

$('#item'); // <= 起作用
_.drop([1, 2, 3], 2); // <= 起作用

reference: 引用

场景：希望直接使用dom元素中的某个方法，或者希望直接使用自定义组件中的某个方法

• ref作用于内置的html组件，得到的将是真实的dom对象

• ref作用于类组件，得到的将是类的实例

• ref不能作用于函数组件

ref不再推荐使用字符串赋值，字符串赋值的方式将来可能会被移出

目前，ref推荐使用对象或者是函数

对象

通过 React.createRef 函数创建

constructor(props) {
  super(props);
  this.txt = React.createRef();
  // 或者 this.txt = {
    current: null
  }
}

render() {
  return (
    <input ref={this.txt} />
  )
}

// 在完成渲染时给current赋值

函数

constructor(props) {
  super(props);
  this.txt = null;
}

render() {
  return (
    <input ref={el => this.txt = el } />
  )
}

// 在完成渲染时给current赋值

函数的调用时间：

1. componentDidMount的时候会调用该函数

   1. 在componentDidMount事件中可以使用ref

2. 如果ref的值发生了变动（旧的函数被新的函数替代），分别调用旧的函数以及新的函数，时间点出现在componentDidUpdate之前

   1. 旧的函数被调用时，传递null

   2. 新的函数被调用时，传递对象

3. 如果ref所在的组件被卸载，会调用函数

谨慎使用ref

能够使用属性和状态进行控制，就不要使用ref。

1. 调用真实的DOM对象中的方法

2. 某个时候需要调用类组件的方法

ref转发

forwardRef注意：就是一个高阶函数，只能传递函数组件。

先来比较一段代码；

• js代码

function sayName(name) {
    if(Math.random() < 0.5) {
        return 'shao xing'
    }
    return 404
}

let name = sayname(0);

nmae = name.split(" ").filter(it => it).map(item => item[0].touppercase(1)+ item.subStr()).join(" ");

console.log(name);

• ts代码

function sayName(name) {
    if(Math.random() < 0.5) {
        return 'shao xing'
    }
    return 404
}

let name = sayname(0);

nmae = name.split(" ").filter(it => it).map(item => item[0].touppercase(1)+ item.subStr()).join(" ");

console.log(name);

在vscode编辑器中比较这两段代码; 我们在js开发中容易犯的错误

• 使用了不存在的变量、函数或者成员

• 类型错误（一个不确定的类型当成一个确定的类型处理）

• 
  

JS语言的原罪：

• js是弱类型的语言

• js是解释性的语言（代码看一段执行一段，我们的代码必须运行出来才能发现问题）

导致： 我们的开发过程中大多数时间都是在排除错误；（效率很低下）

TYPESCRIPT语言能很好解决上述的问题；

TS的特点以及如何解决我们的问题

• TS是JS的一个超集；一个可选的类型系统（学习曲线很平滑）；

• 浏览器和node环境中无法直接识别TS代码；（tsc -> js）;

在node环境中搭建ts开发环境

• 安装 npm i typescript -g

基本类型检查

基本类型约束

如何进行类型约束
约束变量、函数的参数、函数的返回值
格式：
在变量、函数的参数、函数的返回值加上  : type

function sum (a, b) {
    return a + b;
}

function sum(a: number, b: number): number {
    return a+b;
}

sum(3, 4);

let num: number = sum(3, 4);

sum = 34;

类型检查给我们带来了很多好处；

• 严格的类型检查让上面的第9行代码就会报错；

• 可以通过现有的类型进行类型推导，最大程度地减少代码量。上面的代码可以简化为

function sum(a: number, b: number) {
    return a + b;
}

let num = sum(3, 4);

num = '123';

• 补充：基本类型的约束很容易。如何区分数字和数字字符串；

一般两种情况：在不超过js精度的情况下，如果按照数学的读法，它的类型就是数字，反之是字符串 超过精度，则全是字符串；

基本类型

number 数字
string 字符串
boolean 布尔类型
any[] 等价于 Array<any> 数组   更加倾向于第一个，第二种在react项目中可能存在冲突
object 对象 约束形为{}的变量

null和undefined 这两个类型是以上类型的子类型
    let num: string = undefined;
  num.toUpperCase(); // 会报错
  我们不希望出现这样的情况；一般选择在配置文件中加入 **strictNullChecks: true** 配置项

其他的常用类型

• 联合类型（"|"）

可以配合类型保护进行判断，typeof可以触发简单类型的类型保护

// 类型保护
let str: string | undefined
if(typeof str === 'string') {
      // 代码在这里就能确定str的类型了，代码有提示的
} else {
    // 无提示
}

• void类型--通常用来约束函数的返回类型，表示该函数没有任何的返回

function printMenu(): void {
    console.log(111);
}

• never类型--通常用来约束函数的返回值，表示该函数永远都不会结束

注：这里要查一下文档

function throwError(msg: string): never{
    throw new Error(msg);
  // console.log(111);
}

function doSome() {
    while(true) {
      // do ..
  }
}

• 字面量类型：使用一个值进行约束

注：这里和后面的接口、类型别名做比较

let a: '1' = '1';
let user: {name: string, age: number} = {name: 'tom', age: 18}

• 元祖类型(tuple)：一个固定的长度的数组，并且数组中每一项的类型是确定的；

let tu: [string, number] = ['1', 1]

• any类型

类型别名

let u: {
    name: string,
  age: number,
  gender: '男' | '女'
}

function getUsers(): {
    name: string,
  age: number,
  gender: '男'|'女'
}[] {
    return [{
      name: 'tome',
    age: 18,
    gender: '男'
  }]
}

getUsers();

// 上述代码中对变量的约束存在很多冗余， 我们可以把一些重复的类型提取出来，减少代码量

函数的相关约束

• 重点讨论函数重载

function combine(a: number, b: number): number
function combine(a: string, b: string): string
function combine(a: number|string, b: number|string): number|string{
    if(typeof a === 'string' && typeof b === 'string') {
      return a + b
  } else if(typeof a === 'number' && typeof b === 'number') {
      return a * b
  }
  throw Error('传入的参数类型必须相同')
}

let num = combine(1, 2);
let num2 = combine('1', '2');

• 可选参数

function sum(a: number, b: number, c?: number){
    if(c) {
        return a + b + c
    } else {
        return a + b
    }
}
sum(1, 2);

• 默认参数（默认就是可选的参数）

扩展类型（类型别名、枚举、接口、类）

枚举

通常用于约束某个变量的取值范围（可以穷举出来的） 字面量+联合类型也是可以达到约束变量的取值范围的目的；

• 字面量类型的不足

  • 字面量类型会重复使用，造成代码重复，可以使用类型别名解决

let gender: '男'|'女';
function searchByGender(g: '男' | '女') {
    // do some
}
// 这里的字面量类型会重复使用，我们来使用类型别名改造一下
type Gender = '男'|'女'
let gender: Gender = "男";
function searchByGender(g: Gender) {
    // do some
}

• 逻辑含义和真实值产生混淆，当修改真实的值的时候，会造成大量的修改

上述代码中的男和女是真实的值，我们使用真实的值做逻辑判断，会存在很多问题
男|女  雄雌  帅哥|美女  male|female  gentleman|lady  小姐姐|小哥哥

• 字面量类型不会进入到编译的结果中

枚举的使用

enum Gender {
    male = '男',
    female = '女'
}
let gender: Gender = Gender.male;

function searchByGender(g: Gender) {
    // do some
}
searchByGender(Gender.male);

• 枚举的规则

  • 枚举的字段值可以是字符串或者数字

  • 数字枚举的值会自动自增

  • 被数字枚举约束的变量，可以直接赋值为数字

• 最佳实践

  • 不要在枚举中既出现字符串又出现数字

  • 不要直接使用真实的值

接口

TS的接口：用于约束类、对象、函数的契约（标准）； 接口不出现在编译结果中；

思考：接口和类型别名的差异和区别；

• 简单示例

interface Person {
    name: string;
    age: number;
}

let tom: Person = {
    name: 'Tom',
    age: 25,
    gender: 'male'
};

// index.ts(9,5): error TS2322: Type '{ name: string; age: number; gender: string; }' is not assignable to type 'Person'.
//   Object literal may only specify known properties, and 'gender' does not exist in type 'Person'.

严格限制，多一些参数、少一些参数都不被允许。可选用？

• 任意属性

有时候我们希望一个接口允许有任意的属性，可以使用如下方式：

interface Person {
    name: string;
    age?: number;
    [propName: string]: any;
}

let tom: Person = {
    name: 'Tom',
    gender: 'male'
};

使用 [propName: string] 定义了任意属性取 string 类型的值。 需要注意的是，一旦定义了任意属性，那么确定属性和可选属性的类型都必须是它的类型的子集：

• 只读属性

interface Person {
    readonly id: number;
    name: string;
    age?: number;
    [propName: string]: any;
}

在TS中使用模块化

在前端领域中的模块化标准：ES6、common.js、amd、umd、system、esnext；

ts中如何书写模块化标准？

统一使用ES6的模块化标准

• 最好不要使用默认导出

• 导入时不要加.ts的后缀名

编译结果中的模块化（可配置的）

泛型（附属在函数、类、接口、类型别名之上的类型）

函数在定义时需要固定一些类型，但是具体的类型需要在调用时才能明确；

• 在函数的中的应用

解决函数中多个位置的类型保持一致或者有关联的信息丢失的问题

function take(arr: string | any[], n: number): any[] {
  if(n >= arr.length) {
    return arr;
  }
  const newArr: any[] = [];
  for (let i = 0; i < n; i++) {
    newArr.push(arr[i])
  }
  return newArr
}

console.log(take([12,1,2,13,1,21,33,1], 2))

上面这个代码，想截取固定长度的数组返回；由于不同的情况，我们不得不限制三处的any[]，但其实这三处是一个类型，我们会丢失这个信息；为解决这个问题，我们引入泛型的概念；

function take<T>(arr: T[], n: number): T[] {
  if(n >= arr.length) {
    return arr;
  }
  const newArr: T[] = [];
  // eslint-disable-next-line no-plusplus
  for (let i = 0; i < n; i++) {
    newArr.push(arr[i])
  }
  return newArr
}

const newArr = take<number>([12,1,2,13,1,21,33,1], 2);
==>智能推导 const newArr = take([12,1,2,13,1,21,33,1], 2);

在JS发展过程中，表现出强大的活力，但是语言也存在一些问题。为了满足前端领域的新的需求，2015年官方出来的ECMAScript新版本--ES6，又称作ES2015，且从ES2015开始，官方不再使用数字作为版本编号，而采用年份。2015年之后，几乎每年都有更新版本，有些改动比较小，有些改动比较激进；所以我们重点讨论ES2015版本；

重要的变化

块级绑定

ES6新增let、const命名方式

• let和const申明的变量只在它所在的代码块中有效；

• 不存在变量声明提升；

• 不允许重复声明；

Es6中的函数改动

• 默认参数（在函数定义时形参中指定默认值）

• 剩余参数

• 展开运算符

• 函数的双重作用（普通函数和构造函数）

Es6中定义一个API可以在函数内部判断是否使用new来调用了该函数         new.target **        **这个表达式得到的是如果没有使用new来调用函数，则返回undefined         如果使用了，则返回new关键字后面的函数

函数的双重作用
function Proson(firstName, lastName) {
    // es6之前判断是否使用new；这个方式并不完美，可能会被绕开
    if(this instanceof Person){
        Throw new Error(“该函数必须使用new来调用")
    }
    // es6的方式
    if(new.target === undefined) {
        Throw new Error(“该函数必须使用new来调用")
    }
    this.firstName = firstName;
    this.lastName = lastName;
    this.fullName = `${firstName} ${lastName}`
}

const p1 = new Person(‘张’, ’三’);
Const p2 = Person(’张’, ’三’);
const p3 = Person.call(p1,’张’, ’三’);

• 箭头函数

  回顾 this指向的情况 普通函数

1. 通过对象调用函数，this指向对象；

2. 直接调用函数，this指向全局对象；

3. 通过new关键字调用，this指向新创建的对象；

4. 通过call、apply和bind调用函数，this指向制定的对象；

5. 事件函数中，this指向事件源对象；

箭头函数

const sdsd = function (df) {                           
    return df * 2;                  ====>         const sdsd = (df) => df * 2;
}

箭头函数的this取决于声明函数（书写位置）时的this；与调用的方式无关；

细节： 箭头函数中不存在this、arguments、new.target，如果使用了这些则使用的是函数外层的this、arguments、new.target；        没有原型，所以对内存占用小，比较经济； 箭头函数不能作为构造函数;

使用场景： 临时使用的函数，并不会刻意的使用它，比如： 事件处理函数；异步处理函数；其他临时性函数；为了绑定外层this的函数；在不影响其他代码的情况下，保持代码的整洁；

对象的变化

• 成员速写

key和value(变量）一样时可以简写

• 方法速写

方法省略冒号和function

• 计算属性名

在ES6之前对象的key不能用变量表示，在ES6中可以使用［变量］来表示key。

const props1 = 'name';
const props2 = 'age';
const props3 = 'sayHello';
const nationality = '中国';
const user = {
  nationality,
    [props1]: '张三',
  [props2]: 20,
  [props3]() {
      console.log(this[props1] + this[props2]);
  }
}

• 新增的API

  • Object is

判断两个对象是否相等。和**===**的用法大体一致，除了两种情况：    NaN===NaN  false    Object.is(NaN,NaN)   true    －0 ===0      true   Object.is(0, -0)   false

• Object.assign

可以传递多个参数，会将第一个参数之后的参数混合到第一个参数中并返回第一个参数，这个方法会改变第一个参数，所以目前使用的情况不多，可以被ES7中的展开运算符所取代。

• Object.getOwnPropertyNames（不常用）

• Object.setPrototypeOf（不常用）

解构

• 对象的解构

let user = {
    name: 'tom',
    age: 18,
    address: {
        province: '湖南',
        city: '常德'
    }
}

let {name, age, address: {province, city, add=123}} = user;
let {name, ...other} = user;

console.log(name); // 'tom'
console.log(age); // 18
concole.log(other); // {age: 18, address: { province: '湖南', city: '常德'}}
console.log(province); // '湖南'  这里是深层次的解构方式
console.log(address); // undefined 这里并不会定义address变量，而是进一步解构
console.log(add); // 123   这里是解构默认值的写法

非同名属性解构：

let {name, age: nianji = 12 , address: {province, city, address=123}} = user;
// 这里会先定义‘nianji’变量，然后user中读取同名户型赋值（其中'nianji'读取age属性）
数组的解构

• 数组的解构

let arr1 = [1,2,3,4,5,6, [10, 11, 12], {a:20, b: 21, c: 22}];
const {0: n1, 3: n3} = arr1;
n1 // 1
n3: // 4
const [n1, n2] = arr1;
n1 // 1,
n2 // 2
const [n1, , n3] = arr1;
n1 // 1,
n3 // 3
const [n1, ...n2] = arr1;
n2 // [2,3,4,5,6]
const [,,,,,, [,b1, c1], {a, b}] = arr1;

• 参数的解构

function as({name, age}){
    console.log(name, age);// 123, 18
}
as({name: 123, age: 18});

异步解决方案--Promise

ES6总结了各种异步场景，并提取出一种通用的异步模型

当任务处于已决阶段时，它只能是resolved和rejected两种状态中的一种，表示任务有了一个结果。比如：从服务器拿到了数据（resolved）、网络不好的时候没有拿到数据（rejected）

任务开始时，始终是未决阶段，那任务如何才能走到已决阶段呢？ ES6认为，任务在未决阶段的时候，有能力将其推向已决。比如，当从服务器中拿到数据后，我们就从未决阶段推向已决的resolved状态，如果网络不好，导致出错。我们就从未决阶段推向已决的rejected状态； 我们把从未决阶段推向已决的resolved状态的过程，叫做resolve，从未决推向已决的rejected状态的过程，叫做reject

这种状态和阶段的变化是不可逆的，也就是说，一旦推向了已决，就无法重新改变状态 任务从未决到已决时，可能附带一些数据，比如：跑步完成后的用时、网络请求后从服务器拿到的数据

任务已决后（有了结果），可能需要进一步做后续处理，如果任务成功了（resolved），有后续处理，如果任务失败了（rejected），仍然可能有后续处理 我们把针对resolved的后续处理，称之为thenable，针对rejected的后续处理，称之为catchable；

迭代器

• 迭代：将数据从数据结构中按照一定的顺序取出来，不断取出的过程，但是不一定全部取完；

• 遍历：将数据从数据结构中一个个取出来。一定是依次全部取完；

再日常的写代码中，迭代和遍历往往边界模糊，在代码中的表现往往差异不大。但是这是两种思想；

迭代器是一个对象，是对迭代过程的封装，在不同的语言中有不同的表现形式，通常为对象；

迭代模式：一种设计模式，用于统一迭代过程，并规范迭代器的规格：

• 迭代器应该具有的到下一个数据的能力；

• 迭代器应该具有判断是否存在下一个数据的能力；

js中的迭代器

JS规定，如果一个对象具有next方法，并且该方法返回一个对象，该对象的格式如下：

{
    value: 值, done: ‘是否迭代完成’
}

数组的迭代器

const arr = [1,2,3,4,5,6];
function createIterator(arr) {
  let i = 0;
  return {
    next() {
      let result = {
        value: arr[i],
        done: i >= arr.length
      }
      i++;
      return result;
    }
  }
}

例子：

function creactFeiboIterator() {
  let prev1 = 1;
  let prev2 = 1;
  let n = 1;
  return {
    next() {
      let value;
      if (n <= 2) {
          value = 1;
      } else {
          value = prev2 + prev1;
      }
      const result = {
        value,
        done: false,
      };
      prev2 = prev1;
      prev1 = result.value;
      n += 1;
      return result;
    },
  };
}
const feiboIterator = creactFeiboIterator();
console.log(feiboIterator.next());
console.log(feiboIterator.next());
console.log(feiboIterator.next());
console.log(feiboIterator.next());
console.log(feiboIterator.next());

可迭代协议和for of循环

ES规定，如果一个对象具有知名符号属性**[Symbol.iterator]**,并且其属性值是一个迭代器创建函数，则这个对象是可迭代的；

例如数组：

const ddd = [1, 2, 3, 4, 5, 6, 7];
const arrIterator = ddd[Symbol.iterator]();
console.log(arrIterator.next());
console.log(arrIterator.next());
console.log(arrIterator.next());
console.log(arrIterator.next());
console.log(arrIterator.next());
console.log(arrIterator.next());
console.log(arrIterator.next());

dom对象（伪数组）

// <p></p>
// <p></p>
// <p></p>
// <p></p>
const ps = document.querySelectorAll('p');
const pIerator = ps[Symbol.iterator]();
console.log(pIerator.next());
console.log(pIerator.next());
console.log(pIerator.next());
console.log(pIerator.next());

数组的遍历

const ddd = [1, 2, 3, 4, 5, 6, 7];
const arrIterator = ddd[Symbol.iterator]();
let result = arrIterator.next();
while (!result.done) {
    console.log(result.value);
    result = arrIterator.next();
}
// 这里的遍历可以抽象为一个特定的模式：

ES6中提供了一个for of循环来做上面的事情；

// 和上面的代码是完全等价的（语法糖）
for (const item of ddd) {
console.log(item);
}

遍历一个对象

const abc = {
  a: 1,
  b: 2,
  c: 3,
  Symbol.iterator {
    let i = 0;
    const keys = Object.keys(this);
    const values = Object.values(this);
    return {
      next() {
        const result = {
          value: {
            propsName: keys[i],
            propValue: values[i],
          },
          done: i > keys.length,
        };
        i += 1;
        return result;
      },
    };
  },
};

// eslint-disable-next-line no-restricted-syntax
for (const item of abc) {
    console.log(item);
}

补充：

展开运算符与可迭代对象

展开运算符可以用于可迭代对象，这样可以轻松的将可迭代对象转换为数组； 例如：接上面的代码

...
const arr = [...abc];
console.log(arr);

增强的数组功能

• 新增的数组API

静态方法

• Array.of(...arg): 使用制定的数组项创建一个新的数组

• Array.from(arg): 通过给定的类数组 或者可迭代的对象，创建一个新的数组。

实例方法

• find(callback): 用于查找满足条件的第一个元素

• findIndex(callback)：用于查找满足条件的第一个元素的下标

• fill(data)：用指定的数据填充满数组所有的内容

• copyWithin(target, start?, end?): 在数组内部完成复制

const arr = [1, 2, 3, 4, 5, 6];
//从下标2开始，改变数组的数据，数据来自于下标0位置开始
// arr.copyWithin(2); // [1, 2, 1, 2, 3, 4]
// arr.copyWithin(2, 1); // [1, 2, 2, 3, 4, 5]

// arr.copyWithin(2, 1, 3); // [1, 2, 2, 3, 5, 6]
console.log(arr)

• includes(data)：判断数组中是否包含某个值，使用Object.is匹配 const arr = [45, 21, 356, 66 , 6, NaN, 723, 54]; console.log(arr.indexOf(66) >= 0) console.log(arr.includes(NaN));

该对象提供了一些方法，用于控制或监听地址的变化。

该对象不是window.history，而是一个抽离的对象，它提供统一的API接口，封装了具体的实现

• createBrowserHistory  产生的控制浏览器真实地址的history对象

• createHashHistory  产生的控制浏览器hash的history对象

• createMemoryHistory  产生的控制内存中地址数组的history对象

history对象共同的特点：维护了一个地址栈

第三方库：history

以下三个函数，虽然名称和参数不同，但返回的对象结构(history)完全一致

history对象

• action：当前地址栈，最后一次操作的类型

  • 如果是通过createXXXHistory函数新创建的history对象，action固定为POP

  • 如果调用了history的push方法，action变为PUSH

  • 如果调用了history的replace方法，action变为REPLACE

• push：向当前地址栈指针位置，入栈一个地址

• replace：替换指针指向的地址

• go：控制当前地址栈指针偏移，如果是0，地址不变；如果是负数，则后退指定的步数；如果是正数，则前进指定的步数；

• length：当前栈中的地址数量

• goBack：相当于go(-1)

• goForward：相当于go(1)

• location：表达当前地址中的信息

• listen：函数，用于监听地址栈指针的变化

  • 该函数接收一个函数作为参数，该参数表示地址变化后要做的事情

    • 参数函数接收两个参数

    • location：记录了新的地址

    • action：进入新地址的方式

      • POP：指针移动，调用go、goBack、goForward、用户点击浏览器后退按钮

      • PUSH：调用history.push

      • REPLACE：调用history.replace

  • 该函数有一个返回值，返回的是一个函数，用于取消监听

• block：用于设置一个阻塞，当页面发生跳转时，会将指定的消息传递到getUserConfirmation，并调用getUserConfirmation函数

  • 该函数接收一个字符串作为参数，表示消息内容，也可以接收一个函数作为参数，函数的返回值是消息内容

  • 该函数返回一个取消函数，调用取消函数可以解除阻塞

• createHref：basename+url

createBrowserHistory

创建一个使用浏览器History Api的history对象

配置对象：

• basename：设置根路径

• forceRefresh：地址改变时是否强制刷新页面

• keyLength：location对象使用的key值长度

  • 地址栈中记录的并非字符串，而是一个location对象

• getUserConfirmation：一个函数，该函数当调用history对象block函数后，发生页面跳转时运行

createHashHistory

创建一个使用浏览器hash的history对象

配置对象：

• hashType：#号后给定的路径格式

  • hashbang：被chrome弃用，#!路径

  • noslash：#a/b/c

  • slash：#/a/b/c

createMemoryHistory

创建一个使用内存中的地址栈的history对象，一般用于没有地址栏的环境

配置对象：详见memoryHistory.js

react-router中路由的匹配规则实现

import pathToRegexp from "path-to-regexp";

/**
 * 得到匹配结果（match对象），如果没有匹配，返回null
 * @param {*} path 路径规则
 * @param {*} pathname 真实的地址
 * @param {*} options 相关配置，该配置是一个对象，该对象中，可以出现：exact、sensitive、strict
 */
export default function matchPath(path, pathname, options) {
    const keys = [];//保存路径规则中的关键字
    const regExp = pathToRegexp(path, keys, getOptions(options));
    const result = regExp.exec(pathname); //匹配url地址
    if (!result) {
        return null; //没有匹配
    }
    //匹配了
    let groups = Array.from(result);
    groups = groups.slice(1); //得到匹配的分组结果
    const params = getParams(groups, keys);
    return {
        isExact: pathname === result[0],
        params,
        path,
        url: result[0]
    };
}

/**
 * 将传入的react-router配置，转换为path-to-regexp的配置
 * @param {*} options 
 */
function getOptions(options = {}) {
    const defaultOptions = {
        exact: false,
        sensitive: false,
        strict: false
    }
    const opts = { ...defaultOptions, ...options };
    return {
        sensitive: opts.sensitive,
        strict: opts.strict,
        end: opts.exact
    }
}

/**
 * 根据匹配的分组结果，得到一个params对象
 * @param {*} groups 
 * @param {*} keys 
 */
function getParams(groups, keys) {
    const obj = {};
    for (let i = 0; i < groups.length; i++) {
        const value = groups[i];
        const name = keys[i].name;
        obj[name] = value;
    }
    return obj;
}

webpack做的事情，仅仅是分析出各种模块的依赖关系，然后形成资源列表，最终打包生成到指定的文件中。 更多的功能需要借助webpack loaders和webpack plugins完成。

webpack loader： loader本质上是一个函数，它的作用是将某个源码字符串转换成另一个源码字符串返回。

loader函数的将在模块解析的过程中被调用，以得到最终的源码。

全流程：

chunk中解析模块的流程：

chunk中解析模块的更详细流程：

处理loaders流程：

loader配置：

完整配置

module.exports = {
    module: { //针对模块的配置，目前版本只有两个配置，rules、noParse
        rules: [ //模块匹配规则，可以存在多个规则
            { //每个规则是一个对象
                test: /\.js$/, //匹配的模块正则
                use: [ //匹配到后应用的规则模块
                    {  //其中一个规则
                        loader: "模块路径", //loader模块的路径，该字符串会被放置到require中
                        options: { //向对应loader传递的额外参数
                          
                        }
                    }
                ]
            }
        ]
    }
}

简化配置

module.exports = {
    module: { //针对模块的配置，目前版本只有两个配置，rules、noParse
        rules: [ //模块匹配规则，可以存在多个规则
            { //每个规则是一个对象
                test: /\.js$/, //匹配的模块正则
                use: ["模块路径1", "模块路径2"]//loader模块的路径，该字符串会被放置到require中
            }
        ]
    }
}

思考🤔：Loader中是否可以支持ES6 module？ 不可以，loader是在webpack打包过程中执行的，依赖Node.js的环境。（node并非不支持ES6的模块化，只是目前的生态环境使用的最多的还是ES6的模块化）；

loader的功能定位是转换代码，而一些其他的操作难以使用loader完成，比如：

• 当webpack生成文件时，顺便多生成一个说明描述文件

• 当webpack编译启动时，控制台输出一句话表示webpack启动了

• 当xxxx时，xxxx

这种类似的功能需要把功能嵌入到webpack的编译流程中，而这种事情的实现是依托于plugin的

plugin的本质是一个带有apply方法的对象

var plugin = {
    apply: function(compiler){
        
    }
}

通常，习惯上，我们会将该对象写成构造函数的模式

class MyPlugin{
    apply(compiler){

    }
}

var plugin = new MyPlugin();

要将插件应用到webpack，需要把插件对象配置到webpack的plugins数组中，如下：

module.exports = {
    plugins:[
        new MyPlugin()
    ]
}

apply函数会在初始化阶段，创建好Compiler对象后运行。

compiler对象是在初始化阶段构建的，整个webpack打包期间只有一个compiler对象，后续完成打包工作的是compiler对象内部创建的compilation

apply方法会在创建好compiler对象后调用，并向方法传入一个compiler对象

compiler对象提供了大量的钩子函数（hooks，可以理解为事件），plugin的开发者可以注册这些钩子函数，参与webpack编译和生成。

你可以在apply方法中使用下面的代码注册钩子函数:

class MyPlugin{
    apply(compiler){
        compiler.hooks.事件名称.事件类型(name, function(compilation){
            //事件处理函数
        })
    }
}

事件名称

即要监听的事件名，即钩子名，所有的钩子：https://www.webpackjs.com/api/compiler-hooks

事件类型

这一部分使用的是 Tapable API，这个小型的库是一个专门用于钩子函数监听的库。

它提供了一些事件类型：

• tap：注册一个同步的钩子函数，函数运行完毕则表示事件处理结束

• tapAsync：注册一个基于回调的异步的钩子函数，函数通过调用一个回调表示事件处理结束

• tapPromise：注册一个基于Promise的异步的钩子函数，函数通过返回的Promise进入已决状态表示事件处理结束

处理函数

处理函数有一个事件参数compilation

这里所说的构建性能，是指在开发阶段的构建性能，而不是生产环境的构建性能

优化的目标，是降低从打包开始，到代码效果呈现所经过的时间

构建性能会影响开发效率。构建性能越高，开发过程中时间的浪费越少

减少模块解析

模块解析包括：抽象语法树分析、依赖分析、模块语法替换

不做模块解析会怎样？

如果某个模块不做解析，该模块经过loader处理后的代码就是最终代码。

如果没有loader对该模块进行处理，该模块的源码就是最终打包结果的代码。

如果不对某个模块进行解析，可以缩短构建时间

哪些模块不需要解析？

模块中无其他依赖：一些已经打包好的第三方库，比如jquery

如何让某个模块不要解析？

配置**module.noParse**，它是一个正则，被正则匹配到的模块不会解析

优化loader性能

进一步限制loader的应用范围

思路是：对于某些库，不使用loader

例如：babel-loader可以转换ES6或更高版本的语法，可是有些库本身就是用ES5语法书写的，不需要转换，使用babel-loader反而会浪费构建时间

lodash就是这样的一个库

lodash是在ES5之前出现的库，使用的是ES3语法

通过module.rule.exclude或module.rule.include，排除或仅包含需要应用loader的场景

module.exports = {
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /lodash/,
                use: "babel-loader"
            }
        ]
    }
}

如果暴力一点，甚至可以排除掉node_modules目录中的模块，或仅转换src目录的模块

module.exports = {
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                //或
                // include: /src/,
                use: "babel-loader"
            }
        ]
    }
}

这种做法是对loader的范围进行进一步的限制，和noParse不冲突，想想看，为什么不冲突

缓存loader的结果

我们可以基于一种假设：如果某个文件内容不变，经过相同的loader解析后，解析后的结果也不变

于是，可以将loader的解析结果保存下来，让后续的解析直接使用保存的结果

cache-loader可以实现这样的功能

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

有趣的是，cache-loader放到最前面，却能够决定后续的loader是否运行

实际上，loader的运行过程中，还包含一个过程，即pitch

!Unsupported embed

cache-loader还可以实现各自自定义的配置，具体方式见文档

为loader的运行开启多线程

thread-loader会开启一个线程池，线程池中包含适量的线程

它会把后续的loader放到线程池的线程中运行，以提高构建效率

由于后续的loader会放到新的线程中，所以，后续的loader不能：

• 使用 webpack api 生成文件

• 无法使用自定义的 plugin api

• 无法访问 webpack options

在实际的开发中，可以进行测试，来决定thread-loader放到什么位置

特别注意，开启和管理线程需要消耗时间，在小型项目中使用thread-loader反而会增加构建时间

热替换 HMR {ignore}

热替换并不能降低构建时间（可能还会稍微增加），但可以降低代码改动到效果呈现的时间

当使用webpack-dev-server时，考虑代码改动到效果呈现的过程

!Unsupported embed

而使用了热替换后，流程发生了变化

!Unsupported embed

使用和原理

1. 更改配置

module.exports = {
  devServer:{
    hot:true // 开启HMR
  },
  plugins:[ 
    // 可选
    new webpack.HotModuleReplacementPlugin()
  ]
}

1. 更改代码

// index.js

if(module.hot){ // 是否开启了热更新
  module.hot.accept() // 接受热更新
}

首先，这段代码会参与最终运行！

当开启了热更新后，webpack-dev-server会向打包结果中注入module.hot属性

默认情况下，webpack-dev-server不管是否开启了热更新，当重新打包后，都会调用location.reload刷新页面

但如果运行了module.hot.accept()，将改变这一行为

module.hot.accept()的作用是让webpack-dev-server通过socket管道，把服务器更新的内容发送到浏览器

!Unsupported embed

然后，将结果交给插件HotModuleReplacementPlugin注入的代码执行

插件HotModuleReplacementPlugin会根据覆盖原始代码，然后让代码重新执行

所以，热替换发生在代码运行期

样式热替换

对于样式也是可以使用热替换的，但需要使用style-loader

因为热替换发生时，HotModuleReplacementPlugin只会简单的重新运行模块代码

因此style-loader的代码一运行，就会重新设置style元素中的样式

而mini-css-extract-plugin，由于它生成文件是在构建期间，运行期间并会也无法改动文件，因此它对于热替换是无效的

传输性能

传输性能是指，打包后的JS代码传输到浏览器经过的时间

在优化传输性能时要考虑到：

1. 总传输量：所有需要传输的JS文件的内容加起来，就是总传输量，重复代码越少，总传输量越少

2. 文件数量：当访问页面时，需要传输的JS文件数量，文件数量越多，http请求越多，响应速度越慢

3. 浏览器缓存：JS文件会被浏览器缓存，被缓存的文件不会再进行传输

运行性能

运行性能是指，JS代码在浏览器端的运行速度

它主要取决于我们如何书写高性能的代码

永远不要过早的关注于性能，因为你在开发的时候，无法完全预知最终的运行性能，过早的关注性能会极大的降低开发效率

性能优化主要从上面三个维度入手

性能优化没有完美的解决方案，需要具体情况具体分析

实现Redux中间件的基本原理，是更改仓库中的dispatch函数。

Redux中间件书写：

• 中间件本身是一个函数，该函数接收一个store参数，表示创建的仓库，该仓库并非一个完整的仓库对象，仅包含getState，dispatch。该函数运行的时间，是在仓库创建之后运行。

• 由于创建仓库后需要自动运行设置的中间件函数，因此，需要在创建仓库时，告诉仓库有哪些中间件

• 需要调用applyMiddleware函数，将函数的返回结果作为createStore的第二或第三个参数。

• 中间件函数必须返回一个dispatch创建函数

• applyMiddleware函数，用于记录有哪些中间件，它会返回一个函数

• 该函数用于记录创建仓库的方法，然后又返回一个函数

redux-saga

中文文档地址：https://redux-saga-in-chinese.js.org/

• 纯净

• 强大

• 灵活

在saga任务中，如果yield了一个普通数据，saga不作任何处理，仅仅将数据传递给yield表达式（把得到的数据放到next的参数中），因此，在saga中，yield一个普通数据没什么意义。

saga需要你在yield后面放上一些合适的saga指令（saga effects），如果放的是指令，saga中间件会根据不同的指令进行特殊处理，以控制整个任务的流程。

每个指令本质上就是一个函数，该函数调用后，会返回一个指令对象，saga会接收到该指令对象，进行各种处理

一旦saga任务完成（生成器函数运行完成），则saga中间件一定结束

• take指令：【阻塞】监听某个action，如果action发生了，则会进行下一步处理，take指令仅监听一次。yield得到的是完整的action对象

• all指令：【阻塞】该函数传入一个数组，数组中放入生成器，saga会等待所有的生成器全部完成后才会进一步处理

• takeEvery指令：不断的监听某个action，当某个action到达之后，运行一个函数。takeEvery永远不会结束当前的生成器

• delay指令：【阻塞】阻塞指定的毫秒数

• put指令：用于重新触发action，相当于dispatch一个action

• call指令：【可能阻塞】用于副作用（通常是异步）函数调用

• apply指令：【可能阻塞】用于副作用（通常是异步）函数调用

• select指令：用于得到当前仓库中的数据

• cps指令：【可能阻塞】用于调用那些传统的回调方式的异步函数

• fork：用于开启一个新的任务，该任务不会阻塞，该函数需要传递一个生成器函数，fork返回了一个对象，类型为Task

• cancel：用于取消一个或多个任务，实际上，取消的实现原理，是利用generator.return。cancel可以不传递参数，如果不传递参数，则取消当前任务线。

• takeLastest：功能和takeEvery一致，只不过，会自动取消掉之前开启的任务

• cancelled：判断当前任务线是否被取消掉了

• race：【阻塞】竞赛，可以传递多个指令，当其中任何一个指令结束后，会直接结束，与Promise.race类似。返回的结果，是最先完成的指令结果。并且，该函数会自动取消其他的任务

经典真题

• 为什么 console.log(0.2+0.1==0.3) 得到的值为 false

浮点数精度常见问题

在 JavaScript 中整数和浮点数都属于 number 数据类型，所有数字都是以 64 位浮点数形式储存，即便整数也是如此。 所以我们在打印 1.00 这样的浮点数的结果是 1 而非 1.00 。

在一些特殊的数值表示中，例如金额，这样看上去有点别扭，但是至少值是正确了。

然而要命的是，当浮点数做数学运算的时候，你经常会发现一些问题，举几个例子：

场景一：进行浮点值运算结果的判断

// 加法 
console.log(0.1 + 0.2); // 0.30000000000000004
console.log(0.7 + 0.1); // 0.7999999999999999
console.log(0.2 + 0.4); // 0.6000000000000001
console.log(2.22 + 0.1); // 2.3200000000000003
 
// 减法
console.log(1.5 - 1.2); // 0.30000000000000004
console.log(0.3 - 0.2); // 0.09999999999999998
 
// 乘法 
console.log(19.9 * 100); // 1989.9999999999998
console.log(19.9 * 10 * 10); // 1990
console.log(9.7 * 100); // 969.9999999999999
console.log(39.7 * 100); // 3970.0000000000005
 
// 除法 
console.log(0.3 / 0.1); // 2.9999999999999996
console.log(0.69 / 10); // 0.06899999999999999

场景二：将小数乘以 10 的 n 次方取整

比如将钱币的单位，从元转化成分，经常写出来的是 parseInt(yuan*100, 10)

console.log(parseInt(0.58 * 100, 10)); // 57

场景三：四舍五入保留 n 位小数

例如我们会写出 (number).toFixed(2)，但是看下面的例子：

console.log((1.335).toFixed(2)); // 1.33

在上面的例子中，我们得出的结果是 1.33，而不是预期结果 1.34。

为什么会有这样的问题

似乎是不可思议。小学生都会算的题目，JavaScript 不会？

我们来看看其真正的原因，到底为什么会产生精度丢失的问题呢？

计算机底层只有 0 和 1， 所以所有的运算最后实际上都是二进制运算。

十进制整数利用辗转相除的方法可以准确地转换为二进制数，但浮点数呢？

JavaScript 里的数字是采用 IEEE 754 标准的 64 位双精度浮点数。

先看下面一张图：

该规范定义了浮点数的格式，对于 64 位的浮点数在内存中的表示，最高的 1 位是符号位，接着的 11 位是指数，剩下的 52 位为有效数字，具体如下：

• 符号位 S：第 1 位是正负数符号位（sign），0 代表正数，1 代表负数

• 指数位 E：中间的 11 位存储指数（exponent），用来表示次方数

• 尾数位 M：最后的 52 位是尾数（mantissa），储存小数部分，超出的部分自动进一舍零

也就是说，浮点数最终在运算的时候实际上是一个符合该标准的二进制数

符号位决定了一个数的正负，指数部分决定了数值的大小，小数部分决定了数值的精度。

IEEE 754 规定，有效数字第一位默认总是 1，不保存在 64 位浮点数之中。也就是说，有效数字总是 1.xx…xx 的形式，其中 xx…xx 的部分保存在 64 位浮点数之中，最长可能为 52 位。因此，JavaScript 提供的有效数字最长为 53 个二进制位（64 位浮点的后 52 位 + 有效数字第一位的 1）。

既然限定位数，必然有截断的可能。

我们可以看一个例子：

console.log(0.1 + 0.2); // 0.30000000000000004

为了验证该例子，我们得先知道怎么将浮点数转换为二进制，整数我们可以用除 2 取余的方式，小数我们则可以用乘 2 取整的方式。

0.1 转换为二进制：

0.1 * 2，值为 0.2，小数部分 0.2，整数部分 0

0.2 * 2，值为 0.4，小数部分 0.4，整数部分 0

0.4 * 2，值为0.8，小数部分0.8，整数部分0

0.8 * 2，值为 1.6，小数部分 0.6，整数部分 1

0.6 * 2，值为 1.2，小数部分 0.2，整数部分 1

0.2 * 2，值为 0.4，小数部分 0.4，整数部分 0

从 0.2 开始循环

0.2 转换为二进制可以直接参考上述，肯定最后也是一个循环的情况

所以最终我们能得到两个循环的二进制数：

0.1：0.0001 1001 1001 1001 1001 1001 1001 1001 1001 1001 1001 1001 1100 ...

0.2：0.0011 0011 0011 0011 0011 0011 0011 0011 0011 0011 0011 0011 0011 ...

这两个的和的二进制就是：

sum：0.0100 1100 1100 1100 1100 1100 1100 1100 1100 1100 1100 1100 1100 1100 ...

最终我们只能得到和的近似值（按照 IEEE 754 标准保留 52 位，按 0 舍 1 入来取值），然后转换为十进制数变成：

sum ≈ 0.30000000000000004

再例如：

console.log((1.335).toFixed(2)); // 1.33

因为 1.335 其实是 1.33499999999999996447286321199，toFixed 虽然是四舍五入，但是是对 1.33499999999999996447286321199 进行四五入，所以得出 1.33。

在 Javascript 中，整数精度同样存在问题，先来看看问题：

console.log(19571992547450991); // 19571992547450990
console.log(19571992547450991===19571992547450992); // true

同样的原因，在 JavaScript 中 number 类型统一按浮点数处理，整数是按最大 54 位来算，

• 最大( 253 - 1，Number.MAX_SAFE_INTEGER、9007199254740991)

• 最小( -(253 - 1)，Number.MIN_SAFE_INTEGER、-9007199254740991)

所以只要超过这个范围，就会存在被舍去的精度问题。

当然这个问题并不只是在 Javascript 中才会出现，几乎所有的编程语言都采用了 IEEE-754 浮点数表示法，任何使用二进制浮点数的编程语言都会有这个问题。

只不过在很多其他语言中已经封装好了方法来避免精度的问题，而 JavaScript 是一门弱类型的语言，从设计思想上就没有对浮点数有个严格的数据类型，所以精度误差的问题就显得格外突出。

通常这种对精度要求高的计算都应该交给后端去计算和存储，因为后端有成熟的库来解决这种计算问题。

前端也有几个不错的类库：

Math.js

Math.js 是专门为 JavaScript 和 Node.js 提供的一个广泛的数学库。它具有灵活的表达式解析器，支持符号计算，配有大量内置函数和常量，并提供集成解决方案来处理不同的数据类型。

像数字，大数字（超出安全数的数字），复数，分数，单位和矩阵。 功能强大，易于使用。

decimal.js

为 JavaScript 提供十进制类型的任意精度数值。

big.js

不仅能够支持处理 Long 类型的数据，也能够准确的处理小数的运算。

真题解答

• 为什么 console.log(0.2+0.1==0.3) 得到的值为 false

参考答案：

因为浮点数的计算存在 round-off 问题，也就是浮点数不能够进行精确的计算。并且：

• 不仅 JavaScript，所有遵循 IEEE 754 规范的语言都是如此；

• 在 JavaScript 中，所有的 Number 都是以 64-bit 的双精度浮点数存储的；

• 双精度的浮点数在这 64 位上划分为 3 段，而这 3 段也就确定了一个浮点数的值，64bit 的划分是“1-11-52”的模式，具体来说：

  • 就是 1 位最高位（最左边那一位）表示符号位，0 表示正，1 表示负；

  • 11 位表示指数部分；

  • 52 位表示尾数部分，也就是有效域部分

-EOF-

• 什么是函数柯里化？

什么是函数柯里化

在计算机科学中，柯里化（英语：Currying），又译为卡瑞化或加里化，是把接受多个参数的函数变换成接受一个单一参数（最初函数的第一个参数）的函数，并且返回接受余下的参数而且返回结果的新函数的技术。

这个技术由克里斯托弗·斯特雷奇以逻辑学家哈斯凯尔·加里命名的，尽管它是 Moses Schönfinkel 和戈特洛布·弗雷格发明的。

在直觉上，柯里化声称如果你固定某些参数，你将得到接受余下参数的一个函数。

我们姑且叫它返回函数，在调用返回函数的时候，它将判断当前的参数和之前被柯里化函数固定的参数拼起来之后，是否达到了原本函数的参数个数。

如果是，则执行原本的函数，得到结果；如果没有达到，则要继续调用柯里化函数来固定目前的参数。

在理论计算机科学中，柯里化提供了在简单的理论模型中，比如：只接受一个单一参数的 lambda 演算中，研究带有多个参数的函数的方式。

函数柯里化的对偶是Uncurrying，一种使用匿名单参数函数来实现多参数函数的方法。

柯里化快速入门

接下来，我们来通过一个简单的示例，让大家快速体会函数柯里化。

假设我们有一个求取两个数之和的函数：

function add(x, y) {
    return x + y;
}
console.log(add(1, 2)); // 3
console.log(add(5, 7)); // 12

在上面的示例中，我们有一个 add 函数，接收两个形参，返回两形参的和。

在调用的时候，我们每次也需要传递两个参数。

现在，我们对其进行柯里化，如下：

function add(x) {
    return function (y) {
        return x + y;
    }
}
console.log(add(1)(2)); // 3
console.log(add(5)(7)); // 3

在上面的代码中，我们对 add 函数进行了柯里化改造，只接受一个参数，但是返回的也不是值了，而是返回一个函数，这个函数也接收一个参数，然后利用闭包的特性，可以访问到最开始传入的 x 的值，最终返回 x 和 y 的和。

所以，通过上面的这个示例，我们能够体会到前面所说的柯里化函数的特点：

一个柯里化的函数首先会接受一些参数，接受了这些参数之后，该函数并不会立即求值，而是继续返回另外一个函数，刚才传入的参数在函数形成的闭包中被保存起来。待到函数被真正需要求值的时候，之前传入的所有参数都会被一次性用于求值。

函数柯里化实际应用

通过上面的例子，我们体验到了什么是柯里化函数。

但是问题来了，费这么大劲封装一层，到底有什么用处呢？

没有好处想让我们程序员多干事情是不可能滴，这辈子都不可能。

所以接下来我们就来看一下函数柯里化的一个实际应用。

参数复用

就是将相同的参数固定下来。

// 正常正则验证字符串 reg.test(txt)

// 函数封装后
function check(reg, txt) {
    return reg.test(txt)
}

// 即使是相同的正则表达式，也需要重新传递一次
console.log(check(/\d+/g, 'test1')); // true
console.log(check(/\d+/g, 'testtest')); // false
console.log(check(/[a-z]+/g, 'test')); // true

// Currying后
function curryingCheck(reg) {
    return function (txt) {
        return reg.test(txt)
    }
}

// 正则表达式通过闭包保存了起来
var hasNumber = curryingCheck(/\d+/g)
var hasLetter = curryingCheck(/[a-z]+/g)

console.log(hasNumber('test1')); // true
console.log(hasNumber('testtest'));  // false
console.log(hasLetter('21212')); // false

上面的示例是一个正则的校验，正常来说直接调用 check 函数就可以了，但是如果我有很多地方都要校验是否有数字，其实就是需要将第一个参数 reg 进行复用，这样别的地方就能够直接调用 hasNumber、hasLetter 等函数，让参数能够复用，调用起来也更方便。

提前确认

/**
 * 
 * @param {要绑定事件的 DOM 元素} element 
 * @param {绑定什么事件} event 
 * @param {事件处理函数} handler 
 */
var on = function (element, event, handler) {
    if (document.addEventListener) {
        if (element && event && handler) {
            element.addEventListener(event, handler, false);
        }
    } else {
        if (element && event && handler) {
            element.attachEvent('on' + event, handler);
        }
    }
}

on(div, 'click', function(){})


var on = (function () {
    if (document.addEventListener) {
        return function (element, event, handler) {
            if (element && event && handler) {
                element.addEventListener(event, handler, false);
            }
        };
    } else {
        return function (element, event, handler) {
            if (element && event && handler) {
                element.attachEvent('on' + event, handler);
            }
        };
    }
})();

on(div, 'click', function(){})

//换一种写法可能比较好理解一点，上面就是把 isSupport 这个参数给先确定下来了
var on = function (isSupport, element, event, handler) {
    isSupport = isSupport || document.addEventListener;
    if (isSupport) {
        return element.addEventListener(event, handler, false);
    } else {
        return element.attachEvent('on' + event, handler);
    }
}
on(true, div, 'click', function(){})
on(true, div, 'click', function(){})
on(true, div, 'click', function(){})

我们在做项目的过程中，封装一些 DOM 操作可以说再常见不过，上面第一种写法也是比较常见，但是我们看看第二种写法，它相对于第一种写法就是自执行然后返回一个新的函数，这样其实就是提前确定了会走哪一个方法，避免每次都进行判断。

封装通用柯里化函数

接下来我们来封装一个通用的柯里化函数。

function curry() {
    var fn = arguments[0]; // 获取要执行的函数
    var args = [].slice.call(arguments, 1); // 获取传递的参数，构成一个参数数组
    // 如果传递的参数已经等于执行函数所需的参数数量
    if (args.length === fn.length) {
        return fn.apply(this, args)
    }
    // 参数不够向外界返回的函数
    function _curry(){
        // 推入之前判断
        // 将新接收到的参数推入到参数数组中
        args.push(...arguments);
        if(args.length === fn.length){
            return fn.apply(this, args)
        }
        return _curry;
    }
    return _curry;
}

对上面的代码进行测试：

// 测试 1
function add(a, b, c) {
    return a + b + c;
}

console.log(curry(add)(1)(2)(3)); // 6
console.log(curry(add, 1)(2)(3)); // 6
console.log(curry(add, 1, 2, 3)); // 6
console.log(curry(add, 1)(3, 4)); // 8

var addCurrying = curry(add)(2);
console.log(addCurrying(7)(8)); // 17

// 测试 2
function check(reg, txt) {
    return reg.test(txt)
}
var hasNumber = curry(check)(/\d+/g);
console.log(hasNumber('test1'));// true

一道经典的柯里化面试题

实现一个 add 方法，使计算结果能够满足如下预期：

add(1)(2)(3) = 6;
add(1, 2, 3)(4) = 10;
add(1)(2)(3)(4)(5) = 15;

要完成上面的需求，我们就可以使用柯里化函数：

function add() {
    // 第一次执行时，定义一个数组专门用来存储所有的参数
    var _args = Array.prototype.slice.call(arguments);

    // 在内部声明一个函数，利用闭包的特性保存 _args 并收集所有的参数值
    var _adder = function () {
        _args.push(...arguments);
        return _adder;
    };

    // 这个是最后输出的时候被调用的，return 后面如果是函数体，
    // 为了输出函数体字符串会自动调用 toString 方法
    // 利用 toString 隐式转换的特性，当最后执行时隐式转换，并计算最终的值返回
    _adder.toString = function () {
        return _args.reduce(function (a, b) {
            return a + b;
        });
    }

    // 这个 return 是第一次调用的时候返回上面的函数体，
    // 这样后面所有的括号再执行的时候就是执行 _adder 函数体
    return _adder;
}
console.log(add(1)(2)(3).toString()); // 6
console.log(add(1, 2, 3)(4).toString()); // 10
console.log(add(1)(2)(3)(4)(5).toString()); // 15
console.log(add(2, 6)(1).toString()); // 9

下载

若要实现下载时的断点续传，首先，服务器在响应时，要在头中加入下面的字段

Accept-Ranges: bytes

这个字段是向客户端表明：我这个文件可以支持传输部分数据，你只需要告诉我你需要的是哪一部分的数据即可，单位是字节

此时，某些支持断点续传的客户端，比如迅雷，它就可以在请求时，告诉服务器需要的数据范围。具体做法是在请求头中加入下面的字段

range: bytes=0-5000

客户端告诉服务器：请给我传递0-5000字节范围内的数据即可，无须传输全部数据

完整流程如下

sequenceDiagram
客户端->>服务器: head请求，询问文件信息
服务器->>客户端: Content-Disposition,Accept-Ranges,Content-Length
客户端->>服务器: Range:bytes=0-500
服务器->>客户端: 0-500字节的数据
客户端->>服务器: Range:bytes=501-1000
服务器->>客户端: 501-1000字节的数据
客户端->>服务器: ...
服务器->>客户端: ...
客户端->>客户端: 将碎片信息组装成完整文件

上传

整体来说，实现断点上传的主要思路就是把要上传的文件切分为多个小的数据块然后进行上传

虽然分片上传的整体思路一致，但它没有一个统一的、具体的标准，因此需要根据具体的业务场景制定自己的标准。

由于标准的不同，这也就意味着分片上传需要自行编写代码实现。

下面用一种极其简易的流程实现分片上传

sequenceDiagram
Note left of 客户端: 用户选择文件
Note left of 客户端: 将文件分割为多个分片
Note left of 客户端: 得到文件的MD5和每个分片的MD5
客户端->>服务器: 文件MD5、后缀、分片顺序、每个分片MD5
Note right of 服务器: 文件还剩哪些分片没有上传？
服务器->>客户端: 还需要上传的分片MD5
客户端->>服务器: 上传一个分片
Note right of 服务器: 文件还剩哪些分片没有上传？
服务器->>客户端: 还需要上传的分片MD5
客户端->>服务器: 上传一个分片
Note right of 服务器: 文件还剩哪些分片没有上传？
服务器->>客户端: 还需要上传的分片MD5
客户端->>服务器: 上传一个分片
Note right of 服务器: 所有分片已上传
Note right of 服务器: 合并所有分片成完整的文件
服务器->>客户端: 文件的访问地址

经典真题

• 请简述一下 Node.js 中的事件循环，和浏览器环境的事件循环有何不同？

Node.js 与浏览器的事件循环有何区别？

进程与线程

我们经常说 JavaScript 是一门单线程语言，指的是一个进程里只有一个主线程，那到底什么是线程？什么是进程？

首先需要把这个问题搞明白。

进程是 CPU 资源分配的最小单位，而线程是 CPU 调度的最小单位。举个例子，看下面的图：

• 进程好比图中的工厂，有单独的专属自己的工厂资源。

• 线程好比图中的工人，多个工人在一个工厂中协作工作，工厂与工人是 1:n 的关系。也就是说一个进程由一个或多个线程组成，线程是一个进程中代码的不同执行路线。

• 工厂的空间是工人们共享的，这象征一个进程的内存空间是共享的，每个线程都可用这些共享内存。

• 多个工厂之间独立存在。

接下来我们回过头来看多进程和多线程的概念：

• 多进程：在同一个时间里，同一个计算机系统中如果允许两个或两个以上的进程处于运行状态。多进程带来的好处是明显的，比如你可以听歌的同时，打开编辑器敲代码，编辑器和听歌软件的进程之间丝毫不会相互干扰。

• 多线程：程序中包含多个执行流，即在一个程序中可以同时运行多个不同的线程来执行不同的任务，也就是说允许单个程序创建多个并行执行的线程来完成各自的任务。

以 Chrome 浏览器中为例，当你打开一个 Tab 页时，其实就是创建了一个进程。

一个进程中可以有多个线程，比如渲染线程、JS 引擎线程、HTTP 请求线程等等。当你发起一个请求时，其实就是创建了一个线程，当请求结束后，该线程可能就会被销毁。

浏览器内核

简单来说浏览器内核是通过取得页面内容、整理信息（应用 CSS ）、计算和组合最终输出可视化的图像结果，通常也被称为渲染引擎。

浏览器内核是多线程，在内核控制下各线程相互配合以保持同步，一个浏览器通常由以下常驻线程组成：

• GUI 渲染线程

• JavaScript 引擎线程

• 定时触发器线程

• 事件触发线程

• 异步 http 请求线程

GUI 渲染线程

• 主要负责页面的渲染，解析 HTML、CSS，构建 DOM 树，布局和绘制等。

• 当界面需要重绘或者由于某种操作引发回流时，将执行该线程。

• 该线程与 JS 引擎线程互斥，当执行 JS 引擎线程时，GUI 渲染会被挂起，当任务队列空闲时，主线程才会去执行 GUI 渲染。

JavaScript 引擎线程

• 该线程当然是主要负责处理 JavaScript 脚本，执行代码。

• 也是主要负责执行准备好待执行的事件，即定时器计数结束，或者异步请求成功并正确返回时，将依次进入任务队列，等待 JS 引擎线程的执行。

• 当然，该线程与 GUI 渲染线程互斥，当 JS 引擎线程执行 JavaScript 脚本时间过长，将导致页面渲染的阻塞。

定时触发器线程

• 负责执行异步定时器一类的函数的线程，如：setTimeout、setInterval。

• 主线程依次执行代码时，遇到定时器，会将定时器交给该线程处理，当计数完毕后，事件触发线程会将计数完毕后的事件加入到任务队列的尾部，等待 JS 引擎线程执行。

事件触发线程

• 主要负责将准备好的事件交给 JS 引擎线程执行。

比如 setTimeout 定时器计数结束， ajax 等异步请求成功并触发回调函数，或者用户触发点击事件时，该线程会将整装待发的事件依次加入到任务队列的队尾，等待 JS 引擎线程的执行。

异步 http 请求线程

• 负责执行异步请求一类的函数的线程，如：Promise、fetch、ajax 等。

• 主线程依次执行代码时，遇到异步请求，会将函数交给该线程处理，当监听到状态码变更，如果有回调函数，事件触发线程会将回调函数加入到任务队列的尾部，等待 JS 引擎线程执行。

浏览器中的事件循环

宏任务和微任务

事件循环中的异步队列有两种：宏任务（ macro ）队列和微任务（ micro ）队列。

宏任务队列有一个，微任务队列只有一个。

• 常见的宏任务有：setTimeout、setInterval、requestAnimationFrame、script等。

• 常见的微任务有：new Promise( ).then(回调)、MutationObserver 等。

事件循环流程

一个完整的事件循环过程，可以概括为以下阶段：

• 一开始执行栈空，我们可以把执行栈认为是一个存储函数调用的栈结构，遵循先进后出的原则。微任务队列空，宏任务队列里有且只有一个 script 脚本（整体代码）。

• 全局上下文（ script 标签）被推入执行栈，同步代码执行。在执行的过程中，会判断是同步任务还是异步任务，通过对一些接口的调用，可以产生新的宏任务与微任务，它们会分别被推入各自的任务队列里。同步代码执行完了，script 脚本会被移出宏任务队列，这个过程本质上是队列的宏任务的执行和出队的过程。

• 上一步我们出队的是一个宏任务，这一步我们处理的是微任务。但需要注意的是：当一个宏任务执行完毕后，会执行所有的微任务，也就是将整个微任务队列清空。

• 执行渲染操作，更新界面

• 检查是否存在 Web worker 任务，如果有，则对其进行处理

• 上述过程循环往复，直到两个队列都清空

宏任务和微任务的执行流程，总结起来就是：

当某个宏任务执行完后，会查看是否有微任务队列。如果有，先执行微任务队列中的所有任务，如果没有，会读取宏任务队列中排在最前的任务，执行宏任务的过程中，遇到微任务，依次加入微任务队列。栈空后，再次读取微任务队列里的任务，依次类推。

执行流程如下图所示：

这里我们可以来看两道具体的代码加深理解：

console.log('script start');
setTimeout(function() {
    console.log('setTimeout');
}, 0);

Promise.resolve().then(function() {
    console.log('promise1');
}).then(function() {
    console.log('promise2');
});

console.log('script end');

上面的代码输出的结果为：

script start
script end
promise1
promise2
setTimeout

原因很简单，首先会执行同步的任务，输出 script start 以及 script end。接下来是处理异步任务，异步任务分为宏任务队列和微任务队列，在执行宏任务队列中的每个宏任务之前先把微任务清空一遍，由于 promise 是微任务，所以会先被执行，而 setTimeout 由于是一个宏任务，会在微任务队列被清空后再执行。

Promise.resolve().then(()=>{
  console.log('Promise1')
  setTimeout(()=>{
    console.log('setTimeout2')
  },0)
})
setTimeout(()=>{
  console.log('setTimeout1')
  Promise.resolve().then(()=>{
    console.log('Promise2')
  })
},0)

上面的代码输出的结果为：

一开始执行栈的同步任务（这属于宏任务）执行完毕，会去查看是否有微任务队列，上题中存在（有且只有一个），然后执行微任务队列中的所有任务输出 Promise1，同时会生成一个宏任务 setTimeout2。

然后去查看宏任务队列，宏任务 setTimeout1 在 setTimeout2 之前，先执行宏任务 setTimeout1，输出 setTimeout1。在执行宏任务 setTimeout1 时会生成微任务 Promise2 ，放入微任务队列中，接着先去清空微任务队列中的所有任务，输出 Promise2。

清空完微任务队列中的所有任务后，就又会去宏任务队列取一个，这回执行的是 setTimeout2。

Node.js 中的事件循环

Node.js 事件循环介绍

Node.js 中的事件循环和浏览器中的是完全不相同的东西。

Node.js 采用 V8 作为 JS 的解析引擎，而 I/O 处理方面使用了自己设计的 libuv，libuv 是一个基于事件驱动的跨平台抽象层，封装了不同操作系统一些底层特性，对外提供统一的 API，事件循环机制也是它里面的实现。

可以看出 Node.JS 的事件循环比浏览器端复杂很多。Node.js 的运行机制如下:

• V8 引擎解析 JavaScript 脚本。

• 解析后的代码，调用 Node API。

• libuv 库负责 Node API 的执行。它将不同的任务分配给不同的线程，形成一个事件循环，以异步的方式将任务的执行结果返回给 V8 引擎。

• V8 引擎再将结果返回给用户。

整个架构图如下所示：

事件循环的 6 个阶段

其中 libuv 引擎中的事件循环分为 6 个阶段，它们会按照顺序反复运行。每当进入某一个阶段的时候，都会从对应的回调队列中取出函数去执行。当队列为空或者执行的回调函数数量到达系统设定的阈值，就会进入下一阶段。

从上图中，大致看出 Node.js 中的事件循环的顺序：

外部输入数据 –-> 轮询阶段（ poll ）-–> 检查阶段（ check ）-–> 关闭事件回调阶段（ close callback ）–-> 定时器检测阶段（ timer ）–-> I/O 事件回调阶段（ I/O callbacks ）-–>闲置阶段（ idle、prepare ）–->轮询阶段（按照该顺序反复运行）...

以上 6 个阶段所做的事情如下：

• timers 阶段：这个阶段执行 timer（ setTimeout、setInterval ）的回调

• I/O callbacks 阶段：处理一些上一轮循环中的少数未执行的 I/O 回调

• idle、prepare 阶段：仅 Node.js 内部使用

• poll 阶段：获取新的 I/O 事件, 适当的条件下 Node.js 将阻塞在这里

• check 阶段：执行 setImmediate( ) 的回调

• close callbacks 阶段：执行 socket 的 close 事件回调

注意：上面六个阶段都不包括 process.nextTick( )

接下去我们详细介绍 timers、poll、check 这 3 个阶段，因为日常开发中的绝大部分异步任务都是在这 3 个阶段处理的。

timer 阶段

timers 阶段会执行 setTimeout 和 setInterval 回调，并且是由 poll 阶段控制的。同样，在 Node.js 中定时器指定的时间也不是准确时间，只能是尽快执行。

poll 阶段

poll 是一个至关重要的阶段，这一阶段中，系统会做两件事情：

• 回到 timer 阶段执行回调

• 执行 I/O 回调

并且在进入该阶段时如果没有设定了 timer 的话，会发生以下两件事情：

• 如果 poll 队列不为空，会遍历回调队列并同步执行，直到队列为空或者达到系统限制

• 如果 poll 队列为空时，会有两件事发生：

  • 如果有 setImmediate 回调需要执行，poll 阶段会停止并且进入到 check 阶段执行回调

  • 如果没有 setImmediate 回调需要执行，会等待回调被加入到队列中并立即执行回调，这里同样会有个超时时间设置防止一直等待下去

当然设定了 timer 的话且 poll 队列为空，则会判断是否有 timer 超时，如果有的话会回到 timer 阶段执行回调。

假设 poll 被堵塞，那么即使 timer 已经到时间了也只能等着，这也是为什么上面说定时器指定的时间并不是准确的时间。例如：

const start = Date.now();
setTimeout(function f1() {
    console.log("setTimeout", Date.now() - start);
}, 200);

const fs = require('fs');

fs.readFile('./index.js', 'utf-8', function f2() {
    console.log('readFile');
    const start = Date.now();
    // 强行延时 500 毫秒
    while (Date.now() - start < 500) { }
})

check 阶段

setImmediate( ) 的回调会被加入 check 队列中，从事件循环的阶段图可以知道，check 阶段的执行顺序在 poll 阶段之后。

我们先来看个例子：

console.log('start')
setTimeout(() => {
  console.log('timer1')
  Promise.resolve().then(function() {
    console.log('promise1')
  })
}, 0)
setTimeout(() => {
  console.log('timer2')
  Promise.resolve().then(function() {
    console.log('promise2')
  })
}, 0)
Promise.resolve().then(function() {
  console.log('promise3')
})
console.log('end')
// 输出结果：start => end => promise3 => timer1 => promise1 => timer2 => promise2

一开始执行同步任务，依次打印出 start end，并将 2 个 timer 依次放入 timer 队列，之后会立即执行微任务队列，所以打印出 promise3。

然后进入 timers 阶段，执行 timer1 的回调函数，打印 timer1，发现有一个 promise.then 回调将其加入到微任务队列并且立即执行，之后同样的步骤执行 timer2，打印 timer2 以及 promise2。

一些注意点

setTimeout 和 setImmediate 区别

二者非常相似，区别主要在于调用时机不同。

• setImmediate 设计在 poll 阶段完成时执行，即 check 阶段

• setTimeout 设计在 poll 阶段为空闲时，且设定时间到达后执行，但它在 timer 阶段执行

来看一个具体的示例：

setTimeout(function timeout () {
  console.log('timeout');
},0);
setImmediate(function immediate () {
  console.log('immediate');
});

对于以上代码来说，setTimeout 可能执行在前，也可能执行在后。首先 setTimeout(fn, 0) === setTimeout(fn, 1)，这是由源码决定的，进入事件循环也是需要成本的，如果在准备时候花费了大于 1ms 的时间，那么在 timer 阶段就会直接执行 setTimeout 回调。如果准备时间花费小于 1ms，那么就是 setImmediate 回调先执行了。

但当二者在异步 I/O callback 内部调用时，总是先执行 setImmediate，再执行 setTimeout，例如：

const fs = require('fs')
fs.readFile(__filename, () => {
    setTimeout(() => {
        console.log('timeout');
    }, 0)
    setImmediate(() => {
        console.log('immediate')
    })
})
// immediate
// timeout

在上述代码中，setImmediate 永远先执行。因为两个代码写在 I/O 回调中，I/O 回调是在 poll 阶段执行，当回调执行完毕后队列为空，发现存在 setImmediate 回调，所以就直接跳转到 check 阶段去执行回调了。

process.nextTick

这个函数其实是独立于事件循环之外的，它有一个自己的队列。当每个阶段完成后，如果存在 nextTick 队列，就会清空队列中的所有回调函数，并且优先于其他 microtask 执行。

setTimeout(() => {
 console.log('timer1')
 Promise.resolve().then(function() {
   console.log('promise1')
 })
}, 0)
process.nextTick(() => {
 console.log('nextTick')
 process.nextTick(() => {
   console.log('nextTick')
   process.nextTick(() => {
     console.log('nextTick')
     process.nextTick(() => {
       console.log('nextTick')
     })
   })
 })
})
// nextTick => nextTick => nextTick => nextTick => timer1 => promise1

Promise.then

Promise.then 也是独立于事件循环之外的，有一个自己的队列，但是优先级要比 process.nextTick 要低，所以当微任务中同时存在 process.nextTick 和 Promise.then 时，会优先执行前者。

setTimeout(()=>{
    console.log('timer1')
    Promise.resolve().then(function() {
        console.log('promise1')
    })
    process.nextTick(() => {
        console.log('nexttick');
    })
}, 0)
setTimeout(()=>{
    console.log('timer2')
    Promise.resolve().then(function() {
        console.log('promise2')
    })
}, 0)
// timer1、nexttick、promise1、timer2、promise2

Node.js 与浏览器的事件队列的差异

浏览器环境下，就两个队列，一个宏任务队列，一个微任务队列。微任务的任务队列是每个宏任务执行完之后执行。

在 Node.js 中，每个任务队列的每个任务执行完毕之后，就会清空这个微任务队列。

这个合约使用了一个关键词：abstract。

合约如果继承另一个合约，而没有实现它的构造方法，我们使用abstract标记；

// SPDX-License-Identifier: MIT License
pragma solidity ^0.8.4;

import "@openzeppelin/contracts/token/ERC20/ERC20.sol";
import "@openzeppelin/contracts/access/Ownable.sol";

abstract contract ERC20Faucet is ERC20, Ownable {

    uint256 public interval = 60; // 领取时间周期
    uint256 public total = 1000000e18; // 可领取的总量
    uint256 public amount; // 单次领取的数量
    uint256 public minted; // 总共已经领取的数量

    mapping(address => uint256) lastFaucetTime;

    constructor (uint256 _amount){
        amount = _amount;
    }

    function faucet() external {
        require(total >= minted + amount, "Faucet is running out now.");
        require(block.timestamp - lastFaucetTime[msg.sender] > interval, "Interval is not expired.");

        minted += amount;
        lastFaucetTime[msg.sender] = block.timestamp;
        _mint(msg.sender, amount);
    }

    function setFaucetAmount(uint256 _faucetAmount) external onlyOwner {
        amount = _faucetAmount;
    }

    function setInterval(uint256 _inverval) external onlyOwner {
        interval = _inverval;
    }

    function setFaucetTotal(uint256 _faucetTotal) external {
        total = _faucetTotal;
    }
}

写好这个合约后，token创建合约可以继承这个合约

// SPDX-License-Identifier: MIT License
pragma solidity ^0.8.4;

import "./ERC20Faucet.sol";

contract USDC is ERC20Faucet {

    constructor (uint256 _premint, uint256 _amount) ERC20("USDC", "USDC") ERC20Faucet (_amount) {
        _mint(owner(), _premint);
    }
}

记录是记录当前智能合约运行状态的方法，他不会记录在区块链上（状态变量）；会体现在区块链浏览器上面或者log中；

栗子：

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.7;

contract Event {

    event Log(string message, address addr);
        // 带索引的方式
    event IndexLog (address indexed sender, uint val, uint val2, uint val3, uint val4);

    function example() external {
        emit Log("address", msg.sender);
        emit IndexLog(msg.sender, 123, 2,3, 8);
    }
}

注意：在 Solidity 0.8.0 中，只有数组、结构和映射类型可以指定数据位置。

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.7;

contract TodoList {
    struct Todo {
        string text;
        bool completed;
    }

    Todo[] public todos;

    function create(string calldata _text) external {
        todos.push(Todo({
            text: _text,
            completed: false
        }));
    }

    function updateText(uint _index, string calldata _text) external {
        require(_index < todos.length, "undefind");
        todos[_index].text = _text;
    }

    function get(uint _index) external view returns(string memory, bool)  {
        Todo storage todo = todos[_index];
        return (todo.text, todo.completed);
    }
}

智能合约中数据可以存储在storage、memory、calldata中

• storage：状态变量

• memory：局部变量

• calldata：函数的输入参数

calldata和memory比较类似。下面这种情况可以使用calldata

function a(uint calldata x) pure external returns(uint){
    b(x);
    return a + 1;
}

function b(uint calldata x) pure external returns(uint) {
    return x + 1;
}

解释：在函数a中调用了函数b，并把函数a中的变量局部变量作为参数传递给函数b，这种情况，如果b的参数不用calldata约定，a中的局部变量会先拷贝成memory类型，然后传递给b函数，这就会消耗过多gas。所以参数位置推荐使用calldata

• 通过代理合约部署合约

下面的这个例子，Proxy合约负责发布合约， 但是内部是写死的，如果以后要发布新的合约必须将代理合约重新部署一遍，这其实是没有意义的；

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.7;

contract TestContract1 {
    address public owner = msg.sender;

    function setOwner(address _owner) public {
        require(msg.sender == owner, "not owner");
        owner = _owner;
    }
}

contract Proxy {
    function deploy() external payable {
        new TestContract1();
    }
}

新的代理合约方案

// TODO
待续...

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.7;

contract Enum {
    enum Status {
        Node,
        Pedding,
        Shipped,
        Completed,
        Rejected,
        Canceled
    }

    Status public status;

    struct Order {
        address buyer;
        Status status
    }

    Order[] public orders;

    function get() view returns (Status) {
        return status;
    }

    // 设置枚举类型
    function set(Status _status) external {
        status = _status;
    }

    // 指定特定的枚举类型
    function ship() external {
        status = Status.Shipped;
    }

    // 恢复为默认值
    function reset() external {
        delete status;
    }
 }

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.7;

contract Structs {
    struct Car { // 结构体,有点像TS中的接口
        string model;
        uint year;
        address owner;
    }

    Car public car;
    Car[] public cars;

    mapping(address => Car[]) public carsByOwner;

    function examples() external {
        Car memory toyota = Car("Toyota", 1990, msg.sender);
        Car memory lambo = Car({year: 1980, model: "Lamborghini", owner: msg.sender});
        cars.push(toyota);
        cars.push(lambo);
    }
}