再用webpack从0开始搭建项目时，出现这样一个问题，配置的1级路由都正常执行，二级路由可以通过router.push 获取，但刷新浏览器时就会包404 的错误




上网查解决方法都关系不大，实际上仔细观察报错信息，发现它请求的资源在`localhost:8978/layout/vendors.js`
问题就出现在这个layout上，应该直接查找 `http://localhost:3456/vendors.js`

解决方法就是配置webpack.config.js 中的output.publicPath:'/'

webpack 二级路由404的问题

以本文记录如何使用Webpack从0开始搭建一个Vue3+TS项目，主要从中学习webpack的配置




## 初始化项目

- pnpm init 创建项目
- git init 创建本地仓库
- npx tsc --init 创建 tsconfig.json

安装webpack、webpack-cli 和 typescript


配置 package.json、 .gitignore、 tsconfig.json、webpack.config.js

- package.json 
~~~
// 在script中添加命令
script:{ 
    "build": "webpack"
    "dev": "webpack server"
}

// 修改mode 
mode: "development"
~~~

- gitignore 
让git忽略下面文件，不进行追踪
```
node_modules
dist\
```

- tsconfig.json 
没有进行修改

- webpack.config.js
入口文件，在项目目录下添加入口文件
`entry: './index.ts'`
生成html入口
- 安装 html-webpack-plugin
- 新建index.html
- 修改webpack.config.js
```
const htmlWebpackPlugin = require("html-webpack-plugin")
module.exports = {
    plugin:[
    new htmlWebpackPlugin({
    title: "项目title",
    template: "./index.html"
    }),
    
    ]
}
```

## 开发服务器

安装 webpack-dev-server 

在webpack.config.js 添加配置
```
 target: "web",
  devServer: {
    hot: true, // 热跟新
    open: true,
    proxy: {
      "/api": {
        target: "http://",
        changeOrigin: true, // 修改请求头中的host
        secure: false, // 运行代理到https
        pathRewrite: {
          // 重写地址
          "^/api": "/",
        },
      },
    },
  },
```

以上对应的是package.json 中的 `dev`

## 添加loader

### 处理ts

添加babel-loader(推荐) 或者ts-loader
安装依赖
babel-loader @babel/core @babel/preset-env @babel/preset-typescript

在 webpack.config.js 中配置
```
module.epxorts = {
  module: {
    rules: [
      {
        test: /\.(t|j)s$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            cacheDirectory: true,
          },
        },
      },
    ],
  },
};
```
添加 babel.config.js

```
module.exports = {
  presets: [
    "@babel/preset-env",
    [
      "@babel/preset-typescript",
      {
        allExtensions: true, //支持所有文件扩展名
      },
    ],
  ],
};
```

### 处理vue

安装依赖：vue@3 vue-loader @vue/compiler-sfc

在webpack.config.js 中需要各loader添加rules
```
rules:[
    {
    test: /\.vue$/,
    use:"vue-loader"
    }
]
```
还需要添加plugin 将配置的js，css等规则应用到vue文件中

```
const { VueLoaderPlugin } = require("vue-loader");

module.exports = {
plugin : [new VueLoaderPlugin(),]
}
```

### 处理less/scss

本项目使用less
安装依赖
style-loader css-loader less-loader

同样的需要给loader配置规则
```
rules:[
{
        test: /\.(le|c)ss$/,
        use: ["style-loader", "css-loader", "less-loader"],
      },
]
```
注意loader的选择是从右到左，从下往上的，所以loader的顺序不能改变

### 处理图片

使用 [asset Modules](https://webpack.js.org/guides/asset-modules/)

>Asset Modules is a type of module that allows one to use asset files (fonts, icons, etc) without configuring additional loaders.

不需要安装依赖，直接配置webpack.config.js

```
rules:[
{
        // 用asset modules type 实现加载图片
        test: /\.(png|svg|jpe?g|gif)$/,
        type: "asset",
        generator: {
          filename: "images/[name]-hash][ext]",
        },
      },
]
```

### 处理字体

字体同样

```
rules:[
{
        test: /\.(eot|svg|ttf|woff2?|)$/,
        type: "asset/resource",
        generator: {
          filename: "fonts/[name]-[hash][ext]",
        },
      },
]
```

## 代码隔离

```js
optimization: {
    splitChunks: {
      // 选择文件进行拆分，默认是async 只对动态导入的文件进行拆分
      chunks: "all",
      // 提取chunk的最小体积
      minSize: 20000,
      // 提取chunk的最少引用次数
      minChunks: 1,
      // 对要提取的trunk分组
      cacheGroups: {
        // 匹配node——modules中的第三方库。打包成一个trunk
        defaultVendors: {
          test: /[\\/]node_modules[\\/]/,
          name: "vendors",
          priority: -10,
        },
        default: {
          minChunks: 2,
          name: "default",
          priority: -20,
        },
      },
    },
  },
```

## 代码规范

eslint
- 添加eslint 
- 运行 npx eslint --init
- 选择，且安装相关依赖——typescript-eslint/eslint-plugin ,eslint-plugin-vue 
-  修改 .eslintrc.js 文件，将parser修改成："vue-eslint-parser"

prettire

- 安装相关依赖 prettier, eslint-config-prettire, eslint-plugin-prettier
- 添加.prettierrc 文件
- 添加.prettierignore ，忽略 dis和node_modules
- 修改.eslintre.js 文件， 在extends的最后添加`plugin: prettier/recommentded`

lint-staged 只检查在staged状态的文件
- 安装依赖 lint-stafed 
- 添加配置文件 lint-stage.config.js

```
module.exports = {
  "src/**/*.{js,ts,vue}": [
    "eslint --fix --ext .js,.ts,.vue",
    "prettier --write",
  ],
};
```

运行 npx lint-staged

husky (哈士奇)
- 安装依赖 husky
- 运行 husky install 
- 添加git hook `npx husky add .husky/pre-commit "npx lint-staged"`

webpack5创建Vue3项目+TS

## axios的功能和主要特性

> Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。





- 支持node端和浏览器端
- 支持Promise
- 丰富的配置项
  - 添加请求，响应拦截器，转换请求和响应数据
  - 取消，终端请求
  - 转换JSON数据
  - 客户端支出防范XSRF
- 社区支持

我要带着这几个问题去阅读源码
1. axios是如何实现网络请求的
2. axios是如何实现拦截器的
3. axios是如何能实现同时支持node端和浏览器端
4. axios的异步处理如何实现，有什么优秀的地方
5. axios的配置和封装有什么值得学习的地方
6. axios为什么能在网络请求中突出

关注的技术要点
- 设计模式
- Promise
- 数据转换
- 浏览器相关知识
- 网络相关知识
## 源码结构
```
|——lib
    |——adpters // 适配器
        |—— adapters.js // 适配器接口
        |—— http.js // http适配器，发送http请求
        |—— xhr.js // xhr适配器，发送ajax请求
    |——cancel
        |——CanceledError.js // 当操作被取消是抛出该错误类
        |——CancelToken.js // 定义了CancelToken类和取消请求的方法
        |——isCancel.js // 判断是否取消请求
    |——core
        |——Axios.js // 定义了Axios类，包含发送请求（request）和获取url的方法，提供多种使用request的方法
        |——AxiosError.js //当请求出现错误时，提供精确的信息
        |——AxiosHeader.js //定义处理请求头的方法
        |——buildFullpath.js //如果请求的url不完整，将baseUrl和requestUrl拼接完整
        |——despatchRequest.js //发送请求
        |——InterceptorManager.js // 管理拦截器，管理一个栈，该栈的元素由拦截器组成，定义了使用和清除拦截器的方法。
        |——mergeConfig.js // 合并配置项。
        |——settle.js // 根据请求返回数据的status决定promise的状态是reject还是resolve
        |——transformData.js // 格式化数据，
    |——defaults
        |——index.js //默认配置
        |——transitional
    |——env
    |——helper // 一些工具
    |——plaform // 浏览器和node环境
    |——axios.js // 实例化Axios类
    |——utils.js // 一些工具

```

## axios是如何实现网路请求的

axios提供两种方式的请求，一个是 从浏览器端向服务器端发送的xhr请求，一个是在node环境下服务器端向服务器端发送http请求。

这两种请求的具体实现
```js
 // lib/adpters/http.js
 import followRedirects from 'follow-redirects'; // 适配
 const {http: httpFollow, https: httpsFollow} = followRedirects;
 //...
 export default isHttpAdapterSupported && function httpAdapter(config) {
  return new Promise(function dispatchHttpRequest(resolvePromise, rejectPromise) {
     // ...一些请求的处理
     transport = isHttpsRequest ? httpsFollow : httpFollow; // 兼容http和https
     // 当请求不是get时
      req = transport.request(options, function handleResponse(res) { // res是服务器返回的结果
        // ...
        const response = { // 返回结果
        status: res.statusCode,
        statusText: res.statusMessage,
        headers: new AxiosHeaders(res.headers),
        config,
        request: lastRequest
      };
      settle(resolve, reject, response); // 根据状态码选择更改promise的状态
     }
  }
}
 
```
xhr请求
```js
lib/adpters/xhr.js
export default isXHRAdapterSupported && function (config) {
  return new Promise(function dispatchXhrRequest(resolve, reject) {
      let request = new XMLHttpRequest();
      request.open(config.method.toUpperCase(), buildURL(fullPath, config.params, config.paramsSerializer), true);
      // 当加载完成，将结果返回
      function onloadend(){
          const responseData = !responseType || responseType === 'text' || responseType === 'json' ?
        request.responseText : request.response;
            const response = {
            data: responseData,
            status: request.status,
            statusText: request.statusText,
            headers: responseHeaders,
            config,
            request
          };

          settle(function _resolve(value) {
            resolve(value);
            done();
          }, function _reject(err) {
            reject(err);
            done();
          }, response);
           request.onreadystatechange = function handleLoad() {/*...*/}
      }
     
      request.onabort = function handleAbort() {/*...*/} ;
      request.onerror = function handleError() {/*...*/};
      request.ontimeout = function handleTimeout() {/*...*/};
       request.send(requestData || null); // 发送请求
      }
  }
```

以上是发送请求的实际代码，那axios是如何将配置项一步一步的传递到发送请求的参数的

从入口开始分析 lib/axios.js 里面提供了实例化Axios类的接口

```js
function createInstance(defaultConfig) {
  const context = new Axios(defaultConfig);
  const instance = bind(Axios.prototype.request, context);

  // Copy axios.prototype to instance
  utils.extend(instance, Axios.prototype, context, {allOwnKeys: true});

  // Copy context to instance
  utils.extend(instance, context, null, {allOwnKeys: true});

  // Factory for creating new instances
  instance.create = function create(instanceConfig) {
    return createInstance(mergeConfig(defaultConfig, instanceConfig));
  };

  return instance;
}
```
对应在使用axios时的代码

```
// axios.create
const instance = axios.create({
  baseURL: import.meta.env.VITE_URL // 当请求url不完整时会对其进行拼接
})
```

再来看Axios类，里面有一个很重要的方法request()

```js
// lib/core/Axios.js
class Axios {
  constructor(instanceConfig) {
    this.defaults = instanceConfig;
    this.interceptors = {
      request: new InterceptorManager(),
      response: new InterceptorManager()
    };
  }

  /**
   * Dispatch a request
   *
   * @param {String|Object} configOrUrl The config specific for this request (merged with this.defaults)
   * @param {?Object} config
   *
   * @returns {Promise} The Promise to be fulfilled
   */
  request(configOrUrl, config) {
    config = mergeConfig(this.defaults, config);
    const {transitional, paramsSerializer, headers} = config;
     

    // Set config.method
    config.method = (config.method || this.defaults.method || 'get').toLowerCase();

    let contextHeaders;
     
    // Flatten headers...
    // 拦截器
    // 过滤掉跳过的拦截器
    const requestInterceptorChain = []; // 请求拦截器，一般有两个，成功的一个，失败的一个
    let synchronousRequestInterceptors = true;
    this.interceptors.request.forEach(function unshiftRequestInterceptors(interceptor) {
      if (typeof interceptor.runWhen === 'function' && interceptor.runWhen(config) === false) {
        return;
      }

      synchronousRequestInterceptors = synchronousRequestInterceptors && interceptor.synchronous;

      requestInterceptorChain.unshift(interceptor.fulfilled, interceptor.rejected);
    });

    const responseInterceptorChain = []; // 响应拦截器，一个成功的，一个失败的
    this.interceptors.response.forEach(function pushResponseInterceptors(interceptor) {
      responseInterceptorChain.push(interceptor.fulfilled, interceptor.rejected);
    });

    let promise;
    let i = 0;
    let len;

    if (!synchronousRequestInterceptors) {
    // chain是执行队列，实现拦截器的关键
      const chain = [dispatchRequest.bind(this), undefined]; // 插入dispatchRequest（发送请求获取结果），插入undefined是由于2个2个执行
      chain.unshift.apply(chain, requestInterceptorChain); // 插入请求拦截器
      chain.push.apply(chain, responseInterceptorChain); // 插入响应拦截器
      len = chain.length;

      promise = Promise.resolve(config);

      while (i < len) {
        promise = promise.then(chain[i++], chain[i++]);
      }

      return promise;
    }

    len = requestInterceptorChain.length;

    let newConfig = config;

    i = 0;
    // 执行chain中的函数
    // 执行请求拦截器
    while (i < len) {
      const onFulfilled = requestInterceptorChain[i++];
      const onRejected = requestInterceptorChain[i++];
      try {
        newConfig = onFulfilled(newConfig);
      } catch (error) {
        onRejected.call(this, error);
        break;
      }
    }
    // 发送请求
    try {
      promise = dispatchRequest.call(this, newConfig);
    } catch (error) {
      return Promise.reject(error);
    }

    i = 0;
    len = responseInterceptorChain.length;
    // 响应拦截器
    while (i < len) {
      promise = promise.then(responseInterceptorChain[i++], responseInterceptorChain[i++]);
    }

    return promise;
  }
```
从上面可以看出request中chain的执行顺序 : requestInterceptor.fulfill,requestInterceptor.reject, dispatchRequest,responseInterceptor.fulfill,responseInterceptor.reject
我们先暂时忽视掉拦截器的内容，发送请求的下一个函数是 dispatchRequest

axios源码阅读

## 观察者模式（发布-订阅模式）

GOF 定义
>定义对象间的一种一对多的依赖关系 ,当一个对象的状态发生改变时 , 所有依赖于它的对象  
都得到通知并被自动更新。



举一个简单的例子。excel里可以将数据描述成图像，当表格中的数据改变时，图像也应该相应改变,而不需要重新生成图像。数据可以被描述成柱状图，饼图，条形图等等，这里数据就是就是发布者，各种图就是订阅者

观察者模式要做的就是 当发布者的状态发生改变时，通知各个订阅者。

### JavaScipte 原生实现

先来实现上面的例子, 当数据改变时各个图像也会更新

~~~html
<div>
<div id="data" ></div>
<div id="img1"></div>
<div id="img2"></div>
<button id="btn">click</button>
<div/>
~~~

~~~

let dataEl = document.getElementById('data')
let img1El = document.getElementById('img1')
let img2El = document.getElementById('img2')
let btnEl = document.getElementById('btn')

let img1={
  data: 0,
  update: function(data){
    this.data = data+1
    img1El.innerHTML = `img1：${this.data}`
  }
}

let img2={
  data: 0,
  update: function(data){
    
    this.data = data+2
    img2El.innerHTML = `img2：${this.data}`
  }
}

// 数据
let dataObj = {
  data: 1,
  observers:[img1,img2],
  notify: function(){ // 通知图像更新
    this.observers.forEach((observer)=>{
      if(observer.update){
        
        observer.update(this.data)
      }
    })
  },
  setSate: function(){
    this.data ++
    dataEl.innerHTML = this.data
    // 数据发生改变，通知依赖数据的图
    this.notify();
    
  }
}

btnEl.addEventListener('click',()=>{
  dataObj.setSate()
})
~~~

通过上面的方法，我们可以实现，当点击一次click，三个数字都会更新。

![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8af712500a5747a7be6b80f0b79344b0~tplv-k3u1fbpfcp-watermark.image?)

现在来把代码优化一下，首先是img1 和 img2 这两个对象很明显可以通过同一个构造函数构造出来

~~~
function Img (data,work) {
    this.data = data
    // 这里只是更新数据，具体的对象工作不相同，不适合写在update中
    this.update = (dataObj)=>{
    this.data = dataObj.data
     work(this.data) // 更新数据后的工作
    }
}
let img1 = new Img(1,(data)=>{
    img1El.innerHTML = `img1：${data}`
})
let img2 = new Img(2,(data)=>{
    img2El.innerHTML = `img2：${data}`
})
~~~

发布者一般只有一个，这里就不抽象成类了。

进一步抽象，我们不关心发布者和订阅者到底是谁，我们只关心发布者和订阅者要做些什么，把它们抽象成类

首先是发布者，通过上面的例子我们可以知道，发布者都需要有通知订阅者的能力，所以必须要有`observers` 属性和 `notify`方法，同时也要有修改observers的能力,于是得到
~~~
class Publisher {
    constructor(){
        this.observers =[]
    },
    addObserver(observer){
    this.observers.push(observer)
    },
    removeObserver(observer){
    this.observers.forEach((item, i) => { 
        if (item === observer) { 
        this.observers.splice(i, 1) 
          } 
        })
    },
    notify(){
    this.observers.forEach((observer)=>{
      if(observer.update){
        observer.update(this)
      }
    })
    }
}
~~~

作为订阅者，就是要接收发布者发送的消息 也就是`update`
~~~
class Observer{
constructor(){},
update(){
 }
}
~~~

通过继承来实现上述例子

~~~js
class Img extends Observer {
  constructor (data){
      super()
    this.data = data
  }
    // 这里只是更新数据，具体的对象工作不相同，不适合写在update中
    update(dataObj){
      this.data = dataObj.data
      this.work(this.data) // 更新数据后的工作
    }
    work(){

    }
}
let img1 = new Img(1)
let img2 = new Img(2)
img1.work = function(data){
  this.data = data+1
  img1El.innerHTML = `img1:${this.data}`
}
img2.work = function(data){
  this.data = data+2
  img2El.innerHTML = `img2:${this.data}`
}

let dataObj = new Publisher()

dataObj.addObserver(img1)
dataObj.addObserver(img2)
dataObj.data = 0;
dataObj.setSate = function(){
  this.data++
  dataEl.innerHTML = this.data
  this.notify();
}
~~~


## 用Proxy和Reflex实现

```

class Observer {
  constructor(val){
    this.val = val;

  }
  update(publish){ // 数据跟新时运行
    this.work(publish)
  }
  work(publish){
    console.log(this.val)
    
  }
}

// 继承实现真正的Observer类
let ob1 = new Observer(1)
let ob2 = new Observer(2)

// 重写work函数

ob1.work=(publish)=>{
  console.log(publish)
}

class Publish {
  constructor(){
    // 订阅set集合
    this.observers = new Set()
  }
  // 添加observer
  add(observer){
    this.observers.add(observer)
  }
  // 取消订阅
  remove(observer){
    this.obserers.delete(observer)
  }
}

let publish = new Publish()

publish.observers.add(ob1).add(ob2)

const publishProxy = new Proxy(publish,{
  set(target,p,value,reciever){
    let result = Reflect.set(target,p,value,reciever)
    // 触发订阅者
    reciever.observers.forEach((observer)=>observer.update(target)) 
    return result
  }
})

publishProxy.n = 1
publishProxy.n++
```

观察者模式

## Set
ES6中新提供的数据结构，它类似于数组，但是成员都是唯一的，没有相同的值。



### 属性和方法
- Set.prototype.constructor：构造函数，默认就是Set函数。
- Set.prototype.size：返回Set实例的成员总数。
- Set 实例的方法分为两大类：操作方法（用于操作数据）和遍历方法（用于遍历成员）。

四个操作方法。

- Set.prototype.add(value)：添加某个值，返回 Set 结构本身。
- Set.prototype.delete(value)：删除某个值，返回一个布尔值，表示删除是否成功。
- Set.prototype.has(value)：返回一个布尔值，表示该值是否为Set的成员。
- Set.prototype.clear()：清除所有成员，没有返回值。

### 基本使用

实例化：`new Set` Set构造函数可以接收一个 数组用来初始化
增删查 清除：`add` `delete` `has` `clear`

> Set()内部判断是否重复的方法 类似于`===` 需要判断值和类型，不同的地方在于 判断`NaN==NaN` 只存储一个NaN，对于对象都是不同的。


:::note{title="注"}
扩展运算符（...）内部使用for...of循环，所以也可以用于 Set 结构。
:::
```
let s1 = new Set()
let s2 = new Set([1,2,3,4]) // Set(1,2,3,4)
s1.add({})
s1.add({})
s1.add(NaN)
s1.add(NaN)
s1// Set({},{},NaN)
```
**Set常用来数组去重**
```
[...new Set(array)] // 数组去重第一种方法
const items = new Set([1, 2, 3, 4, 5]);
const array = Array.from(items); // 去重第二种方法
[...new Set('ababbc')].join('') // 字符串去重
```

### 遍历

- Set.prototype.keys()：返回键名的遍历器
- Set.prototype.values()：返回键值的遍历器
- Set.prototype.entries()：返回键值对的遍历器
- Set.prototype.forEach()：使用回调函数遍历每个成员

> Set的遍历顺序就是插入顺序

使用方法
```
for (let item of set.entries()) { // keys() values()
  console.log(item);
}

s.forEach((key,value,set)=>{}) // 处理函数有三个参数 分别表示 键，值，set本身
```
> Set 本身 键和值是一样的，与数组不同，数组的键是下标


### WeakSet

> WeakSet 对象允许你将弱保持对象存储在一个集合中。

它和 Set 对象的主要区别有：

- WeakSet 只能是对象的集合，而不能像 Set 那样，可以是任何类型的任意值。
- WeakSet 持弱引用：集合中对象的引用为弱引用。如果没有其它的对 WeakSet 中对象的引用，那么这些对象会被当成垃圾回收掉。


## Map

> Map 对象保存键值对，并且能够记住键的原始插入顺序。任何值（对象或者基本类型）都可以作为一个键或一个值

### 属性和方法
- Map.prototype.clear()
移除 Map 对象中所有的键值对。

- Map.prototype.delete()
移除 Map 对象中指定的键值对，如果键值对存在并成功被移除，返回 true，否则返回 false。调用 delete 后再调用 map.has(key) 将返回 false。

- Map.prototype.get()
返回与指定的键 key 关联的值，若不存在关联的值，则返回 undefined。

- Map.prototype.has()
返回一个布尔值，用来表明 Map 对象中是否存在与指定的键 key 关联的值。

- Map.prototype.set()
在 Map 对象中设置与指定的键 key 关联的值，并返回 Map 对象。

- Map.prototype[@@iterator]()
返回一个新的迭代对象，其为一个包含 Map 对象中所有键值对的 [key, value] 数组，并以插入 Map 对象的顺序排列。

### 基本使用
- 实例化Map对象，使用构造函数`Map()` ，可以添加一个具有迭代器的参数（Array，Set，Map）
- 可以通过 set()方法设置属性，也可以使用`m.[key]=value` (不推荐) 这样添加的属性是并不存储在Map中，而关于Map的方法也不能使用，这只是一个普通的对象
- 通过 get()方法获取属性

> 键的比较，与Set相同 
> 键的比较基于**零值相等**算法。（它曾经使用同值相等，将 0 和 -0 视为不同。检查浏览器兼容性。）这意味着 NaN 是与 NaN 相等的（虽然 NaN !== NaN），剩下所有其它的值是根据 === 运算符的结果判断是否相等。


```
const key = 'a'
let m1 = new Map()
m1.set(key,1)
let m2 = new Map()
m2[key] = 1 
m1.get(key) // 1
m2.get(key) // undefine key没有被存储在Map中
m2.a // 1 表明a作为键被存储在对象中
m1.get('__proto__') // undefine get并不会向对象一样向上查找属性
m1.__proto__ // Map
```
> Map 默认情况不包含任何键。只包含显式插入的键


### 遍历

- Map.prototype.keys()：返回键名的遍历器。
- Map.prototype.values()：返回键值的遍历器。
- Map.prototype.entries()：返回所有成员的遍历器。
- Map.prototype.forEach()：遍历 Map 的所有成员。

> 同样支持`...`

> 遍历顺序 是插入顺序

> Map 没有元素的序列化和解析的支持。
也就是不能作为JSON.stringify() 的参数

> 与Set不同
> Map 可以使用 for...of 循环来实现迭代



```
for (const [key, value] of myMap) {
  console.log(`${key} = ${value}`);
}
```
### 与Array的相互转换

```
const kvArray = [['key1', 'value1'], ['key2', 'value2']];

// 使用常规的 Map 构造函数可以将一个二维键值对数组转换成一个 Map 对象
const myMap = new Map(kvArray);

console.log(myMap.get('key1')); // "value1"

// 使用 Array.from 函数可以将一个 Map 对象转换成一个二维键值对数组
console.log(Array.from(myMap)); // 输出和 kvArray 相同的数组

// 更简洁的方法来做如上同样的事情，使用展开运算符
console.log([...myMap]);

// 或者在键或者值的迭代器上使用 Array.from，进而得到只含有键或者值的数组
console.log(Array.from(myMap.keys())); // 输出 ["key1", "key2"]
```

浅拷贝一个Map对象

~~~
let map = new Map([[0,'0']])

let copy = new Map(map)
map == copy // false
map.get(0) == copy.get(0) // true
~~~